chore: add a MainNav component

2 files changed, 21 insertions, 9 deletions

diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index c6fbf53..df3b49c 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -9,12 +9,6 @@
     margin-top: var(--spacing-2xs);
   }
 
-  &__item {
-    &:not(:last-child) {
-      margin-bottom: var(--spacing-2xs);
-    }
-  }
-
   &--ordered {
     padding: 0;
     counter-reset: li;
@@ -36,4 +30,10 @@
   &--unordered {
     padding: 0 0 0 var(--spacing-sm);
   }
+
+  &--has-margin &__item {
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-2xs);
+    }
+  }
 }
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 7197c34..74ab8b0 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -29,6 +29,10 @@ export type ListProps = {
    * The list kind (ordered or unordered).
    */
   kind?: 'ordered' | 'unordered';
+  /**
+   * Set margin between list items. Default: true.
+   */
+  withMargin?: boolean;
 };
 
 /**
@@ -36,9 +40,15 @@ export type ListProps = {
  *
  * Render either an ordered or an unordered list.
  */
-const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
+const List: VFC<ListProps> = ({
+  className,
+  items,
+  kind = 'unordered',
+  withMargin = true,
+}) => {
   const ListTag = kind === 'ordered' ? 'ol' : 'ul';
   const kindClass = `list--${kind}`;
+  const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin';
 
   /**
    * Retrieve the list items.
@@ -51,7 +61,7 @@ const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
         {value}
         {child && (
           <ListTag
-            className={`${styles.list} ${styles[kindClass]} ${className}`}
+            className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
           >
             {getItems(child)}
           </ListTag>
@@ -61,7 +71,9 @@ const List: VFC<ListProps> = ({ className, items, kind = 'unordered' }) => {
   };
 
   return (
-    <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
+    <ListTag
+      className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
+    >
       {getItems(items)}
     </ListTag>
   );