feat: add header.

Author: missionmike

src/components/Layout/Footer.tsx

@@ -1,16 +1,12 @@
 "use client";
 
-import React, { useContext } from "react";
+import React from "react";
 
 import { BottomNavigation, Box, Typography } from "@mui/material";
-import { Icon } from "@iconify/react";
 import Link from "next/link";
-import { ThemeAppearanceContext } from "@/context/ThemeContext";
 import { ThemeAppearanceToggle } from "./ThemeAppearanceToggle";
 
 export const Footer = () => {
-  const { themeAppearance } = useContext(ThemeAppearanceContext);
-
   return (
     <BottomNavigation
       component="footer"
@@ -38,7 +34,7 @@ export const Footer = () => {
             gap: "0.35em",
           }}
         >
-          Create your free resume at{" "}
+          Create your free interactive resume at{" "}
           <Typography component={Link} href="https://openresume.org">
             openresume.org
           </Typography>

src/components/Layout/Header.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import React from "react";
+
+import { Box, Typography } from "@mui/material";
+import Link from "next/link";
+import { ThemeAppearanceToggle } from "./ThemeAppearanceToggle";
+
+export const Header = () => {
+  return (
+    <Box
+      component="header"
+      sx={(theme) => ({
+        backgroundColor: theme.palette.background.paper,
+        position: "sticky",
+        top: 0,
+        left: 0,
+        width: "100vw",
+        boxShadow: "0 0 35px rgba(0, 0, 0, 0.1)",
+        mb: "2em",
+      })}
+    >
+      <Box
+        sx={{
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-around",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.35em",
+          }}
+        >
+          <Typography component={Link} href="https://openresume.org">
+            OpenResume
+          </Typography>
+        </Box>
+        <Box component="nav">
+          <Box
+            sx={{
+              display: "flex",
+              gap: "1em",
+            }}
+          >
+            <Typography component={Link} href="/account">
+              Account
+            </Typography>
+          </Box>
+        </Box>
+        <ThemeAppearanceToggle />
+      </Box>
+    </Box>
+  );
+};

src/components/Layout/Layout.tsx

@@ -9,6 +9,7 @@ import { ThemeAppearanceContext } from "@/context/ThemeContext";
 import { Container, ThemeProvider } from "@mui/material";
 import { createTheme } from "@mui/material";
 import { usePathname } from "next/navigation";
+import { Header } from "./Header";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { themeAppearance } = useContext(ThemeAppearanceContext);
@@ -34,13 +35,12 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <AppRouterCacheProvider>
       <ThemeProvider theme={theme}>
+        <Header />
         <Container
-          sx={(theme) => {
-            return {
-              backgroundColor: theme.palette.background.default,
-              paddingBottom: "100px",
-            };
-          }}
+          sx={(theme) => ({
+            backgroundColor: theme.palette.background.default,
+            paddingBottom: "100px",
+          })}
         >
           <CssBaseline />
           {children}