inital top bar created

polsevev.dev.frontend/package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0"
+    "react-router-dom": "^6.15.0",
+    "styled-components": "^6.0.7"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -21,7 +22,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
+    "eslint": "^8.47.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",

polsevev.dev.frontend/src/Pages/HomePage.tsx

@@ -0,0 +1,10 @@
+const HomePage: React.FC = () => {
+  return (
+    <>
+
+      <h1>HomePage</h1>
+    </>
+  );
+};
+
+export default HomePage;

polsevev.dev.frontend/src/Pages/Root.tsx

@@ -1,14 +1,15 @@
 import React from "react"
 import { Outlet } from "react-router";
+import TopBar from "../components/TopBar";
 
 
-const  Root: React.FC = () => {
+const Root: React.FC = () => {
 
     return (
-        <>
+    <div>
-            <h1>Hello!</h1>
+        <TopBar/>
-            <Outlet/>
+        <Outlet/>
-        </>
+    </div>
     )
 }
 export default Root;

polsevev.dev.frontend/src/components/TopBar.tsx

@@ -1,14 +1,21 @@
-import React from "react"
+import React from "react";
 
+import { NavItem, Wrapper } from "../styles/TopBarStyle";
+import { useNavigate } from "react-router-dom";
 
-const  TopBar: React.FC = () => {
+const TopBar: React.FC = () => {
+  const navigate = useNavigate();
+  const handleClick = (loc:string) => navigate(loc);
 
+  const locations:Array<string> = ["/", "about"];
 
-
+  return (
-    return (
+    <>
-        <>
+      <Wrapper>
-        
+        {locations.map((location) => 
-        </>
+          <NavItem onClick={() => handleClick(location)}>{location}</NavItem>
-    )
+        )}
-}
+      </Wrapper>
+    </>);
+};
 export default TopBar;

polsevev.dev.frontend/src/main.tsx

@@ -6,6 +6,7 @@ import { createBrowserRouter } from "react-router-dom";
 import Root from "./Pages/Root.tsx";
 import About from "./Pages/About.tsx";
 import ErrorPage from "./Pages/ErrorPage.tsx";
+import HomePage from "./Pages/HomePage.tsx";
 
 const router = createBrowserRouter([
   {
@@ -13,6 +14,7 @@ const router = createBrowserRouter([
     element: <Root />,
     errorElement: <ErrorPage />,
     children: [
+      {path: "/", element: <HomePage/>},
       {
         path: "/about",
         element: <About />,

polsevev.dev.frontend/src/styles/TopBarStyle.tsx

@@ -0,0 +1,25 @@
+
+import styled from "styled-components";
+
+export const Wrapper = styled("div")`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    align-items:center;
+    display:flex;
+    justify-content: space-between;
+    background-color: red;
+    height: 3em;
+`;
+
+export const NavItemBox = styled("div")`
+    align-items: center;
+    justify-content: center;
+    width: calc(33.3% - 5px);
+
+`
+
+export const NavItem = styled("button")`
+
+`