fix navbar disappeared team button

Author: Yushan Li

components/Navbar.tsx

@@ -56,12 +56,11 @@ const Navbar = () => {
           </div>
           <div>
             <ul
-              className={styles['nav-item-list']}
-              id={clicked ? styles.active : ''}
+              className={`${styles['nav-item-list']} ${clicked ? styles.active : ''}`}
             >
               <li>
                 <Link href="/teamPage">
-                  <a className={styles['nav-item-list']}>Team</a>
+                  <a>Team</a>
                 </Link>
               </li>
               <li>
@@ -76,7 +75,7 @@ const Navbar = () => {
               </li>
             </ul>
           </div>
-          <div id={styles['small-screen']}>
+          <div className={styles['small-screen']}>
             <i onClick={() => setClicked(!clicked)}>
               {clicked ? <FaTimes /> : <FaBars />}
             </i>

styles/Navbar.module.scss

@@ -19,7 +19,7 @@
   justify-content: center;
 }
 
-.nav-item-list#active {
+.nav-item-list.active {
   right: 0;
 }
 
@@ -56,10 +56,15 @@
 }
 
 #small-screen {
+  /* keep an ID fallback for global usage if needed, but expose a class for CSS Modules */
   display: none;
 }
 
-#small-screen i:hover {
+.small-screen {
+  display: none;
+}
+
+.small-screen i:hover {
   color: vars.$committee-color;
 }
 
@@ -88,6 +93,12 @@
     display: block;
   }
 
+  /* also expose the class-based selector for CSS Modules */
+  .small-screen {
+    display: block;
+  }
+
+  .small-screen i,
   #small-screen i {
     font-size: 24px;
     cursor: pointer;