Chore/nav tw (#1912)

* replace Nav css modules to tw

* replace NavMobile css modules to tw

* add NavLink type

* less types

---------

Co-authored-by: Kyle Holmberg <kylemh.email@gmail.com>

Author: billy-le

common/constants/navigation.js common/constants/navigation.tscommon/constants/navigation.js renamed to common/constants/navigation.ts

@@ -1,5 +1,3 @@
-import flattenDepth from 'lodash/flattenDepth';
-
 const donate = {
   href: '/donate',
   name: 'Donate',
@@ -110,12 +108,12 @@ const getInvolvedGroup = {
 export const desktopNavItems = [aboutUsGroup, servicesGroup, getInvolvedGroup];
 
 // Extracts sublinks to list everything as a single, top-level list
-export const mobileNavItems = flattenDepth(
-  [about, getInvolved, ...servicesGroup.sublinks, ...getInvolvedGroup.sublinks].map(
-    ({ sublinks = [], ...item }) => [item, sublinks],
-  ),
-  2,
-);
+export const mobileNavItems = [
+  about,
+  getInvolved,
+  servicesGroup.sublinks,
+  getInvolvedGroup.sublinks,
+].flat();
 
 export const footerItems = {
   items: [

components/Nav/Nav.module.css

@@ -7,8 +7,6 @@ import { desktopNavItems, mobileNavItems } from 'common/constants/navigation';
 import NavMobile from 'components/Nav/NavMobile/NavMobile';
 import dynamic from 'next/dynamic';
 import { cx } from 'common/utils/cva';
-import UserLogo from '../../public/static/images/icons/FontAwesome/user.svg';
-import styles from './Nav.module.css';
 
 const NavListItem = dynamic(() => import('components/Nav/NavListItem/NavListItem'), { ssr: false });
 
@@ -43,42 +41,38 @@ export const Nav = () => {
         navItems={mobileNavItems}
       />
 
-      <header className={styles.NavDesktop}>
-        <div className={styles.desktopNavContainer} data-testid="Desktop Nav Container">
-          <nav data-testid="Desktop Nav">
+      <header className="hidden absolute top-4 w-full z-10 sm:block">
+        <div className="mx-auto max-w-[1400px]" data-testid="Desktop Nav Container">
+          <nav
+            className="font-bold h-16 bg-white rounded-sm flex justify-between"
+            data-testid="Desktop Nav"
+          >
             <Link href="/" key="Home">
               <a
-                className={cx(styles.logoLink, styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}
+                className="mx-4 flex items-center"
                 onContextMenu={event => {
                   event.preventDefault();
                   Router.push('/branding');
                 }}
               >
-                <Logo className={styles.logo} style={{ width: 224, height: 42 }} fill="#f7f7f7" />
+                <Logo className="w-56 fill-white" />
               </a>
             </Link>
 
-            <ul className={cx(styles.link, '[&>svg]:-bottom-2 [&>svg]:right-3')}>
+            <ul className="flex">
               {desktopNavItems.map(navItem => (
-                <NavListItem
-                  key={navItem.name}
-                  {...navItem}
-                  icon={
-                    'icon' in navItem && navItem.icon === 'UserLogo' ? (
-                      <UserLogo className={styles.navIcon} />
-                    ) : null
-                  }
-                />
+                <NavListItem key={navItem.name} {...navItem} />
               ))}
 
               {/* stylistic one-off */}
               <li key="Donate">
                 <Link href="/donate">
                   <a
                     className={cx(
-                      styles.link,
-                      '[&>svg]:-bottom-2 [&>svg]:right-3',
-                      styles.donateLink,
+                      'pt-1 px-8 font-bold bg-primary text-secondary no-underline',
+                      'flex items-center justify-center h-full',
+                      'transition-colors duration-200 ease-linear',
+                      'rounded-r-sm cursor-pointer hover:text-white focus-visible:text-white',
                     )}
                   >
                     Donate