Pulls out nav module

4 files changed, 76 insertions, 1 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