[Giving day] fixed navbar selected item underline bug (#868)

i notice the navbar didn't show an underline under the currently selected page. this is probably a regression from [my PR here](#853) - added underline back when the item is selected (only on links, not on the Apply/Sponsor buttons) |X|Before|After| |-|-|-| |Desktop|<img width="1341" alt="Screenshot 2025-02-28 at 10 01 30 PM" src="https://github.com/user-attachments/assets/72f289b9-dffc-4e0f-83c2-3a938b0d4f53" />|<img width="1341" alt="Screenshot 2025-02-28 at 10 00 50 PM" src="https://github.com/user-attachments/assets/b22c0c29-8e80-466a-9be1-db9b08c647fd" />| |Mobile|<img width="394" alt="Screenshot 2025-02-28 at 10 02 09 PM" src="https://github.com/user-attachments/assets/f7f9879b-6759-4cd6-affc-197faa0f8336" />|<img width="394" alt="Screenshot 2025-02-28 at 10 02 00 PM" src="https://github.com/user-attachments/assets/0bd852a6-d613-4ad2-85ee-4eed341e8bf8" />|
cornell-dti · Mar 1, 2025 · 5c142fa · 5c142fa
1 parent f5a4a23
commit 5c142fa
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/new-dti-website/components/navbar.tsx b/new-dti-website/components/navbar.tsx
@@ -62,8 +62,6 @@ const Navbar: React.FC = () => {
                 key={item.name}
                 href={item.url}
                 className={`group cursor-pointer p-4 underline-offset-8 decoration-2 h-[40px] flex items-center ${
-                  pathname === item.url ? 'underline' : ''
-                } ${
                   item.name === 'Sponsor'
                     ? 'mr-2 rounded-[128px] [transition:50ms_ease-out] border border-[rgba(227,73,73,0.60)] px-4 py-2 hover:bg-[rgba(229,74,74,0.20)]'
                     : ''
@@ -78,7 +76,8 @@ const Navbar: React.FC = () => {
                         ? 'bg-gradient-to-r from-[#F25454] to-[#D63D3D] bg-clip-text text-transparent'
                         : 'text-white'
                     }
-                    ${item.name === 'Apply' ? '!text-[#000000]' : ''}
+                    ${pathname === item.url ? 'underline' : ''} 
+                    ${item.name === 'Apply' ? '!text-[#000000] no-underline' : ''}
                     ${item.name !== 'Apply' ? 'group-hover:underline' : ''}
                   `}
                 >
@@ -123,8 +122,6 @@ const Navbar: React.FC = () => {
                     key={item.name}
                     href={item.url}
                     className={`group cursor-pointer p-4 underline-offset-8 decoration-2 h-[40px] flex items-center ${
-                      pathname === item.url ? 'underline' : ''
-                    } ${
                       item.name === 'Sponsor'
                         ? 'mr-2 rounded-[128px] [transition:50ms_ease-out] border border-[rgba(227,73,73,0.60)] px-4 py-2 hover:bg-[rgba(229,74,74,0.20)] justify-center h-[52px]'
                         : ''
@@ -141,7 +138,8 @@ const Navbar: React.FC = () => {
                         ? 'bg-gradient-to-r from-[#F25454] to-[#D63D3D] bg-clip-text text-transparent'
                         : 'text-white'
                     }
-                    ${item.name === 'Apply' ? '!text-[#000000]' : ''}
+                    ${pathname === item.url ? 'underline' : ''} 
+                    ${item.name === 'Apply' ? '!text-[#000000] no-underline' : ''}
                     ${item.name !== 'Apply' ? 'group-hover:underline' : ''}
                   `}
                     >