Merge pull request #79 from chingu-voyages/css/header

Update Base, Header and Footer Layout & CSS
chingu-voyages · Dec 9, 2024 · 3f9cba4 · 3f9cba4
2 parents d215b1b + 5003a02
commit 3f9cba4
Show file tree

Hide file tree

Showing 11 changed files with 302 additions and 119 deletions.
diff --git a/client/app/globals.css b/client/app/globals.css
@@ -5,6 +5,14 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --branding: #eab308;
+  --branding-dark: #e89900;
+  --branding-light: #ebc914;
+  --accent: #979797;
+  --light-accent: #818181;
+  --dark-accent: #3c3c3c;
+  --primary: #0841ea;
+  --footer-height: 404px;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -17,5 +25,8 @@
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+}
+
+.branding-gradient {
+  @apply bg-gradient-to-r from-brandingDark to-brandingLight bg-clip-text text-transparent;
 }
diff --git a/client/app/layout.js b/client/app/layout.js
@@ -1,6 +1,6 @@
 import "./globals.css";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
-import { Box, Container } from "@mui/material";
+import { Container, Stack } from "@mui/material";
 import { StyledRoot } from "./StyledRoot";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
@@ -16,16 +16,16 @@ export default function RootLayout({ children }) {
       <body>
         <AppRouterCacheProvider>
           <StyledRoot>
-            <Box className="min-h-[calc(100vh-80px)] flex flex-col">
+            <Stack className="min-h-[calc(100vh-var(--footer-height))]">
               <Header />
               <Container
                 component="main"
-                maxWidth="lg"
-                className="border-x border-gray-200 bg-gray-50 grow py-4"
+                maxWidth="xl"
+                sx={{ paddingY: 2, flexGrow: 1 }}
               >
                 {children}
               </Container>
-            </Box>
+            </Stack>
             <Footer />
           </StyledRoot>
         </AppRouterCacheProvider>

diff --git a/client/app/theme.js b/client/app/theme.js
@@ -1,20 +1,44 @@
 "use client";
-import { Roboto } from "next/font/google";
+import { Montserrat, Roboto, Orbitron } from "next/font/google";
 import { createTheme } from "@mui/material/styles";
 
+const montserrat = Montserrat({
+  weight: ["400", "500", "600"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 const roboto = Roboto({
   weight: ["300", "400", "500", "700"],
   subsets: ["latin"],
   display: "swap",
 });
 
+const orbitron = Orbitron({
+  weight: ["400"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
 const theme = createTheme({
   typography: {
-    fontFamily: roboto.style.fontFamily,
+    fontFamily: montserrat.style.fontFamily,
+    display: {
+      fontFamily: orbitron.style.fontFamily,
+    },
   },
   palette: {
     branding: "#eab308",
   },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 480,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+    },
+  },
 });
 
 export default theme;
diff --git a/client/components/layout/Footer.jsx b/client/components/layout/Footer.jsx
@@ -1,9 +1,27 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/auth";
+import Logo from "./Logo";
+import FooterNav from "./FooterNav";
 
-export default function Footer() {
+export default async function Footer() {
+  const session = await getServerSession(authOptions);
   return (
-    <Box component="footer" className="h-20 border-t border-gray-200 py-2 px-4">
-      <Typography component="p">&copy; 2024, RayVolution</Typography>
+    <Box component="footer" className="bg-lightAccent text-background">
+      <Stack
+        gap={4}
+        sx={{
+          width: 1,
+          maxWidth: "xl",
+          marginX: "auto",
+          paddingY: 4,
+          paddingX: { xs: 2, sm: 4, xl: 2 },
+        }}
+      >
+        <Logo logoSize={{ xs: 20, sm: 24 }} textSize={{ xs: 26, sm: 32 }} />
+        {session && <FooterNav session={session} />}
+        <Typography sx={{ fontSize: 14 }}>&copy; 2024, RayVolution</Typography>
+      </Stack>
     </Box>
   );
 }
diff --git a/client/components/layout/FooterNav.jsx b/client/components/layout/FooterNav.jsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Stack } from "@mui/material";
+import NavLink from "./NavLink";
+import { navLinks } from "./Nav";
+
+export default function FooterNav({ session }) {
+  const protectedRoutes = navLinks.filter((link) =>
+    link.role.includes(session.user.role)
+  );
+  return (
+    <Stack component="ul" sx={{ marginY: 2 }}>
+      {protectedRoutes.map((link) => {
+        return (
+          <NavLink
+            key={link.label}
+            link={link}
+            noscroll
+            liStyle={{ paddingX: 0 }}
+            textStyle={{
+              fontSize: { xs: 20, xl: 22 },
+              fontWeight: 400,
+            }}
+            textColor="text-background"
+          />
+        );
+      })}
+    </Stack>
+  );
+}
diff --git a/client/components/layout/Header.jsx b/client/components/layout/Header.jsx
@@ -1,27 +1,42 @@
-"use client";
-
-import { Box, Stack, Typography } from "@mui/material";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/auth";
+import { Box, Stack } from "@mui/material";
 import Nav from "./Nav";
+import Logo from "./Logo";
 
-export default function Header() {
+export default async function Header() {
+  const session = await getServerSession(authOptions);
   return (
     <Box
       component="header"
-      className="py-2 lg:py-4 px-4 border-b border-gray-200"
+      sx={{
+        paddingY: { xs: 1, md: 1.5 },
+        borderBottom: "1px solid #eee",
+      }}
     >
-      <Stack direction="row" className="justify-between items-center">
-        <Typography variant="h5" component="h1">
-          <Typography
-            variant="h5"
-            component="span"
-            sx={{ color: (theme) => theme.palette.branding }}
-          >
-            Ray
-          </Typography>
-          Volution
-        </Typography>
-        <Nav />
-      </Stack>
+      <Box
+        sx={{
+          width: { xs: 1 },
+          maxWidth: "xl",
+          marginX: "auto",
+          paddingX: { xs: 2, sm: 4, xl: 2 },
+        }}
+      >
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Logo
+            logoSize={{ xs: 20, sm: 24, lg: 32 }}
+            textSize={{ xs: 26, sm: 32, lg: 48 }}
+            iconColor="text-brandingDark"
+            mainColor="branding-gradient"
+            accent="text-accent"
+          />
+          {session && <Nav session={session} />}
+        </Stack>
+      </Box>
     </Box>
   );
 }
diff --git a/client/components/layout/Logo.jsx b/client/components/layout/Logo.jsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { Box, Stack, Typography } from "@mui/material";
+import WbSunnyIcon from "@mui/icons-material/WbSunny";
+
+export default function Logo({
+  logoSize,
+  textSize,
+  iconColor,
+  mainColor,
+  accent,
+}) {
+  return (
+    <Stack direction="row" alignItems="center">
+      <Box>
+        <WbSunnyIcon className={iconColor} sx={{ fontSize: logoSize }} />
+      </Box>
+      <Link href="/" scroll={false}>
+        <Typography
+          variant="display"
+          sx={{ fontSize: textSize }}
+          className={accent}
+        >
+          <span className={mainColor}>Ray</span>
+          Volution
+        </Typography>
+      </Link>
+    </Stack>
+  );
+}
diff --git a/client/components/layout/Nav.jsx b/client/components/layout/Nav.jsx
@@ -1,14 +1,96 @@
 "use client";
 
-import { useMediaQuery } from "@mui/material";
-import { MobileNav, DesktopNav } from "./NavElements";
+import { useState } from "react";
+import { Box, Drawer, IconButton, List, Stack } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseIcon from "@mui/icons-material/Close";
+import NavLink from "./NavLink";
 
-export default function Nav() {
-  const matches = useMediaQuery("(min-width: 768px)");
+export const navLinks = [
+  {
+    label: "Home",
+    href: "/",
+    role: ["user", "admin"],
+    mobile: true,
+  },
+  {
+    label: "Service",
+    href: "/new-appointment",
+    role: ["user", "admin"],
+  },
+  {
+    label: "Appointments",
+    href: "/my-appointments",
+    role: ["user", "admin"],
+  },
+  {
+    label: "Admin",
+    href: "/admin-dashboard",
+    role: ["admin"],
+  },
+  {
+    label: "Sign Out",
+    href: "/api/auth/signout",
+    role: ["user", "admin"],
+  },
+];
 
-  if (!matches) {
-    return <MobileNav />;
-  }
+export default function Nav({ session }) {
+  const [open, setOpen] = useState(false);
 
-  return <DesktopNav />;
+  const protectedRoutes = navLinks.filter((link) =>
+    link.role.includes(session.user.role)
+  );
+
+  return (
+    <>
+      {/* MOBILE NAV */}
+      <Box sx={{ display: { xs: "block", lg: "none" } }}>
+        <IconButton onClick={() => setOpen(true)}>
+          <MenuIcon sx={{ fontSize: 30 }} className="text-darkAccent" />
+        </IconButton>
+        <Drawer
+          open={open}
+          anchor="left"
+          onClose={() => setOpen(false)}
+          sx={{ display: { lg: "none" } }}
+        >
+          <Stack direction="row-reverse" className="m-2">
+            <IconButton onClick={() => setOpen(false)}>
+              <CloseIcon sx={{ fontSize: 36 }} className="text-darkAccent" />
+            </IconButton>
+          </Stack>
+          <Box
+            sx={{
+              width: { xs: 320, sm: 432, md: 690 },
+            }}
+          >
+            <List>
+              {protectedRoutes.map((link, idx) => {
+                return (
+                  <NavLink
+                    key={link.label}
+                    link={link}
+                    setOpen={setOpen}
+                    idx={idx}
+                    textColor="text-darkAccent"
+                  />
+                );
+              })}
+            </List>
+          </Box>
+        </Drawer>
+      </Box>
+      {/* DESKTOP NAV */}
+      <Box sx={{ display: { xs: "none", lg: "block" } }}>
+        <Stack component="ul" direction="row" gap={{ lg: 3, xl: 6 }}>
+          {protectedRoutes
+            .filter((link) => !link.mobile)
+            .map((link) => {
+              return <NavLink key={link.label} link={link} hover />;
+            })}
+        </Stack>
+      </Box>
+    </>
+  );
 }