From 313333deaf416216d139e0d344d709d7f8b19784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Mon, 10 Jun 2024 11:36:08 +0200
Subject: [PATCH] feat: move menu before social links

---
 src/lib/nav.html | 41 +++++++++++++++++++++--------------------
 src/lib/nav.scss |  5 ++---
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/lib/nav.html b/src/lib/nav.html
index acc0514..8ba5c43 100644
--- a/src/lib/nav.html
+++ b/src/lib/nav.html
@@ -17,6 +17,27 @@
       <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
     <div class="nav-bar--separator"></div>
+    <div class="nav-bar--links">
+      <a href="mailto:contact@frog-collective.com">
+          <img src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
+      </a>
+      <a href="https://www.youtube.com/@FrogCoGames" target="_blank">
+          <img src="/img/youtube-fill.svg" alt-text="Youtube"></img>
+      </a>
+      <a href="https://www.twitch.tv/frogcollective" target="_blank">
+          <img src="/img/twitch-fill.svg" alt-text="Twitch"></img>
+      </a>
+      <a href="https://mastodon.social/@frogcollective" target="_blank">
+          <img src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
+      </a>
+      <a href="https://x.com/FrogCoGames" target="_blank">
+          <img src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
+      </a>
+      <a href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
+          <img src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
+      </a>
+    </div>
+    <div class="nav-bar--separator"></div>
     <div class="nav-bar--languages">
       {{ language_button('fr', 'Version Française') }}
       {{ language_button('en', 'English version') }}
@@ -27,25 +48,5 @@
       <s class="bar"></s>
     </toggle-nav-bar-button>
   </div>
-  <div class="nav-bar--links">
-    <a href="mailto:contact@frog-collective.com">
-        <img src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
-    </a>
-    <a href="https://www.youtube.com/@FrogCoGames" target="_blank">
-        <img src="/img/youtube-fill.svg" alt-text="Youtube"></img>
-    </a>
-    <a href="https://www.twitch.tv/frogcollective" target="_blank">
-        <img src="/img/twitch-fill.svg" alt-text="Twitch"></img>
-    </a>
-    <a href="https://mastodon.social/@frogcollective" target="_blank">
-        <img src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
-    </a>
-    <a href="https://x.com/FrogCoGames" target="_blank">
-        <img src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
-    </a>
-    <a href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
-        <img src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
-    </a>
-  </div>
 </nav-bar>
 
diff --git a/src/lib/nav.scss b/src/lib/nav.scss
index 06678a5..f2d0c73 100644
--- a/src/lib/nav.scss
+++ b/src/lib/nav.scss
@@ -33,7 +33,7 @@
         margin: 0;
 
         display: grid;
-        grid-template-columns: 1fr auto auto;
+        grid-template-columns: var(--desktop-logo-width) 1fr auto auto auto;
 
         @media ($mobile-breakpoint) {
             height: var(--mobile-height);
@@ -73,7 +73,7 @@
     }
 
     &--menu {
-        justify-self: end;
+        grid-area: 1 / 2 / 2 / 3;
         align-self: center;
 
         display: flex;
@@ -184,7 +184,6 @@
     }
 
     &--links {
-        grid-area: 1 / 3 / 2 / 4;
         height: var(--desktop-height);
         grid-template-columns: 1fr auto auto;