refactor(components): rewrite NavList component

* extract NavItem from NavList
* remove `kind` and `listClassName` props (since the consumer has
control over NavList, NavItem and NavLink components these props are
obsolete)

4 files changed, 48 insertions, 32 deletions

diff --git a/src/components/organisms/layout/site-footer.module.scss b/src/components/organisms/layout/site-footer.module.scss
index a8bcd61..a502763 100644
--- a/src/components/organisms/layout/site-footer.module.scss
+++ b/src/components/organisms/layout/site-footer.module.scss
@@ -19,9 +19,6 @@
 }
 
 .nav {
-  display: flex;
-  flex-flow: row wrap;
-
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
       &::before {
diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index 0866924..b4930d6 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -5,10 +5,17 @@ import {
   BackToTop,
   type BackToTopProps,
   NavList,
-  type NavItem,
+  NavItem,
+  NavLink,
 } from '../../molecules';
 import styles from './site-footer.module.scss';
 
+export type FooterLinks = {
+  id: string;
+  href: string;
+  label: string;
+};
+
 export type SiteFooterProps = {
   /**
    * Set additional classnames to the back to top button.
@@ -25,7 +32,7 @@ export type SiteFooterProps = {
   /**
    * The footer nav items.
    */
-  navItems?: NavItem[];
+  navItems?: FooterLinks[];
   /**
    * An element id (without hashtag) used as anchor for back to top button.
    */
@@ -67,13 +74,13 @@ export const SiteFooter: FC<SiteFooterProps> = ({
         owner={copyright.owner}
       />
       {navItems ? (
-        <NavList
-          aria-label={ariaLabel}
-          className={styles.nav}
-          items={navItems}
-          // eslint-disable-next-line react/jsx-no-literals -- Kind allowed
-          kind="footer"
-        />
+        <NavList aria-label={ariaLabel} className={styles.nav} isInline>
+          {navItems.map(({ id, ...link }) => (
+            <NavItem key={id}>
+              <NavLink {...link} />
+            </NavItem>
+          ))}
+        </NavList>
       ) : null}
       <BackToTop
         anchor={backToTopAnchor}
diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
index 1b6b110..bedf38e 100644
--- a/src/components/organisms/toolbar/main-nav.module.scss
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -43,16 +43,6 @@
     }
   }
 
-  .modal__list {
-    display: flex;
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm", "md") {
-        flex-flow: column;
-      }
-    }
-  }
-
   .checkbox {
     &:checked {
       ~ .label .icon {
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 7f03577..a5a105e 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -1,15 +1,32 @@
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import {
+  forwardRef,
+  type ReactNode,
+  type ForwardRefRenderFunction,
+} from 'react';
 import { useIntl } from 'react-intl';
-import { BooleanField, type BooleanFieldProps, Icon, Label } from '../../atoms';
-import { NavList, type NavListProps, type NavItem } from '../../molecules';
+import {
+  BooleanField,
+  type BooleanFieldProps,
+  Icon,
+  Label,
+  Nav,
+} from '../../atoms';
+import { NavList, NavItem, NavLink } from '../../molecules';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
+export type MainNavItem = {
+  id: string;
+  href: string;
+  label: string;
+  logo?: ReactNode;
+};
+
 export type MainNavProps = {
   /**
    * Set additional classnames to the nav element.
    */
-  className?: NavListProps['className'];
+  className?: string;
   /**
    * The button state.
    */
@@ -17,7 +34,7 @@ export type MainNavProps = {
   /**
    * The main nav items.
    */
-  items: NavItem[];
+  items: MainNavItem[];
   /**
    * A callback function to handle button state.
    */
@@ -59,12 +76,17 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
       >
         <Icon shape="hamburger" />
       </Label>
-      <NavList
+      <Nav
         className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
-        items={items}
-        kind="main"
-        listClassName={mainNavStyles.modal__list}
-      />
+      >
+        <NavList isInline spacing="2xs">
+          {items.map(({ id, ...link }) => (
+            <NavItem key={id}>
+              <NavLink {...link} isStack variant="main" />
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
     </div>
   );
 };