Updated header

src/components/Header.tsx

@@ -1,66 +1,11 @@
-import { Button, Theme } from "@mui/material";
-import {
-    AppBar,
-    Container,
-    Toolbar,
-    Box,
-    Typography,
-    Stack,
-    Tab,
-    Tabs,
-} from "@mui/material";
-import type { SystemStyleObject } from "@mui/system";
-import type { ReactNode } from "react";
-
-const routes: string[] = ["projects", "explore", "go premium", "profile"];
+import { Button } from "@mui/material";
+import { AppBar, Container, Toolbar, Typography, Stack } from "@mui/material";
+import { theme } from "@styles/muiTheme";
+import { authedRoutes, defaultRoutes } from "src/constants/routes";
 
 export default function Header() {
-    return (
-        <>
-            <HeaderWrapper>
-                <Box>
-                    <Typography noWrap variant="h5">
-                        ‖ Parallel
-                    </Typography>
-                </Box>
-                <Stack direction="row" columnGap={10}>
-                    {routes.map((route) => (
-                        <Button
-                            key={route}
-                            // sx={{ my: 2, color: "white", display: "block" }}
-                        >
-                            <Typography
-                                variant="h5"
-                                fontWeight={400}
-                                color="contrast"
-                            >
-                                {route}
-                            </Typography>
-                        </Button>
-                    ))}
-                </Stack>
-            </HeaderWrapper>
-            <HeaderWrapper sxToolbar={{ justifyContent: "center" }}>
-                <Tabs variant="scrollable" scrollButtons>
-                    <Tab label="Instructions" />
-                    <Tab label="Sign Up" />
-                    <Tab label="Dashboard" />
-                    <Tab label="Blog" />
-                    <Tab label="Pricing" />
-                    <Tab label="Checkout" />
-                </Tabs>
-            </HeaderWrapper>
-        </>
-    );
-}
+    const routes = defaultRoutes;
 
-function HeaderWrapper({
-    children,
-    sxToolbar,
-}: {
-    children: ReactNode;
-    sxToolbar?: SystemStyleObject<Theme>;
-}) {
     return (
         <AppBar
             enableColorOnDark
@@ -72,13 +17,22 @@ function HeaderWrapper({
             position="sticky"
         >
             <Container maxWidth="xl">
-                <Toolbar
-                    sx={[
-                        { justifyContent: "space-between" },
-                        sxToolbar ?? null,
-                    ]}
-                >
-                    {children}
+                <Toolbar sx={{ justifyContent: "space-between" }}>
+                    <Typography noWrap variant="h5">
+                        ‖ Parallel
+                    </Typography>
+                    <Stack direction="row" columnGap={10}>
+                        {routes.map((route) => (
+                            <Button key={route}>
+                                <Typography
+                                    variant="h5"
+                                    color={theme.palette.common.black}
+                                >
+                                    {route}
+                                </Typography>
+                            </Button>
+                        ))}
+                    </Stack>
                 </Toolbar>
             </Container>
         </AppBar>

src/components/PageWrapper.tsx

@@ -27,7 +27,7 @@ export default function PageWrapper({ children }: { children: ReactNode }) {
                 minHeight: "100vh",
             }}
         >
-            {/* <Header /> */}
+            <Header />
             <Box
                 sx={{
                     flexGrow: 1,
@@ -44,7 +44,7 @@ export default function PageWrapper({ children }: { children: ReactNode }) {
                     }}
                 >
                     {children}
-                    {/* <Footer /> */}
+                    <Footer />
                 </Box>
             </Box>
         </Box>

src/constants/routes.ts

@@ -0,0 +1,8 @@
+export const defaultRoutes: string[] = ["Go Premium"];
+
+export const authedRoutes: string[] = [
+    "Projects",
+    "Explore",
+    "Go Premium",
+    "Profile",
+];