work base

app/(auth)/login/page.tsx

+export default function Login() {
+    return (
+        <div>
+            <h1>Login WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(auth)/signup/page.tsx

+export default function Signup() {
+    return (
+        <div>
+            <h1>Signup WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(blog)/blogs/page.tsx

+export default function BlogsPage() {
+    return (
+        <div>
+            <h1>Blog WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(community)/communities/page.tsx

+export default function CommunitiesPage() {
+    return (
+        <div>
+            <h1>Community WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(gaming)/games/layout.tsx

+"use client"
+
+import Dashboard from "@/components/Dashboard";
+import Sort from "@/components/Sort";
+import { Grid, Hidden } from "@mui/material";
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <section>
+            <Grid container spacing={2}>
+                <Grid item xs={2}>
+                    <Dashboard />
+                </Grid>
+
+                <Grid item xs={10} md={8}>
+                    {children}
+                </Grid>
+
+                <Hidden mdDown>
+                    <Grid item xs={2}>
+                        <Sort />
+                    </Grid>
+                </Hidden>
+            </Grid>
+        </section>
+    );
+}
\ No newline at end of file

app/games/page.tsx → app/(content)/(gaming)/games/page.tsx

 "use client"
 
+import Game from "@/components/Game";
+import Search from "@/components/Search";
 import { getBaseURL } from "@/lib/utils";
 import { IGame } from "@/types/types";
-import { Grid } from "@mui/material";
+import { Card, CardContent, Grid, Stack } from "@mui/material";
 import { Fragment } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useInfiniteQuery } from "react-query";
-import Game from "./Game";
 
 // renders a list of games infinitely (presumably)
-export default function GamesList() {
+export default function GamesPage() {
     const {
         data,
         error,
@@ -33,33 +34,37 @@ export default function GamesList() {
     );
 
     return (
-        <>
-            <h1>Games List Page</h1>
-            {status === 'success' && (
-                <InfiniteScroll
-                    dataLength={data?.pages.length * 20}
-                    next={fetchNextPage}
-                    hasMore={hasNextPage ? true : false}
-                    loader={<h4>Loading...</h4>}
-                    endMessage={
-                        <p style={{ textAlign: 'center' }}>
-                            <b>Yay! You have seen it all</b>
-                        </p>
-                    }
-                >
-                    <Grid container spacing={2} justifyContent="center">
-                        {data?.pages.map((page, i) => (
-                            <Fragment key={i}>
-                                {page.map((game: IGame) => (
-                                    <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
-                                        <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
-                                    </Grid>
+        <Stack spacing={2}>
+            <Search />
+            <Card>
+                <CardContent>
+                    {status === 'success' && (
+                        <InfiniteScroll
+                            dataLength={data?.pages.length * 20}
+                            next={fetchNextPage}
+                            hasMore={hasNextPage ? true : false}
+                            loader={<h4>Loading...</h4>}
+                            endMessage={
+                                <p style={{ textAlign: 'center' }}>
+                                    <b>Yay! You have seen it all</b>
+                                </p>
+                            }
+                        >
+                            <Grid container spacing={2} justifyContent="center">
+                                {data?.pages.map((page, i) => (
+                                    <Fragment key={i}>
+                                        {page.map((game: IGame) => (
+                                            <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
+                                                <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
+                                            </Grid>
+                                        ))}
+                                    </Fragment>
                                 ))}
-                            </Fragment>
-                        ))}
-                    </Grid>
-                </InfiniteScroll>
-            )}
-        </>
+                            </Grid>
+                        </InfiniteScroll>
+                    )}
+                </CardContent>
+            </Card>
+        </Stack>
     )
 }
\ No newline at end of file

app/(content)/(thread)/threads/page.tsx

+export default function ThreadsPage() {
+    return (
+        <div>
+            <h1>Threads WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/[userid]/page.tsx

+export default function User({ params }: { params: { userid: string } }) {
+    return (
+        <div>
+            <h1>User Profile Page WIP</h1>
+            <p>Unique UserName: {params.userid}</p>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/friends/page.tsx

+export default function Friends() {
+    return (
+        <div>
+            <h1>Friends Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/notifications/page.tsx

+export default function Notifications() {
+    return (
+        <div>
+            <h1>Notifications Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/(content)/(user)/settings/page.tsx

+export default function Settings() {
+    return (
+        <div>
+            <h1>Settings Page WIP</h1>
+        </div>
+    )
+}
\ No newline at end of file

app/layout.tsx

 "use client"
 
-import { Container, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material"
-import { useMemo, useState } from "react"
+import { Container, CssBaseline, ThemeProvider } from "@mui/material"
+import { createContext, useState } from "react"
 import { QueryClient, QueryClientProvider } from "react-query"
+import Header from "../components/Header"
+import { Theme } from "./theme"
 
+// metadata for the website
 export const metadata = {
   title: 'GameUnity',
   description: 'Soon',
 }
 
+// for dark mode global context
+export const ColorModeContext = createContext({ toggleColorMode: () => { } });
+
 // this is the root layout for all pages ({children})
 export default function RootLayout({
   children,
@@ -17,38 +23,22 @@ export default function RootLayout({
 }) {
   const [queryClient] = useState(() => new QueryClient());
 
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: prefersDarkMode ? 'dark' : 'light',
-        },
-        breakpoints: {
-          values: {
-            xs: 0,
-            ss: 300,
-            sm: 600,
-            md: 900,
-            lg: 1200,
-            xl: 1536,
-          },
-        },
-      }),
-    [prefersDarkMode],
-  );
+  const [theme, colorMode] = Theme();
 
   return (
     <html lang="en">
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <body>
-            <Container>
-              {children}
-            </Container>
-          </body>
-        </ThemeProvider>
+        <ColorModeContext.Provider value={colorMode}>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <body>
+              <Container maxWidth={false}>
+                <Header />
+                {children}
+              </Container>
+            </body>
+          </ThemeProvider>
+        </ColorModeContext.Provider>
       </QueryClientProvider>
     </html>
   )

app/theme.tsx

+import { Theme, createTheme } from "@mui/material";
+import { useMemo, useState } from "react";
+
+// this is the main theme for the website
+export function Theme(): [Theme, { toggleColorMode: () => void }] {
+    const [mode, setMode] = useState<'light' | 'dark'>('dark');
+
+    const colorMode = useMemo(
+        () => ({
+            toggleColorMode: () => {
+                setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'));
+            },
+        }),
+        [],
+    );
+
+    return [useMemo(() =>
+        createTheme({
+            palette: {
+                mode: mode,
+            },
+            breakpoints: {
+                values: {
+                    xs: 0,
+                    ss: 300,
+                    sm: 600,
+                    md: 900,
+                    lg: 1200,
+                    xl: 1536,
+                },
+            },
+        }),
+        [mode],
+    ),
+        colorMode];
+}
\ No newline at end of file

components/Dashboard.tsx

+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import ExploreIcon from '@mui/icons-material/Explore';
+import GroupIcon from '@mui/icons-material/Group';
+import HelpIcon from '@mui/icons-material/Help';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import PeopleIcon from '@mui/icons-material/People';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
+import { Box, Button, Hidden, Stack, Typography } from "@mui/material";
+import Link from "next/link";
+
+export default function Dashboard() {
+    const loggedIn = false;
+    const username = "coolguy123";
+
+    return (
+        <Box sx={{ position: 'sticky', top: 0 }}>
+            {loggedIn ?
+                <Stack spacing={2}>
+                    <Link href={`/${username}`}>
+                        <Button variant="text" size="large" startIcon={<AccountCircleIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                My Profile
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/notifications">
+                        <Button variant="text" size="large" startIcon={<NotificationsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Notifications
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/friends">
+                        <Button variant="text" size="large" startIcon={<PeopleIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Friends
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/games">
+                        <Button variant="text" size="large" startIcon={<SportsEsportsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Games
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/communities">
+                        <Button variant="text" size="large" startIcon={<GroupIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Communities
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" startIcon={<ExploreIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Explore
+                            </Hidden>
+                        </Button>
+                    </Link>
+
+                    <Box height={30} />
+
+                    <Link href="/settings">
+                        <Button variant="text" size="large" startIcon={<SettingsIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Settings
+                            </Hidden>
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" startIcon={<HelpIcon />} sx={{ borderRadius: "999px" }}>
+                            <Hidden lgDown>
+                                Help
+                            </Hidden>
+                        </Button>
+                    </Link>
+                </Stack>
+                :
+                <Stack spacing={2} sx={{ justifyContent: "center", textAlign: "center" }}>
+                    <Link href="/login">
+                        <Button variant="contained" size="large" sx={{ borderRadius: "999px" }}>
+                            Log In
+                        </Button>
+                    </Link>
+                    <Link href="/signup">
+                        <Button variant="outlined" size="large" sx={{ borderRadius: "999px" }}>
+                            Sign Up
+                        </Button>
+                    </Link>
+                    <Typography variant="subtitle1">
+                        Unlock endless possibilities - register or log in to unleash the full potential of our website.
+                    </Typography>
+                </Stack>
+            }
+        </Box>
+    )
+}
\ No newline at end of file

components/Header.tsx

+import { ColorModeContext } from "@/app/layout";
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import { Button, Container, Grid, IconButton, useTheme } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import { useContext } from "react";
+import logoSvg from "../public/logo.svg";
+
+export default function Header() {
+    const theme = useTheme();
+    const colorMode = useContext(ColorModeContext);
+
+    return (
+        <Container>
+            <Grid container spacing={2} height={100} sx={{ alignItems: "center" }}>
+                <Grid item xs={2}>
+                    <Link href="/">
+                        <Image src={logoSvg} alt="GameUnity" width={50} height={50} priority />
+                    </Link>
+                </Grid>
+
+                <Grid item xs={8} sx={{ justifyContent: "center", textAlign: "center" }}>
+                    <Link href="/games">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Games
+                        </Button>
+                    </Link>
+                    <Link href="/threads">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Threads
+                        </Button>
+                    </Link>
+                    <Link href="/communities">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Communities
+                        </Button>
+                    </Link>
+                    <Link href="/blogs">
+                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
+                            Blog
+                        </Button>
+                    </Link>
+                </Grid>
+
+                <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
+                        {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+                    </IconButton>
+                </Grid>
+            </Grid>
+        </Container>
+    )
+}
\ No newline at end of file

components/Search.tsx

+import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
+import SearchIcon from '@mui/icons-material/Search';
+import { Container, IconButton, InputAdornment, TextField } from '@mui/material';
+
+export default function SearchInput() {
+    const handleSearch = (event: { target: { value: any; }; }) => {
+        const searchText = event.target.value;
+        console.log('Search:', searchText);
+    };
+
+    return (
+        <Container maxWidth="sm" sx={{ justifyContent: "center", textAlign: "center" }}>
+            <TextField
+                placeholder="Search"
+                variant="outlined"
+                size="small"
+                onChange={handleSearch}
+                InputProps={{
+                    startAdornment: (
+                        <InputAdornment position="start">
+                            <SearchIcon />
+                        </InputAdornment>
+                    ),
+                    endAdornment: (
+                        <InputAdornment position="end">
+                            <IconButton edge="end" aria-label="start search">
+                                <ArrowCircleRightRoundedIcon />
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                    style: {
+                        borderRadius: '999px',
+                    },
+                }}
+            />
+        </Container>
+    );
+};
\ No newline at end of file