added: simple header (desktop), fix: small bugs

MichaelTeida · Jan 19, 2024 · 7aed062 · 7aed062
1 parent 54a2664
commit 7aed062
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,18 +1,19 @@
 import './styles/App.scss'
-import {Link as RouterLink, Outlet} from "react-router-dom";
-import {Container, Typography} from "@mui/joy";
+import {Outlet} from "react-router-dom";
+import {Box, Container} from "@mui/joy";
+import Header from "./components/Header.jsx";
 
 function App() {
 
     return (
-        <Container sx={{ minHeight: '100dvh' }}>
-            <Typography>Hello there ;)</Typography>
-            <nav>
-                <RouterLink to="/NeuraChatAi/">Homepage</RouterLink>
-                <RouterLink to="/NeuraChatAi/about">About</RouterLink>
-            </nav>
-            <Outlet/>
-        </Container>
+        <>
+            <Header />
+            <Container sx={{ display: 'flex', minHeight: 1 }}>
+                <Box component="main" className="MainContent" sx={{ flex: 1, m: 2}}>
+                    <Outlet/>
+                </Box>
+            </Container>
+        </>
     )
 }
 

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,33 @@
+import {Sheet, Stack, Typography} from "@mui/joy";
+import {Link as RouterLink} from "react-router-dom";
+
+function Header () {
+    return (
+    <Sheet component="header" stickyHeader
+        sx={{
+        display: 'flex',
+        p: 2,
+        flexGrow: 1,
+            maxWidth: 1,
+        justifyContent: "space-between",
+        background: "secondary",
+    }}>
+        <Stack direction="row"
+               justifyContent="center"
+               alignItems="center"
+               spacing={2}>
+            <Typography>NeuraChatAi</Typography>
+            <RouterLink to="/NeuraChatAi/">Homepage</RouterLink>
+            <RouterLink to="/NeuraChatAi/about">About</RouterLink>
+        </Stack>
+        <Stack  direction="row"
+                justifyContent="center"
+                alignItems="center"
+                spacing={1}>
+
+        </Stack>
+    </Sheet>
+    )
+}
+
+export default Header
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -3,5 +3,5 @@ export function About() {
         <>
             <div>About NeuraChatAi</div>
         </>
-    )
-}
+    );
+}
diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -0,0 +1,5 @@
+body {
+  a {
+    text-decoration: none;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,5 +3,5 @@ export function About() { @@
             <>
                 <div>About NeuraChatAi</div>
             </>
-        )
-    }
+        );
+    }