fix: resolve merge conflict

src/web/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

src/web/src/components/Dashboard.tsx

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

src/web/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;
+}

src/web/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>
+  )
+}

src/web/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>
+    </>
+  )
+}

src/web/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 = "/dashboard"
@@ -19,27 +19,27 @@ const Login = () => {
       // TODO: add more event types as needed
       console.log(event)
       if (
-          (event.type === "AUTHENTICATE_FLOW_COMPLETE" || event.type === "PASSWORD_AUTHENTICATE") &&
-          event.data?.user
+        (event.type === "AUTHENTICATE_FLOW_COMPLETE" || event.type === "PASSWORD_AUTHENTICATE") &&
+        event.data?.user
       ) {
         window.location.href = REDIRECT_URL
       }
     },
   }
 
   return (
-      <Container align="center" width={"auto"}>
-        <StytchLogin
-            config={config}
-            callbacks={callbacks}
-            styles={{
-              logo: {
-                logoImageUrl: "https://trey.fi/media/trey_tunnus_musta-1.png",
-              },
-            }}
-        />
-      </Container>
+    <LoginContainer>
+      <StytchLogin
+        config={config}
+        callbacks={callbacks}
+        styles={{
+          logo: {
+            logoImageUrl: "https://trey.fi/media/trey_tunnus_musta-1.png",
+          },
+        }}
+      />
+    </LoginContainer>
   )
 }
 
-export default Login
+export default Login

src/web/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>
+}

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

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

src/web/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;
+}

src/web/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