Refactor contact nav link

celinalou92 · Jul 12, 2024 · 00f08aa · 00f08aa
1 parent bafdd30
commit 00f08aa
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/app/components/Nav/Nav.tsx b/app/components/Nav/Nav.tsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography, useMediaQuery } from "@mui/material";
 import Link from "next/link";
 import { Contact } from "../Contact/Contact";
 
@@ -7,6 +7,7 @@ export const NavBar = () => {
     { name: "About", link: "/#about" },
     { name: "Skills", link: "/#skills" },
     { name: "Portfolio", link: "/#projects" },
+    { name: "Contact", link: "/#home" },
   ];
   return (
     <Stack
@@ -23,7 +24,8 @@ export const NavBar = () => {
     >
       {navItems.map((navItem) => (
         <Link
-          className="hover mobileNavItem"
+          id={`${navItem.name}-link`}
+          className="hover mobileNavItem navContact"
           key={navItem.name}
           href={navItem.link}
         >

diff --git a/app/globals.css b/app/globals.css
@@ -131,6 +131,10 @@ a:hover {
   justify-content:  center;
 }
 
+#Contact-link {
+  display: none;
+}
+
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;
@@ -164,6 +168,10 @@ a:hover {
     background-color: #1C1C1D;
   }
 
+  #Contact-link {
+    display: block;
+  }
+
   .mobileNavItem {
     padding-right: 1rem;
   }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout(props: { children: any }) {
     <html lang="en">
       <ThemeRegistry options={{ key: "mui" }}>
         <body className="outer">
-          <Stack className="asideContainer">
+          <Stack id="home" className="asideContainer">
             <Hero />
           </Stack>
           <Stack>{children}</Stack>