From c728854bd06f2610b2e0ec30af6d2f08e9c3f4cb Mon Sep 17 00:00:00 2001
From: Joe Carstairs <jcarstairs@scottlogic.com>
Date: Tue, 15 Aug 2023 20:23:31 +0100
Subject: Adds nav links

---
 public/main.css                | 37 +++++++++++++++++++++++++++++++++----
 src/components/NavLinks.astro  | 25 +++++++++++++++++++++++++
 src/components/Navbar.astro    | 18 +++++++++++-------
 src/pages/[locale]/index.astro |  2 +-
 4 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/components/NavLinks.astro

diff --git a/public/main.css b/public/main.css
index c856e14..1833bca 100644
--- a/public/main.css
+++ b/public/main.css
@@ -418,16 +418,37 @@ footer {
 }
 
 nav {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   padding-block-start: var(--spacing-block-sm);
   padding-block-end: var(--spacing-block-md);
   padding-inline: var(--spacing-inline-sm);
 }
 
+.nav__top-banner {
+  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;
+}
+
 @media (min-width: 50rem) {
-  nav {
+  .nav__top-banner {
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
@@ -435,6 +456,14 @@ nav {
     gap: var(--spacing-inline-xs);
   }
 
+  .nav__nav-links {
+    padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--spacing-inline-md);
+  }
+
   .breadcrumbs {
     order: 0;
   }
diff --git a/src/components/NavLinks.astro b/src/components/NavLinks.astro
new file mode 100644
index 0000000..a34014e
--- /dev/null
+++ b/src/components/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);
+---
+
+<ul class="nav__nav-links">
+  <li>
+    <a class="btn" href={`/${locale}/news`}>{t(tNews, { key: 'title' })}</a>
+  </li>
+  <li>
+    <a class="btn" href={`/${locale}/furthsettins`}>{t(tFurthsettins, { key: 'title' })}</a>
+  </li>
+  <li>
+    <a class="btn" href={`/${locale}/#jyne`}>{t(tHame, { key: 'jyne' })}</a>
+  </li>
+  <li>
+    <a class="btn" href={`/${locale}/#contact`}>{t(tHame, { key: 'contact' })}</a>
+  </li>
+</ul>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index c4e31b2..40e671b 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -4,17 +4,21 @@ 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 logo">
-    <a href="/">
-      {t(tSite, { key: 'scots-leid-associe' })}
-    </a>
-  </p>
-  <SwitchLanguageLink />
-  <Breadcrumbs />
+  <div class="nav__top-banner">
+    <p class="title--small logo">
+      <a href="/">
+        {t(tSite, { key: 'scots-leid-associe' })}
+      </a>
+    </p>
+    <SwitchLanguageLink />
+    <Breadcrumbs />
+  </div>
+  <NavLinks />
 </nav>
diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro
index 30c06fc..6a3af60 100644
--- a/src/pages/[locale]/index.astro
+++ b/src/pages/[locale]/index.astro
@@ -38,7 +38,7 @@ const mostRecentNewsItem = await getMostRecentNewsItem(locale);
     </div>
   </section>
 
-  <section>
+  <section id="jyne">
     <h2 set:html={t(tPage, { key: 'jyne' })} />
 
     <h3 set:html={t(tPage, { key: 'why-jyne' })} />
-- 
cgit v1.2.3