feat: styled desktop navbar and changed mobile breakpoint to tablet

ucsddesignco · Apr 5, 2024 · d839b7e · d839b7e
1 parent 4cf7512
commit d839b7e
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 18 deletions.
diff --git a/src/components/Hamburger/Hamburger.scss b/src/components/Hamburger/Hamburger.scss
@@ -1,7 +1,7 @@
 .hamburger {
   display: none;
 
-  @media screen and (max-width: $mobile-breakpoint) {
+  @media screen and (max-width: $tablet-breakpoint) {
     display: block;
     padding: 0;
     z-index: 99;

diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -1,4 +1,5 @@
 nav {
+  border: 1px solid red;
   position: fixed;
   display: grid;
   place-items: center;
@@ -15,8 +16,31 @@ nav {
     position: absolute;
     right: 0;
     pointer-events: auto;
-    li button {
-      font-size: 20px;
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    li div {
+      height: 44px;
+      width: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        transition: all 0.3s ease;
+      }
+      .active {
+        transform: scale(1.2);
+      }
+    }
+
+    li {
+      .divider {
+        padding: 4px 0 4px 0;
+      }
     }
   }
 
@@ -34,21 +58,12 @@ nav {
     display: none;
     pointer-events: auto;
   }
+}
 
-  @media (max-width: $tablet-breakpoint) {
-    left: 0;
+@media (max-width: $tablet-breakpoint) {
+  nav {
     right: 0;
 
-    .desktop-nav {
-      right: auto;
-      transform-origin: center bottom;
-      transform: rotate(-90deg) translateY(50%);
-      position: absolute;
-      bottom: 3rem;
-    }
-  }
-
-  @media (max-width: $mobile-breakpoint) {
     position: absolute;
     display: flex;
     align-items: start;

diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -17,6 +17,7 @@ export default function Navbar({
   const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
   const pagesList = ['Home', 'FAQ', 'Timeline', 'Judges'];
   const isDesktop = useIsDesktop();
+  const [pageSelected, setPageSelected] = useState('Home');
 
   function scrollToSection(scrollOffset: number) {
     if (isDesktop) {
@@ -35,6 +36,7 @@ export default function Navbar({
     return {
       onClick: () => {
         scrollToSection(scrollRefList[index].current?.offsetTop || 0);
+        setPageSelected(pageName);
       },
       name: pageName
     };
@@ -65,11 +67,42 @@ export default function Navbar({
     <nav role='navigation'>
       {/* Desktop Nav */}
       <ul className='desktop-nav'>
-        {links.map(link => (
-          <li key={link.name}>
-            <button onClick={link.onClick}>{link.name}</button>
+        {links.slice(0, -1).map(link => (
+          <li key={link.name} className={link.name === pageSelected ? 'active' : ''}>
+             <div className='outerCont' onClick={link.onClick}>
+             {link.name === pageSelected ? (
+              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" className={link.name === pageSelected ? 'active' : ''}>
+                <rect x="30" width="30" height="30" rx="15" transform="rotate(90 30 0)" fill="#F1F1F1"/>
+                <rect x="26.7271" y="3.27295" width="23.4545" height="23.4545" rx="11.7273" transform="rotate(90 26.7271 3.27295)" fill="#F1F1F1" stroke="#090921" strokeWidth="3"/>
+              </svg>
+             ) : (
+              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="28.5" y="1.5" width="27" height="27" rx="13.5" transform="rotate(90 28.5 1.5)" stroke="#F1F1F1" strokeWidth="3"/>
+              </svg>
+            )}
+            </div>
+            <svg width="4" height="30" viewBox="0 0 4 30" fill="none" xmlns="http://www.w3.org/2000/svg" className='divider'>
+              <path d="M2 0L2 30" stroke="#F1F1F1" strokeWidth="3" strokeDasharray="10 10"/>
+            </svg>
           </li>
         ))}
+        {links.slice(-1).map(link => (
+          <li key={link.name} className={link.name === pageSelected ? 'active' : ''}>
+            <div className='outerCont' onClick={link.onClick}>
+             {link.name === pageSelected ? (
+              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" className={link.name === pageSelected ? 'active' : ''}>
+                <rect x="30" width="30" height="30" rx="15" transform="rotate(90 30 0)" fill="#F1F1F1"/>
+                <rect x="26.7271" y="3.27295" width="23.4545" height="23.4545" rx="11.7273" transform="rotate(90 26.7271 3.27295)" fill="#F1F1F1" stroke="#090921" strokeWidth="3"/>
+              </svg>
+             ) : (
+              <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" >
+                <rect x="28.5" y="1.5" width="27" height="27" rx="13.5" transform="rotate(90 28.5 1.5)" stroke="#F1F1F1" strokeWidth="3"/>
+              </svg>
+            )}
+            </div>
+          </li>
+        ))}
+
       </ul>
 
 

diff --git a/src/styles/App.scss b/src/styles/App.scss
@@ -2,6 +2,7 @@
 .scroll-cont {
   height: 100vh;
   position: relative;
+  overflow-x: hidden;
   &:before,
   &:after {
     content: '';