From ae1cb7bbf43c87c5a38f96e4cb8f2b8dacbc87f7 Mon Sep 17 00:00:00 2001 From: skumpulainen Date: Tue, 8 Oct 2024 14:57:42 +0300 Subject: [PATCH 1/2] add simple header and navigation --- frontend/public/treylogo-navigation.svg | 8 +++ frontend/src/App.tsx | 24 +++++--- frontend/src/components/Dashboard.tsx | 6 +- .../src/components/Header/Header.module.css | 14 +++++ frontend/src/components/Header/Header.tsx | 15 +++++ frontend/src/components/Layout/Layout.tsx | 16 ++++++ frontend/src/components/Login.tsx | 6 +- .../LoginContainer/LoginContainer.tsx | 10 ++++ .../LoginContainer/Logincontainer.module.css | 5 ++ .../Navigation/Navigation.module.css | 55 +++++++++++++++++++ .../src/components/Navigation/Navigation.tsx | 38 +++++++++++++ frontend/src/index.css | 11 +++- 12 files changed, 191 insertions(+), 17 deletions(-) create mode 100644 frontend/public/treylogo-navigation.svg create mode 100644 frontend/src/components/Header/Header.module.css create mode 100644 frontend/src/components/Header/Header.tsx create mode 100644 frontend/src/components/Layout/Layout.tsx create mode 100644 frontend/src/components/LoginContainer/LoginContainer.tsx create mode 100644 frontend/src/components/LoginContainer/Logincontainer.module.css create mode 100644 frontend/src/components/Navigation/Navigation.module.css create mode 100644 frontend/src/components/Navigation/Navigation.tsx diff --git a/frontend/public/treylogo-navigation.svg b/frontend/public/treylogo-navigation.svg new file mode 100644 index 0000000..b34abf0 --- /dev/null +++ b/frontend/public/treylogo-navigation.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index fc33708..dee2593 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,22 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom" -import { Container } from "@radix-ui/themes" import "./App.css" import { ProtectedRoute, GuestRoute } from "./api/router" import Dashboard from "./components/Dashboard" +import { Layout } from "./components/Layout/Layout" import Login from "./components/Login" +interface IProtectedRoutePage { + component: () => JSX.Element +} + +const ProtectedRoutePage: React.FC = ({ component }) => { + return ( + + + + ) +} + const router = createBrowserRouter([ { id: "App", @@ -12,7 +24,7 @@ const router = createBrowserRouter([ children: [ { index: true, - Component: () => , + Component: () => , }, { path: "/login", @@ -20,18 +32,14 @@ const router = createBrowserRouter([ }, { path: "/dashboard", - element: , + element: , }, ], }, ]) function App() { - return ( - - - - ) + return } export default App diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx index a19f8f0..2527565 100644 --- a/frontend/src/components/Dashboard.tsx +++ b/frontend/src/components/Dashboard.tsx @@ -1,9 +1,5 @@ const Dashboard = () => { - return ( -
-

Dashboard

-
- ) + return

Dashboard

} export default Dashboard diff --git a/frontend/src/components/Header/Header.module.css b/frontend/src/components/Header/Header.module.css new file mode 100644 index 0000000..6717c9a --- /dev/null +++ b/frontend/src/components/Header/Header.module.css @@ -0,0 +1,14 @@ +.header { + display: flex; + background-color: var(--blue-9); + padding: 10px; +} + +.image-container { + display: flex; + align-items: center; +} + +.image-container img { + max-height: 30px; +} diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx new file mode 100644 index 0000000..14079be --- /dev/null +++ b/frontend/src/components/Header/Header.tsx @@ -0,0 +1,15 @@ +import React from "react" +import treylogo from "../../../public/treylogo-navigation.svg" +import Navigation from "../Navigation/Navigation" +import styles from "./Header.module.css" + +export const Header: React.FC = () => { + return ( +
+
+ TREY-logo +
+ +
+ ) +} diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx new file mode 100644 index 0000000..3217f15 --- /dev/null +++ b/frontend/src/components/Layout/Layout.tsx @@ -0,0 +1,16 @@ +import React from "react" +import { Container } from "@radix-ui/themes" +import { Header } from "../Header/Header" + +interface ILayout { + children: React.ReactNode +} + +export const Layout: React.FC = ({ children }) => { + return ( + <> +
+ {children} + + ) +} diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx index ea2c925..a0ac13f 100644 --- a/frontend/src/components/Login.tsx +++ b/frontend/src/components/Login.tsx @@ -1,6 +1,6 @@ import { StytchLogin } from "@stytch/react" import { Callbacks, Products } from "@stytch/vanilla-js" -import { Container } from "@radix-ui/themes" +import { LoginContainer } from "../components/LoginContainer/LoginContainer" const Login = () => { const REDIRECT_URL = "http://localhost:5173/dashboard" @@ -28,7 +28,7 @@ const Login = () => { } return ( - + { }, }} /> - + ) } diff --git a/frontend/src/components/LoginContainer/LoginContainer.tsx b/frontend/src/components/LoginContainer/LoginContainer.tsx new file mode 100644 index 0000000..d925e90 --- /dev/null +++ b/frontend/src/components/LoginContainer/LoginContainer.tsx @@ -0,0 +1,10 @@ +import React from "react" +import styles from "./Logincontainer.module.css" + +interface ILoginContainer { + children: React.ReactNode +} + +export const LoginContainer: React.FC = ({ children }) => { + return
{children}
+} diff --git a/frontend/src/components/LoginContainer/Logincontainer.module.css b/frontend/src/components/LoginContainer/Logincontainer.module.css new file mode 100644 index 0000000..f0cba81 --- /dev/null +++ b/frontend/src/components/LoginContainer/Logincontainer.module.css @@ -0,0 +1,5 @@ +.login-container { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/frontend/src/components/Navigation/Navigation.module.css b/frontend/src/components/Navigation/Navigation.module.css new file mode 100644 index 0000000..3279a61 --- /dev/null +++ b/frontend/src/components/Navigation/Navigation.module.css @@ -0,0 +1,55 @@ +/* reset */ +button, +p { + all: unset; +} + +.navigation { + position: relative; + display: flex; + width: 100%; + z-index: 1; + justify-content: space-between; + align-items: center; +} + +.navigation-menu-list { + display: flex; + list-style: none; + margin: 0; +} + +.navigation-menu-link { + display: block; + text-decoration: none; + font-size: 16px; +} +.navigation-menu-link[data-active="true"] { + text-decoration: underline; + color: var(--trey-yellow); +} + +.navigation-menu-trigger, +.navigation-menu-link { + padding: 8px 12px; + outline: none; + font-weight: 500; + border-radius: 4px; + color: var(--white); +} +.navigation-menu-trigger:hover, +.navigation-menu-link:hover { + text-decoration: underline; +} +.navigation-menu-trigger:focus, +.navigation-menu-link:focus { + outline: 2px solid var(--blue-focus); + color: var(--trey-yellow); +} + +.navigation-menu-trigger { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2px; +} diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx new file mode 100644 index 0000000..6b7f05a --- /dev/null +++ b/frontend/src/components/Navigation/Navigation.tsx @@ -0,0 +1,38 @@ +import { useLocation } from "react-router-dom" +import * as NavigationMenu from "@radix-ui/react-navigation-menu" +import styles from "./Navigation.module.css" + +const navigationRoutes = [{ name: "Dashboard", href: "/dashboard" }] + +const Navigation = () => { + const location = useLocation() + + return ( + + + {navigationRoutes.map((navigationRoute, i) => { + return ( + + + {navigationRoute.name} + + + ) + })} + + + + + {"käyttäjä tähän"} + + + + + ) +} + +export default Navigation diff --git a/frontend/src/index.css b/frontend/src/index.css index 9f5f664..6beb64a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,11 +2,20 @@ --trey-blue: #006069; --blue-9: var(--trey-blue); --blue-a9: var(--trey-blue); + --trey-yellow: #ffcc00; + --white: #ffffff; + --blue-focus: #4d4aff; } body { background-image: url("https://trey.fi/content/themes/trey/svg/tausta_aalto.svg"); - background-color: #006069; + background-color: var(--trey-blue); background-size: cover; background-repeat: repeat; + margin: 0; + padding: 0; +} + +.rt-ContainerInner { + background-color: var(--white); } From bb633d291f776dc067511333e3494677144dfa5c Mon Sep 17 00:00:00 2001 From: skumpulainen Date: Wed, 16 Oct 2024 14:50:32 +0300 Subject: [PATCH 2/2] fix indexing and add cursor pointer to trigger --- frontend/src/components/Navigation/Navigation.module.css | 1 + frontend/src/components/Navigation/Navigation.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Navigation/Navigation.module.css b/frontend/src/components/Navigation/Navigation.module.css index 3279a61..4e190f7 100644 --- a/frontend/src/components/Navigation/Navigation.module.css +++ b/frontend/src/components/Navigation/Navigation.module.css @@ -52,4 +52,5 @@ p { align-items: center; justify-content: space-between; gap: 2px; + cursor: pointer; } diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx index 6b7f05a..83cb449 100644 --- a/frontend/src/components/Navigation/Navigation.tsx +++ b/frontend/src/components/Navigation/Navigation.tsx @@ -10,11 +10,11 @@ const Navigation = () => { return ( - {navigationRoutes.map((navigationRoute, i) => { + {navigationRoutes.map((navigationRoute) => { return ( - +