feat: dropdown menu item

clicepfl · Feb 26, 2024 · 79bcdee · 79bcdee
1 parent 8f45ff5
commit 79bcdee
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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);