From 79bcdee2d8fb4df31d4fd479f07c154ea671504c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Terrier?= <noeterrier@proton.me>
Date: Mon, 26 Feb 2024 17:46:04 +0100
Subject: [PATCH] feat: dropdown menu item

---
 app/src/components/NavigationBar.tsx     | 30 +++++++++++++++++++---
 app/src/styles/NavigationBar.module.scss | 32 ++++++++++++++++++++++--
 app/src/styles/globals.scss              |  3 ++-
 3 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/app/src/components/NavigationBar.tsx b/app/src/components/NavigationBar.tsx
index 7c56791..b15ee4a 100644
--- a/app/src/components/NavigationBar.tsx
+++ b/app/src/components/NavigationBar.tsx
@@ -23,9 +23,33 @@ export default function NavigationBar(props: { socialLinks?: SocialLink[] }) {
         <Link className={styles.menuItem} href="/association">
           L'Association
         </Link>
-        <Link className={styles.menuItem} href="/commissions">
-          Commissions
-        </Link>
+
+        <div className={styles.dropdownMenuItem}>
+          <Link className={styles.menuItem} href="/commissions">
+            Commissions
+            <div className={styles.content}>
+              <Link className={styles.menuItem} href="/commissions/Polygl0ts">
+                Polygl0ts
+              </Link>
+              <Link className={styles.menuItem} href="/commissions/CEVE">
+                CEVE
+              </Link>
+              <Link className={styles.menuItem} href="/commissions/GameStar">
+                Game*
+              </Link>
+              <Link className={styles.menuItem} href="/commissions/ICTravel">
+                IC Travel
+              </Link>
+              <Link
+                className={styles.menuItem}
+                href="/commissions/OrbitalGameJam"
+              >
+                Orbital Game Jam
+              </Link>
+            </div>
+          </Link>
+        </div>
+
         <Link className={styles.menuItem} href="/news">
           News
         </Link>
diff --git a/app/src/styles/NavigationBar.module.scss b/app/src/styles/NavigationBar.module.scss
index 1be9234..9c773b2 100644
--- a/app/src/styles/NavigationBar.module.scss
+++ b/app/src/styles/NavigationBar.module.scss
@@ -43,7 +43,7 @@
   .navigationMenu {
     display: flex;
     flex-direction: row;
-    margin-right: 15%;
+    margin-right: 10%;
     margin-left: auto;
     height: 100%;
     justify-content: center;
@@ -52,7 +52,7 @@
     .menuItem {
       fill: inherit;
       justify-content: center;
-      margin-left: 2em;
+      margin-right: 2em;
 
       &:hover {
         color: lightgrey;
@@ -61,6 +61,34 @@
         transition-timing-function: ease-out;
       }
     }
+
+    .dropdownMenuItem {
+      position: relative;
+      display: inline-block;
+
+      .content {
+        display: none;
+        position: absolute;
+        flex-direction: column;
+
+        background-color: var(--glass-color);
+        backdrop-filter: blur(10px) saturate(180%);
+        border: 1px solid rgba(255, 255, 255, 0.125);
+        box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);
+
+        padding-right: 2em;
+        z-index: 1;
+        border-radius: 5px;
+
+        .menuItem {
+          margin: 0.5em 0em 0.5em 1em;
+        }
+      }
+
+      &:hover .content {
+        display: flex;
+      }
+    }
   }
 }
 
diff --git a/app/src/styles/globals.scss b/app/src/styles/globals.scss
index 569255b..69ac3c0 100644
--- a/app/src/styles/globals.scss
+++ b/app/src/styles/globals.scss
@@ -5,6 +5,7 @@ body {
   --background-color: #fafafa;
   --text-color: #fafafa;
   --dark-text-color: darkblue;
+  --glass-color: rgba(100, 100, 255, 0.75);
 
   font-family: "Poppins";
 }
@@ -80,7 +81,7 @@ a {
 
   padding: 2em;
 
-  background-color: rgba(100, 100, 255, 0.75);
+  background-color: var(--glass-color);
   backdrop-filter: blur(10px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.125);
   box-shadow: 0 4px 30px rgba(0, 0, 100, 0.3);