From a56344ea9aced15fc4d2932d48cb2efd7f452e94 Mon Sep 17 00:00:00 2001 From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com> Date: Fri, 18 Aug 2023 21:28:17 +0100 Subject: Pulls out nav module --- public/css/modules/index.css | 5 ++- public/css/modules/nav.css | 46 ++++++++++++++++++++ public/css/modules/nav.lg.css | 7 +++ public/css/modules/nav.md.css | 19 ++++++++ public/main.css | 77 --------------------------------- src/components/Breadcrumbs.astro | 33 -------------- src/components/NavLinks.astro | 25 ----------- src/components/Navbar.astro | 24 ---------- src/components/Navbar/Breadcrumbs.astro | 33 ++++++++++++++ src/components/Navbar/Logo.astro | 14 ++++++ src/components/Navbar/NavLinks.astro | 25 +++++++++++ src/components/Navbar/Navbar.astro | 15 +++++++ src/components/SwitchLanguageLink.astro | 2 +- src/layouts/Layout.astro | 2 +- 14 files changed, 165 insertions(+), 162 deletions(-) create mode 100644 public/css/modules/nav.css create mode 100644 public/css/modules/nav.lg.css create mode 100644 public/css/modules/nav.md.css delete mode 100644 src/components/Breadcrumbs.astro delete mode 100644 src/components/NavLinks.astro delete mode 100644 src/components/Navbar.astro create mode 100644 src/components/Navbar/Breadcrumbs.astro create mode 100644 src/components/Navbar/Logo.astro create mode 100644 src/components/Navbar/NavLinks.astro create mode 100644 src/components/Navbar/Navbar.astro 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/Breadcrumbs.astro b/src/components/Breadcrumbs.astro deleted file mode 100644 index 66f2a66..0000000 --- a/src/components/Breadcrumbs.astro +++ /dev/null @@ -1,33 +0,0 @@ ---- -import findAllIndicesOf from '$lib/findAllIndicesOf'; -import translate from '$i18n/translate'; -import tBreadcrumbs from '$i18n/translations/components/breadcrumbs'; -import type Locale from '$types/Locale'; -import locales from '$i18n/locales'; - -const path = Astro.url.pathname.replace(/(? pathWithoutLocale.slice(0, n + 1)).slice(0, -1); - -const t = translate(locale); ---- - -
    - { - parentRoutes.map((route) => { - return ( -
  1. - - {t(tBreadcrumbs, { key: route })} - -
    2. - ); - }) - } -
diff --git a/src/components/NavLinks.astro b/src/components/NavLinks.astro deleted file mode 100644 index a34014e..0000000 --- a/src/components/NavLinks.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -import getLocaleFromPath from '$lib/getLocaleFromPath'; -import translate from '$i18n/translate'; -import tNews from '$i18n/translations/pages/news'; -import tFurthsettins from '$i18n/translations/pages/furthsettins'; -import tHame from '$i18n/translations/pages/home'; - -const locale = getLocaleFromPath(Astro.url.pathname); -const t = translate(locale); ---- - - 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); ---- - - diff --git a/src/components/Navbar/Breadcrumbs.astro b/src/components/Navbar/Breadcrumbs.astro new file mode 100644 index 0000000..1e82fd9 --- /dev/null +++ b/src/components/Navbar/Breadcrumbs.astro @@ -0,0 +1,33 @@ +--- +import findAllIndicesOf from '$lib/findAllIndicesOf'; +import translate from '$i18n/translate'; +import tBreadcrumbs from '$i18n/translations/components/breadcrumbs'; +import type Locale from '$types/Locale'; +import locales from '$i18n/locales'; + +const path = Astro.url.pathname.replace(/(? pathWithoutLocale.slice(0, n + 1)).slice(0, -1); + +const t = translate(locale); +--- + +
    + { + parentRoutes.map((route) => { + return ( +
  1. + + {t(tBreadcrumbs, { key: route })} + +
    2. + ); + }) + } +
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); +--- + + diff --git a/src/components/Navbar/NavLinks.astro b/src/components/Navbar/NavLinks.astro new file mode 100644 index 0000000..a34014e --- /dev/null +++ b/src/components/Navbar/NavLinks.astro @@ -0,0 +1,25 @@ +--- +import getLocaleFromPath from '$lib/getLocaleFromPath'; +import translate from '$i18n/translate'; +import tNews from '$i18n/translations/pages/news'; +import tFurthsettins from '$i18n/translations/pages/furthsettins'; +import tHame from '$i18n/translations/pages/home'; + +const locale = getLocaleFromPath(Astro.url.pathname); +const t = translate(locale); +--- + + 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'; +--- + + 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); --- - + { 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'; -- cgit v1.2.3