add simple header and navigation

frontend/src/App.tsx

@@ -1,37 +1,45 @@
 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<IProtectedRoutePage> = ({ component }) => {
+  return (
+    <Layout>
+      <ProtectedRoute component={component} />
+    </Layout>
+  )
+}
+
 const router = createBrowserRouter([
   {
     id: "App",
     path: "/",
     children: [
       {
         index: true,
-        Component: () => <ProtectedRoute component={Dashboard} />,
+        Component: () => <ProtectedRoutePage component={Dashboard} />,
       },
       {
         path: "/login",
         element: <GuestRoute component={Login} />,
       },
       {
         path: "/dashboard",
-        element: <ProtectedRoute component={Dashboard} />,
+        element: <ProtectedRoutePage component={Dashboard} />,
       },
     ],
   },
 ])
 
 function App() {
-  return (
-    <Container align="center">
-      <RouterProvider router={router} />
-    </Container>
-  )
+  return <RouterProvider router={router} />
 }
 
 export default App

frontend/src/components/Dashboard.tsx

@@ -1,9 +1,5 @@
 const Dashboard = () => {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-    </div>
-  )
+  return <h1>Dashboard</h1>
 }
 
 export default Dashboard

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;
+}

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 (
+    <header className={styles["header"]}>
+      <div className={styles["image-container"]}>
+        <img src={treylogo} alt="TREY-logo" />
+      </div>
+      <Navigation />
+    </header>
+  )
+}

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<ILayout> = ({ children }) => {
+  return (
+    <>
+      <Header />
+      <Container align="center">{children}</Container>
+    </>
+  )
+}

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 (
-    <Container align="center" width={"auto"}>
+    <LoginContainer>
       <StytchLogin
         config={config}
         callbacks={callbacks}
@@ -38,7 +38,7 @@ const Login = () => {
           },
         }}
       />
-    </Container>
+    </LoginContainer>
   )
 }
 

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<ILoginContainer> = ({ children }) => {
+  return <div className={styles["login-container"]}>{children}</div>
+}

frontend/src/components/LoginContainer/Logincontainer.module.css

@@ -0,0 +1,5 @@
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

frontend/src/components/Navigation/Navigation.module.css

@@ -0,0 +1,56 @@
+/* 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;
+  cursor: pointer;
+}

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 (
+    <NavigationMenu.Root className={styles["navigation"]}>
+      <NavigationMenu.List className={styles["navigation-menu-list"]}>
+        {navigationRoutes.map((navigationRoute) => {
+          return (
+            <NavigationMenu.Item key={navigationRoute.name}>
+              <NavigationMenu.Link
+                data-active={location.pathname === navigationRoute.href}
+                className={styles["navigation-menu-link"]}
+                href={navigationRoute.href}
+              >
+                {navigationRoute.name}
+              </NavigationMenu.Link>
+            </NavigationMenu.Item>
+          )
+        })}
+      </NavigationMenu.List>
+      <NavigationMenu.List className={styles["navigation-menu-list"]}>
+        <NavigationMenu.Item>
+          <NavigationMenu.Trigger className={styles["navigation-menu-trigger"]}>
+            {"käyttäjä tähän"}
+          </NavigationMenu.Trigger>
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+    </NavigationMenu.Root>
+  )
+}
+
+export default Navigation

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);
 }