From c982ea69f5267ed6a4ffac67b38d7d8b0b0b4ecf Mon Sep 17 00:00:00 2001
From: RadioPotin <laradiopotin@gmail.com>
Date: Tue, 22 Oct 2024 17:01:56 +0200
Subject: [PATCH] Update navbar css, make more readable, add fr/en selector

---
 assets/sass/navigation.scss           | 58 +++++++++++++++++++--------
 layouts/partials/i18nlist.html        | 12 ++++++
 layouts/partials/site-navigation.html | 10 ++++-
 static/images/en.svg                  |  1 +
 static/images/fr.svg                  |  1 +
 5 files changed, 63 insertions(+), 19 deletions(-)
 create mode 100644 layouts/partials/i18nlist.html
 create mode 100644 static/images/en.svg
 create mode 100644 static/images/fr.svg

diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
index e39492e..c5d30a7 100644
--- a/assets/sass/navigation.scss
+++ b/assets/sass/navigation.scss
@@ -14,6 +14,8 @@ nav.navbar {
   .navbar-title {
     color: #fff;
     text-decoration: none;
+    font-size: 1.5rem;
+    font-weight: 600;
   }
 
   // Hamburger menu styles
@@ -81,7 +83,7 @@ nav.navbar {
     }
   }
 
-  // Mobile navigation styles
+  // Navbar items and links
   .nav-links {
     display: flex;
     align-items: center;
@@ -94,9 +96,17 @@ nav.navbar {
       align-items: center;
     }
 
-    li {
+    li.nav-item {
       padding: 0 1rem;
       font-size: 1rem;
+      border: 2px solid transparent;
+      transition: all 0.3s ease;
+
+      &:hover {
+        border-color: #ffcc00;
+        background-color: #333;
+        border-radius: 5px;
+      }
 
       a {
         text-decoration: none;
@@ -104,21 +114,44 @@ nav.navbar {
         font-weight: 400;
 
         &:hover {
-          color: #ccc;
+          color: #ffcc00;  // Gold accent on hover
         }
       }
     }
+
+    // Flags in the language selector
+    li img {
+      vertical-align: middle;
+    }
   }
 
-  // Hamburger menu for mobile
+  // Contact button styling
+  #contact-button {
+    background-color: #ffcc00;  // Gold button
+    color: black;
+    font-weight: 600;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #fff;
+      color: #000;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  // Mobile styles
   @media screen and (max-width: 992px) {
     .nav-links {
-      display: none; // Hidden by default
+      display: none;
     }
 
     #main-navigation.open {
       display: flex;
-      flex-direction: column; // Stack items vertically on mobile
+      flex-direction: column;
       width: 100%;
       background-color: #000;
       padding: 1rem 0;
@@ -129,25 +162,17 @@ nav.navbar {
     }
 
     ul {
-      display: flex;
       flex-direction: column;
-      list-style: none;
-      padding: 0;
-      margin: 0;
     }
 
     .nav-item {
       padding: 0.75rem 1rem;
       margin: 0;
       width: 100%;
-      text-align: center; // Ensure the items are centered
+      text-align: center;
 
       a {
-        text-decoration: none;
-        color: white;
-        font-size: 1rem;
-        font-weight: 400;
-        display: block; // Make the link take up the full width
+        display: block;
         width: 100%;
         padding: 0.75rem 0;
         transition: background-color 0.3s ease, color 0.3s ease;
@@ -159,7 +184,6 @@ nav.navbar {
     }
   }
 
-  // Adjustments for larger screens
   @media (min-width: 992px) {
     .nav-links {
       display: flex;
diff --git a/layouts/partials/i18nlist.html b/layouts/partials/i18nlist.html
new file mode 100644
index 0000000..18a497e
--- /dev/null
+++ b/layouts/partials/i18nlist.html
@@ -0,0 +1,12 @@
+{{ if .IsTranslated }}
+<h4>{{ i18n "translations" }}</h4>
+<ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
+    {{ range .Translations }}
+    <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
+        <a class="hover-white no-underline white-90" href="{{ .RelPermalink }}">
+            <img src="/images/{{ .Lang }}.svg" alt="{{ .Lang }} flag" style="width:2em;margin-right:5px;">
+        </a>
+    </li>
+    {{ end }}
+</ul>
+{{ end }}
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
index 2035f54..fbd7d85 100644
--- a/layouts/partials/site-navigation.html
+++ b/layouts/partials/site-navigation.html
@@ -8,13 +8,12 @@
     <!-- Hamburger menu for mobile -->
     <div class="menu-toggle">
       <button id="menu-button" class="hamburger-button" aria-expanded="false" aria-controls="main-navigation">
-        <span class="hamburger-icon"></span> <!-- This is where the three lines are styled -->
+        <span class="hamburger-icon"></span>
       </button>
     </div>
 
     <!-- Navigation Links -->
     <div id="main-navigation" class="nav-links flex-l items-center dn db-l">
-      {{ partial "i18nlist.html" . }}
       {{ with .Site.GetPage "_index.md"  }}
       <ul class="flex-l {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
         <li class="nav-item {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
@@ -54,6 +53,13 @@
           </a>
         </li>
       {{ end }}
+      {{ range .Translations }}
+        <li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
+          <a class="hover-white no-underline white-90" href="{{ .RelPermalink }}">
+            <img src="/images/{{ .Lang }}.svg" alt="{{ .Lang }} flag" style="width:2em;margin-right:5px;">
+          </a>
+        </li>
+      {{ end }}
       </ul>
       {{ partialCached "social-follow.html" . }}
     </div>
diff --git a/static/images/en.svg b/static/images/en.svg
new file mode 100644
index 0000000..2f6c03e
--- /dev/null
+++ b/static/images/en.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><g fill-rule="nonzero"><path fill="#999" d="M256 0c70.68 0 134.69 28.66 181.01 74.99C483.34 121.31 512 185.32 512 256c0 70.68-28.66 134.69-74.99 181.01C390.69 483.34 326.68 512 256 512c-70.68 0-134.69-28.66-181.01-74.99C28.66 390.69 0 326.68 0 256c0-70.68 28.66-134.69 74.99-181.01C121.31 28.66 185.32 0 256 0z"/><path fill="#fff" d="M256 19.48c65.3 0 124.46 26.48 167.25 69.27l1.09 1.18c42.14 42.71 68.18 101.37 68.18 166.06 0 65.31-26.5 124.46-69.29 167.25l-1.18 1.09c-42.73 42.16-101.4 68.19-166.05 68.19-65.23 0-124.37-26.51-167.18-69.33-42.84-42.74-69.33-101.89-69.33-167.2 0-65.31 26.48-124.45 69.27-167.24C131.55 45.96 190.7 19.48 256 19.48z"/><path fill="#FEFEFE" d="M256 39.59c119.52 0 216.41 96.89 216.41 216.4 0 119.52-96.89 216.42-216.41 216.42-119.51 0-216.4-96.9-216.4-216.42 0-119.51 96.89-216.4 216.4-216.4z"/><path fill="#012169" d="M183.49 179.55V52.05c-41.32 14.7-76.85 41.61-102.27 76.35l102.27 51.15zm0 152.9v127.5c-41.3-14.7-76.82-41.59-102.26-76.35l102.26-51.15zm144.55 0v127.67c41.45-14.63 77.09-41.54 102.61-76.34l-102.61-51.33zm0-152.9V51.88c41.45 14.63 77.11 41.54 102.62 76.35l-102.62 51.32z"/><path fill="#C8102E" d="M448.3 328.16h-48.11l49.35 24.72c3.21-6.41 6.11-13 8.69-19.75l-9.93-4.97zm-9.34-187.76-86.42 43.33h48.11l48.95-24.5c-3.23-6.46-6.79-12.75-10.64-18.83zM212.41 299.26v168.75c14.08 2.87 28.66 4.4 43.59 4.4 14.76 0 29.19-1.49 43.13-4.3V299.26h168.94c2.83-13.98 4.34-28.44 4.34-43.27 0-14.88-1.51-29.42-4.37-43.47H299.13V43.9A217.404 217.404 0 0 0 256 39.59c-14.93 0-29.51 1.54-43.59 4.4v168.53H43.97a217.777 217.777 0 0 0-4.37 43.47c0 14.83 1.51 29.29 4.34 43.27h168.47zM63.12 183.84h48.11l-48.89-24.48c-3.2 6.41-6.11 13.02-8.68 19.76l9.46 4.72zm95.87 144.43h-48.11l-48.57 24.31A216.76 216.76 0 0 0 73 371.52l86.43-43.25h-.44z"/></g></svg>
\ No newline at end of file
diff --git a/static/images/fr.svg b/static/images/fr.svg
new file mode 100644
index 0000000..050105c
--- /dev/null
+++ b/static/images/fr.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 512"><g fill-rule="nonzero"><path fill="#999" d="M256 0c70.68 0 134.69 28.66 181.01 74.99C483.34 121.31 512 185.32 512 256c0 70.68-28.66 134.69-74.99 181.01C390.69 483.34 326.68 512 256 512c-70.68 0-134.69-28.66-181.01-74.99C28.66 390.69 0 326.68 0 256c0-70.68 28.66-134.69 74.99-181.01C121.31 28.66 185.32 0 256 0z"/><path fill="#fff" d="M256 19.48c65.29 0 124.45 26.48 167.24 69.27l1.1 1.18c42.14 42.71 68.17 101.37 68.17 166.06 0 65.31-26.49 124.46-69.28 167.25l-1.19 1.09c-42.73 42.16-101.4 68.19-166.04 68.19-65.23 0-124.38-26.51-167.19-69.33-42.84-42.74-69.33-101.89-69.33-167.2 0-65.31 26.48-124.45 69.27-167.24C131.54 45.96 190.69 19.48 256 19.48z"/><path fill="#E1000F" d="M337.87 55.63C416.8 87.92 472.4 165.46 472.4 255.99c0 90.54-55.6 168.09-134.53 200.38V55.63z"/><path fill="#273375" d="M174.14 456.37V55.63C95.21 87.91 39.59 165.44 39.59 255.99c0 90.56 55.62 168.11 134.55 200.38z"/></g></svg>
\ No newline at end of file