From d4e6d234593dec09ff18a46700f839788a258094 Mon Sep 17 00:00:00 2001
From: Damien Broqua <damien@freemiumplay.com>
Date: Thu, 1 Feb 2024 08:25:09 +0100
Subject: [PATCH] Updated navbar

---
 sass/colors.scss |  2 ++
 sass/navbar.scss | 56 ++++++++++++++++++++++++++----------------------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/sass/colors.scss b/sass/colors.scss
index 4328cf3..ae39df3 100644
--- a/sass/colors.scss
+++ b/sass/colors.scss
@@ -45,6 +45,7 @@ $close-background-dark: rgba(240,240,240,.6);
     --bg-color: #{darken($white, 5%)};
     --bg-alternate-color: #{darken($white, 8%)};
     --font-color: #{$nord3};
+    --hover-font-color: #{lighten($nord3, 16%)};
     --footer-color: #{$darken-white};
     --link-color: #{$nord1};
 
@@ -88,6 +89,7 @@ $close-background-dark: rgba(240,240,240,.6);
     --bg-color: #{lighten($nord0, 2%)};
     --bg-alternate-color: #{lighten($nord3, 8%)};
     --font-color: #{$nord6};
+    --hover-font-color: #{darken($nord6, 16%)};
     --footer-color: #{$nord1};
     --link-color: #{$nord4};
 
diff --git a/sass/navbar.scss b/sass/navbar.scss
index b1aab70..e2358b0 100644
--- a/sass/navbar.scss
+++ b/sass/navbar.scss
@@ -117,7 +117,6 @@
             @include respond-to("medium-up") {
                 display: flex;
                 align-items: stretch;
-                color: rgba(0,0,0,.7);
 
                 .navbar-dropdown {
                     background-color: var(--default-color);
@@ -127,7 +126,6 @@
                     box-shadow: 0 8px 8px rgba(10,10,10,.1);
                     display: none;
                     font-size: .875rem;
-                    left: 0;
                     min-width: 100%;
                     position: absolute;
                     top: 100%;
@@ -138,7 +136,7 @@
 
                     .navbar-link {
                         background-color: var(--default-hl-color);
-                        color: rgba(0,0,0,.7);
+                        color: var(--hover-font-color);
                     }
 
                     .navbar-dropdown {
@@ -167,6 +165,29 @@
         @include respond-to("medium-up") {
             display: flex;
             align-items: center;
+
+            &::after {
+                border: 3px solid transparent;
+                border-radius: 2px;
+                border-right: 0;
+                border-top: 0;
+                content: " ";
+                display: block;
+                height: .625em;
+                pointer-events: none;
+                position: absolute;
+                top: 50%;
+                transform: rotate(-45deg);
+                transform-origin: center;
+                width: .625em;
+                border-color: var(--secondary-color);
+                margin-top: -0.375em;
+                right: 1.125em;
+
+                @include respond-to("medium-up") {
+                    border-color: var(--font-color);
+                }
+            }
         }
 
         .icon {
@@ -177,28 +198,7 @@
             width: 1.5rem;
         }
 
-        &::after {
-            border: 3px solid transparent;
-            border-radius: 2px;
-            border-right: 0;
-            border-top: 0;
-            content: " ";
-            display: block;
-            height: .625em;
-            pointer-events: none;
-            position: absolute;
-            top: 50%;
-            transform: rotate(-45deg);
-            transform-origin: center;
-            width: .625em;
-            border-color: var(--secondary-color);
-            margin-top: -0.375em;
-            right: 1.125em;
 
-            @include respond-to("medium-up") {
-                border-color: rgba(0,0,0,.7);
-            }
-        }
     }
 
     .navbar-menu {
@@ -260,7 +260,7 @@
             background-color: var(--font-color);
             border: none;
             height: 2px;
-            margin: .5rem 0;
+            margin: .5rem 0 0 1.5rem;
         }
 
         .navbar-item {
@@ -277,11 +277,15 @@
             box-shadow: 0 8px 8px rgba(10,10,10,.1);
             display: none;
             font-size: .875rem;
-            left: 0;
+            right: 0;
             min-width: 100%;
             position: absolute;
             top: 100%;
 
+            hr {
+                margin: 0.5rem 0;
+            }
+
             .navbar-item {
                 white-space: nowrap;
                 padding: .375rem 1rem;