feat: add side menu

Author: SidonieBouthors

app/src/components/NavigationBar.tsx

@@ -7,6 +7,7 @@ import { Commission } from "@/types/aliases";
 import { Schema } from "@/types/schema";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 function DropdownMenu({
   head: button,
@@ -18,32 +19,72 @@ function DropdownMenu({
   className?: string;
 }) {
   return (
-    <div className={styles.dropdownMenuItem + " " + (className || "")}>
+    <div className={styles.dropdownMenu + " " + (className || "")}>
       {button}
       <div className={styles.content}>{children}</div>
     </div>
   );
 }
 
+function SideMenu({
+  headToggle: toggle,
+  children,
+  visible,
+  className,
+}: {
+  headToggle: any;
+  children: any;
+  visible: boolean;
+  className?: string;
+}) {
+  return (
+    <>
+      <Burger
+        className={styles.burger + " " + styles.sidemenuHead}
+        onClick={toggle}
+      />
+      <div
+        className={styles.sideMenu + " " + (className || "")}
+        style={{ display: visible ? "flex" : "none" }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+
 export default function NavigationBar(props: {
   commissions?: Commission[];
   langs: Schema["languages"];
 }) {
+  const [menuVisible, setMenuVisible] = useState(false);
+  const toggleMenu = () => {
+    setMenuVisible((v) => !v);
+  };
+
   const router = useRouter();
   const entries = [
-    <Link className={styles.menuItem} href="/association">
+    <Link
+      className={styles.sidemenuItem}
+      href="/association"
+      onClick={toggleMenu}
+    >
       {translate("association", locale(router), {
         capitalize: true,
         plural: false,
       })}
     </Link>,
-    <Link className={styles.menuItem} href="/commissions">
+    <Link
+      className={styles.sidemenuItem}
+      href="/commissions"
+      onClick={toggleMenu}
+    >
       {translate("commission", locale(router), {
         capitalize: true,
         plural: true,
       })}
     </Link>,
-    <Link className={styles.menuItem} href="/news">
+    <Link className={styles.sidemenuItem} href="/news" onClick={toggleMenu}>
       {translate("news", locale(router), {
         capitalize: true,
         plural: false,
@@ -138,14 +179,13 @@ export default function NavigationBar(props: {
           <></>
         )}
 
-        <DropdownMenu
-          head={
-            <Burger className={styles.burger + " " + styles.dropdownHead} />
-          }
+        <SideMenu
+          headToggle={toggleMenu}
+          visible={menuVisible}
           className={styles.burgerContainer}
         >
           {entries}
-        </DropdownMenu>
+        </SideMenu>
       </div>
     </div>
   );

app/src/styles/NavigationBar.module.scss

@@ -19,20 +19,6 @@
   font-weight: lighter;
   font-size: 15pt;
 
-  .burger {
-    width: 2em;
-    height: auto;
-    stroke: white;
-    cursor: pointer;
-  }
-
-  .burgerContainer {
-    @media (min-width: 50rem) {
-      display: none !important;
-      position: absolute !important;
-    }
-  }
-
   .corner {
     margin-top: 0;
     margin-left: 0;
@@ -79,7 +65,7 @@
       align-items: center;
     }
 
-    .dropdownMenuItem {
+    .dropdownMenu {
       position: relative;
       display: inline-block;
 
@@ -113,6 +99,46 @@
         display: flex;
       }
     }
+
+    .burger {
+      width: 2em;
+      height: auto;
+      stroke: white;
+      cursor: pointer;
+      @media (min-width: 50rem) {
+        display: none !important;
+        position: absolute !important;
+      }
+    }
+
+    .sidemenuHead {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .sideMenu {
+      @extend .glass;
+
+      position: absolute;
+      flex-direction: column;
+      width: 60vw;
+      height: 100vh;
+
+      right: 0;
+      top: 3em;
+      bottom: 0;
+      padding: 1em;
+      border-radius: 5px;
+
+      .sidemenuItem {
+        margin: 0.5em 0em 0.5em 1em;
+      }
+
+      .sidemenuHead {
+        align-self: flex-end;
+      }
+    }
   }
 }