Pulls out nav module

12 files changed, 108 insertions, 105 deletions

diff --git a/public/css/modules/index.css b/public/css/modules/index.css
index 974121c..d69ada3 100644
--- a/public/css/modules/index.css
+++ b/public/css/modules/index.css
@@ -5,4 +5,7 @@
 @import './product.css';
 @import './schedule.css';
 @import './schedule.lg.css' (min-width: 35rem);
-@import './link-gallery.css';
\ No newline at end of file
+@import './link-gallery.css';
+@import './nav.css';
+@import './nav.md.css' (min-width: 35rem);
+@import './nav.lg.css' (min-width: 55rem);
\ No newline at end of file
diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
new file mode 100644
index 0000000..7a6708c
--- /dev/null
+++ b/public/css/modules/nav.css
@@ -0,0 +1,46 @@
+.nav__bottom-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-block-end: var(--spacing-block-sm);
+}
+
+.nav__nav-links {
+  padding: 0;
+}
+
+.nav__nav-links li {
+  margin-inline: auto;
+  width: max-content;
+}
+
+.nav__nav-links li {
+  margin-block-end: var(--spacing-block-md);
+}
+
+.nav__nav-links li:last-of-type {
+  margin-block-end: 0;
+}
+
+.nav__logo {
+  text-align: center;
+}
+
+.nav__logo a {
+  text-decoration: none;
+}
+
+.nav__breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.nav__breadcrumbs li {
+  margin-inline: var(--spacing-inline-xs);
+  list-style-type: none;
+  min-width: max-content;
+}
+
+.nav__breadcrumbs li::before {
+  content: '/'
+}
\ No newline at end of file
diff --git a/public/css/modules/nav.lg.css b/public/css/modules/nav.lg.css
new file mode 100644
index 0000000..0d58556
--- /dev/null
+++ b/public/css/modules/nav.lg.css
@@ -0,0 +1,7 @@
+.nav__bottom-row {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
+  gap: var(--spacing-inline-xs);
+}
\ No newline at end of file
diff --git a/public/css/modules/nav.md.css b/public/css/modules/nav.md.css
new file mode 100644
index 0000000..a8323e3
--- /dev/null
+++ b/public/css/modules/nav.md.css
@@ -0,0 +1,19 @@
+.nav__nav-links {
+  padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: var(--spacing-inline-md);
+}
+
+.nav__breadcrumbs {
+  order: 0;
+}
+
+.nav__logo {
+  order: 1;
+}
+
+.nav__switch-language-link {
+  order: 2;
+}
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 4e984b4..d3b034a 100644
--- a/public/main.css
+++ b/public/main.css
@@ -94,83 +94,6 @@ nav {
   padding-inline: var(--spacing-inline-sm);
 }
 
-.nav__bottom-row {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-block-end: var(--spacing-block-sm);
-}
-
-.nav__nav-links {
-  padding: 0;
-}
-
-.nav__nav-links li {
-  margin-inline: auto;
-  width: max-content;
-}
-
-.nav__nav-links li {
-  margin-block-end: var(--spacing-block-md);
-}
-
-.nav__nav-links li:last-of-type {
-  margin-block-end: 0;
-}
-
-.nav__logo {
-  text-align: center;
-}
-
-.nav__logo a {
-  text-decoration: none;
-}
-
-.breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.breadcrumbs li {
-  margin-inline: var(--spacing-inline-xs);
-  list-style-type: none;
-  min-width: max-content;
-}
-
-.breadcrumbs li::before {
-  content: '/'
-}
-
-@media (min-width: 50rem) {
-  .nav__bottom-row {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: baseline;
-    padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
-    gap: var(--spacing-inline-xs);
-  }
-
-  .nav__nav-links {
-    padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
-    display: grid;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    gap: var(--spacing-inline-md);
-  }
-
-  .breadcrumbs {
-    order: 0;
-  }
-
-  .nav__logo {
-    order: 1;
-  }
-
-  .switch-language-link {
-    order: 2;
-  }
-}
-
 .align-end {
   display: block;
   margin-inline-start: auto;
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
deleted file mode 100644
index 654b085..0000000
--- a/src/components/Navbar.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-import Breadcrumbs from './Breadcrumbs.astro';
-import SwitchLanguageLink from './SwitchLanguageLink.astro';
-import tSite from '$i18n/translations/site';
-import translate from '$i18n/translate';
-import getLocaleFromPath from '$lib/getLocaleFromPath';
-import NavLinks from './NavLinks.astro';
-
-const locale = getLocaleFromPath(Astro.url.pathname);
-const t = translate(locale);
----
-
-<nav>
-  <p class="title--small nav__logo">
-    <a href="/">
-      {t(tSite, { key: 'scots-leid-associe' })}
-    </a>
-  </p>
-  <NavLinks />
-  <div class="nav__bottom-row">
-    <SwitchLanguageLink />
-    <Breadcrumbs />
-  </div>
-</nav>
diff --git a/src/components/Breadcrumbs.astro b/src/components/Navbar/Breadcrumbs.astro
index 66f2a66..1e82fd9 100644
--- a/src/components/Breadcrumbs.astro
+++ b/src/components/Navbar/Breadcrumbs.astro
@@ -18,7 +18,7 @@ const parentRoutes = slashIndices.map((n) => pathWithoutLocale.slice(0, n + 1)).
 const t = translate(locale);
 ---
 
-<ol class="breadcrumbs">
+<ol class="nav__breadcrumbs">
   {
     parentRoutes.map((route) => {
       return (
diff --git a/src/components/Navbar/Logo.astro b/src/components/Navbar/Logo.astro
new file mode 100644
index 0000000..58bf01d
--- /dev/null
+++ b/src/components/Navbar/Logo.astro
@@ -0,0 +1,14 @@
+---
+import translate from '$i18n/translate';
+import getLocaleFromPath from '$lib/getLocaleFromPath';
+import tSite from '$i18n/translations/site';
+
+const locale = getLocaleFromPath(Astro.url.pathname);
+const t = translate(locale);
+---
+
+<p class="title--small nav__logo">
+  <a href="/">
+    {t(tSite, { key: 'scots-leid-associe' })}
+  </a>
+</p>
diff --git a/src/components/NavLinks.astro b/src/components/Navbar/NavLinks.astro
index a34014e..a34014e 100644
--- a/src/components/NavLinks.astro
+++ b/src/components/Navbar/NavLinks.astro
diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
new file mode 100644
index 0000000..aea8909
--- /dev/null
+++ b/src/components/Navbar/Navbar.astro
@@ -0,0 +1,15 @@
+---
+import Breadcrumbs from './Breadcrumbs.astro';
+import SwitchLanguageLink from '../SwitchLanguageLink.astro';
+import NavLinks from './NavLinks.astro';
+import Logo from './Logo.astro';
+---
+
+<nav>
+  <Logo />
+  <NavLinks />
+  <div class="nav__bottom-row">
+    <SwitchLanguageLink />
+    <Breadcrumbs />
+  </div>
+</nav>
diff --git a/src/components/SwitchLanguageLink.astro b/src/components/SwitchLanguageLink.astro
index e7b04da..d3e5ab9 100644
--- a/src/components/SwitchLanguageLink.astro
+++ b/src/components/SwitchLanguageLink.astro
@@ -20,7 +20,7 @@ const otherLocalePath = currentPath
 const t = translate(otherLocale);
 ---
 
-<a class="link switch-language-link" href={otherLocalePath}>
+<a class="link nav__switch-language-link" href={otherLocalePath}>
   {
     t(tPage, {
       key: 'language-link-text',
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ff58e82..bb30305 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,6 @@
 ---
 import Footer from '$components/Footer.astro';
-import Navbar from '$components/Navbar.astro';
+import Navbar from '$components/Navbar/Navbar.astro';
 import translate from '$i18n/translate';
 import site from '$i18n/translations/site';
 import getLocaleFromPath from '$lib/getLocaleFromPath';