Import repositories from gitlab

2026-01-19 11:43:59 +01:00
commit 68b7405c52
131 changed files with 17192 additions and 0 deletions
--- a/next/components/header/navigationDrawer/index.jsx
+++ b/next/components/header/navigationDrawer/index.jsx
@@ -0,0 +1,46 @@
+"use client";
+import Link from "next/link";
+import SocialIcon from "../social-icon";
+import { useState } from "react";
+import styles from "./style.module.scss";
+
+export default function NavigationDrawer({programs, links , ...props}) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleDrawer = () => {
+        setIsOpen(prev => !prev);
+    }
+
+    return (
+        <header className={`${styles.header} ${isOpen ? styles.drawerOpen : ""}`}>
+            <div className={`${styles.backdrop}`} onClick={toggleDrawer}/>
+            <button className={`${styles.social} ${styles.burgerIcon}`} onClick={toggleDrawer}>
+                <svg className={`feather feather-menu`} xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1B519E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+            </button>
+            <Link href="/" className={`not-a-link ${styles.logo}`}>
+                <img src="/fefan.png" alt="Fefan" />
+                <h1>Festival de fanfare</h1>
+            </Link>
+            <a className={`${styles.social} ${styles.programIcon}`} href="/prog/city-wide">
+                <svg className={`feather feather-calendar`} xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#1B519E" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+            </a>
+            <nav className={`${styles.navigation}`}>
+                <div className={styles.spacer} />
+                <Link href="/">Accueil</Link>
+                {programs ? programs.map(({ id, attributes: attr }) => (
+                    <Link href={`/prog/${attr.type}`} key={id}>{attr.title}</Link>
+                )): null}
+                <Link href="/editions">Éditions précédentes</Link>
+                <Link href="/contact">Contact</Link>
+                <div className={styles.spacer} />
+                <nav className={styles.socialLinks}>
+                    {links.map(({ id, attributes: attr }) => (
+                        <Link aria-label={attr.type} target="_blank" href={attr.uri} key={id} className={`${styles.social} not-a-link`}>
+                            <SocialIcon name={attr.type} />
+                        </Link>
+                    ))}
+                </nav>
+            </nav>
+        </header>
+    );
+}
--- a/next/components/header/navigationDrawer/style.module.scss
+++ b/next/components/header/navigationDrawer/style.module.scss
@@ -0,0 +1,156 @@
+.header {
+    display: flex;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 200;
+    flex-flow: row;
+    border-bottom: var(--fg-3) solid var(--border-width);
+    background: var(--bg-0);
+}
+
+.header + * {
+    margin-top: calc(5rem + var(--border-width));
+}
+
+.logo {
+    display: flex;
+    margin: 0.5rem 1rem;
+    flex-flow: column;
+    text-decoration: none;
+    text-align: right;
+    color: var(--fefan-4);
+
+    h1 {
+        font-family: var(--font-details);
+        font-weight: 500;
+        font-size: 0.75rem;
+        margin: -0.10rem 0.35rem;
+    }
+
+    img:first-child {
+        height: 3rem;
+    }
+
+}
+
+.social {
+    appearance: none;
+    border: none;
+    background: unset;
+    font-size: unset;
+    margin: 0;
+    border-radius: 100%;
+    padding: 0.5rem;
+    text-decoration: none;
+    color: var(--fefan-1);
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    box-shadow: inset 0 0 6px 3px var(--background);
+    transition: all 0.2s ease;
+}
+
+.spacer {
+    flex: 1;
+}
+
+.spacer:first-of-type {
+    display: none;
+}
+
+.navigation {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    a {
+        margin: 0 0.35rem;
+    }
+
+    .socialLinks {
+        align-items: center;
+        display: flex;
+        margin-right: 1rem;
+        justify-content: flex-end;
+    }
+}
+
+.backdrop {
+    position: fixed;
+    content: '';
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 100vh;
+    z-index: 250;
+    background: rgba(0, 0, 0, 0);
+    transition: background-color 0.2s ease;
+}
+
+.burgerIcon {
+    display: none;
+    align-self: center;
+    cursor: pointer;
+}
+
+.drawerOpen .navigation {
+    left: 0%;
+}
+
+.drawerOpen .backdrop {
+    bottom: 0vh;
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.programIcon {
+    display: none;
+}
+
+@media only screen and (max-width: 992px) {
+    .header {
+        justify-content: space-between;
+        padding: 0 1.5rem;
+    }
+
+    .burgerIcon {
+        display: block;
+    }
+
+    .programIcon {
+        display: block;
+    }
+
+    .navigation {
+        padding: 1rem 0;
+        flex-flow: column;
+        position: fixed;
+        z-index: 300;
+        align-items: stretch;
+        top: 0;
+        max-width: 80vw;
+        width: 20rem;
+        left: -100%;
+        bottom: 0;
+        background: var(--bg-0);
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
+        transition: all 0.2s ease;
+
+        a {
+            padding: 0.5rem;
+            text-align: left;
+        }
+
+        .spacer:first-of-type {
+            display: block;
+        }
+
+        .socialLinks {
+            justify-content: space-around;
+        }
+    } 
+
+    .drawerOpen {
+        left: 0%;
+    }
+}