Extract out desktop nav menu.

components/common/Navbar/DesktopNavMenu.module.css

@@ -0,0 +1,11 @@
+.navMenu {
+  @apply hidden ml-6 space-x-4 lg:block;
+}
+
+.link {
+  @apply items-center transition ease-in-out duration-75 cursor-pointer text-accent-0 border-b-2 border-opacity-0;
+}
+
+.link:hover {
+  @apply border-b-2 border-opacity-40;
+}

components/common/Navbar/DesktopNavMenu.tsx

@@ -0,0 +1,28 @@
+import { FC,  } from 'react'
+import s from './DesktopNavMenu.module.css'
+import Link from 'next/link'
+
+interface Link {
+  href: string
+  label: string
+}
+interface DesktopNavMenuProps {
+  links?: Link[]
+}
+
+const DesktopNavMenu: FC<DesktopNavMenuProps> = ({ links }) => {
+  return (
+    <nav className={s.navMenu}>
+      <Link href="/search">
+        <a className={s.link}>All</a>
+      </Link>
+      {links?.map((l) => (
+        <Link href={l.href} key={l.href}>
+          <a className={s.link}>{l.label}</a>
+        </Link>
+      ))}
+    </nav>
+  )
+}
+
+export default DesktopNavMenu

components/common/Navbar/MenuButton.module.css

@@ -3,6 +3,7 @@
   height: 30px;
   margin: 0 auto;
   width: 30px;
+  @apply lg:hidden;
 }
 
 .menuButton::after,

components/common/Navbar/MenuButton.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import PropTypes from 'prop-types'
 import s from './MenuButton.module.css'
 import cn from 'classnames'
 
@@ -17,9 +16,4 @@ const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
   )
 }
 
-MenuButton.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-}
-
 export default MenuButton

components/common/Navbar/Navbar.module.css

@@ -15,18 +15,6 @@
   padding: 10px 0;
 }
 
-.navMenu {
-  @apply hidden ml-6 space-x-4 lg:block;
-}
-
-.link {
-  @apply items-center transition ease-in-out duration-75 cursor-pointer text-accent-0 border-b-2 border-opacity-0;
-}
-
-.link:hover {
-  @apply border-b-2 border-opacity-40;
-}
-
 .logo {
   @apply cursor-pointer;
 }

components/common/Navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import MenuButton from './MenuButton'
+import DesktopNavMenu from './DesktopNavMenu'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 
@@ -27,16 +28,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                   <Logo />
                 </a>
               </Link>
-              <nav className={s.navMenu}>
+              <DesktopNavMenu links={links} />
-                <Link href="/search">
-                  <a className={s.link}>All</a>
-                </Link>
-                {links?.map((l) => (
-                  <Link href={l.href} key={l.href}>
-                    <a className={s.link}>{l.label}</a>
-                  </Link>
-                ))}
-              </nav>
             </div>
             <MenuButton
               isOpen={isMenuOpen}