feat(nav): refactor primary navigation to split labels + icons; remove redundant nav code

src/assets/styles/components/nav.css

@@ -0,0 +1,51 @@
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  padding: 0;
+  margin: 0;
+
+  .icon > span,
+  .active > span {
+    display: none;
+  }
+
+  &.primary {
+    margin-top: var(--spacing-base);
+  }
+
+  &.icons {
+    justify-content: end;
+  }
+
+  &.primary,
+  &.sub-pages {
+    gap: var(--sizing-sm);
+  }
+
+  &.social,
+  &.sub-pages {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.icons,
+  &.social {
+    gap: var(--spacing-md);
+  }
+
+  &.social {
+    margin-bottom: var(--spacing-lg);
+  }
+
+  &.primary,
+  &.social {
+    width: var(--sizing-full);
+  }
+
+  &.sub-pages {
+    font-size: var(--font-size-sm);
+    padding-bottom: var(--spacing-3xl);
+  }
+}

src/assets/styles/components/nav/footer.css

@@ -1,31 +0,0 @@
-nav {
-  &.social,
-  &.sub-pages {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.social {
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-lg);
-    width: var(--sizing-full);
-
-    .icon > span,
-    .active > span {
-      display: none;
-    }
-
-    .active {
-      display: flex;
-    }
-  }
-
-  &.sub-pages {
-    font-size: var(--font-size-sm);
-    padding-bottom: var(--spacing-3xl);
-    gap: var(--sizing-sm);
-  }
-}

src/assets/styles/components/nav/primary.css

@@ -1,25 +0,0 @@
-.nav-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-  gap: var(--spacing-md);
-  padding: 0;
-  margin: 0;
-
-  @media screen and (min-width: 768px) {
-    justify-content: center;
-  }
-
-  & > li {
-    margin-bottom: 0;
-
-    :is(.icon, .active) svg {
-      display: block;
-    }
-
-    :is(.icon, .active) span {
-      display: none;
-    }
-  }
-}