frontend: Mise en place de NextJS

frontend/components/Header/Header.css

@@ -0,0 +1,161 @@
+/* HEADER */
+.Header {
+    position: fixed;
+    width: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: .5rem 1rem;
+
+    border-bottom: var(--border-header-footer);
+    background-color: var(--background-color);
+}
+@media (min-width: 992px) {
+    .Header {
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+}
+.Header > .container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+}
+@media (min-width: 992px) {
+    .Header > .container {
+        flex-wrap: nowrap;
+    }
+}
+/* Brand */
+.Header__brand-link {
+    display: inline-block;
+    padding-top: .3125rem;
+    padding-bottom: .3125rem;
+    margin-right: 1rem;
+    font-size: 1.25rem;
+    line-height: inherit;
+    white-space: nowrap;
+}
+#brand-link__logo-small-screen {
+    display: none;
+}
+@media (max-width: 496px) {
+    #brand-link__logo {
+        display: none;
+    }
+    .Header__brand-link {
+        width: 30%;
+    }
+    #brand-link__logo-small-screen {
+        display: inline-block;
+    }
+}
+
+@media (min-width: 992px) {
+    .Header .Header__navbar {
+        display: flex;
+        flex-basis: auto;
+    }
+}
+.Header__navbar {
+    flex-basis: 100%;
+    flex-grow: 1;
+    align-items: center;
+}
+.navbar__list {
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+}
+.navbar__list.navbar__list-active {
+    margin: 0 !important;
+    display: flex;
+}
+@media (max-width: 992px) {
+    .navbar__list {
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        padding-left: 0;
+        list-style: none;
+    }
+}
+.navbar-link {
+    display: block;
+    padding: .5rem 1rem;
+}
+
+/* Details Styling */
+.navbar-link:hover {
+    text-decoration: none;
+    color: rgba(255, 255, 255, .75);
+}
+.navbar-link, .navbar-link-active {
+    color: rgba(255, 255, 255, .5);
+}
+.navbar-link-active, .navbar-link-active:hover, .Header__brand-link {
+    color: var(--text-color);
+}
+.navbar-item {
+    list-style: none;
+}
+.navbar-link {
+    font-size: 16px;
+    padding: .5rem;
+}
+
+/* Hamburger Icon */
+.Header__hamburger {
+    display: none;
+    width: 56px;
+    height: 40px;
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, .1);
+    border-radius: .25rem;
+    position: relative;
+}
+.Header__hamburger > span, .Header__hamburger > span::before, .Header__hamburger > span::after {
+    position: absolute;
+    width: 22px;
+    height: 1.3px;
+    background-color: rgba(255, 255, 255);
+}
+.Header__hamburger > span {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: background-color .3s ease-in-out;
+}
+.Header__hamburger > span::before, .Header__hamburger > span::after {
+    content: '';
+    transition: transform .3s ease-in-out;
+}
+.Header__hamburger > span::before {
+    transform: translateY(-8px);
+}
+.Header__hamburger > span::after {
+    transform: translateY(8px);
+}
+.Header__hamburger-active span {
+    background-color: transparent;
+}
+.Header__hamburger-active > span::before {
+    transform: translateY(0px) rotateZ(45deg);
+}
+.Header__hamburger-active > span::after {
+    transform: translateY(0px) rotateZ(-45deg);
+}
+/* Apparition du hamburger */
+@media (max-width: 992px) {
+    .Header__hamburger {
+        display: flex;
+    }
+}

frontend/components/Header/Header.js

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import NavigationLink from './NavigationLink';
+import './Header.css';
+
+export default function Header() {
+
+    const [hamburgerIcon, setHamburgerIcon] = useState("");
+    const [navbarList, setNavbarList] = useState("");
+
+    const toggleNavbar = () => {
+        if (hamburgerIcon) {
+            setHamburgerIcon("");
+            setNavbarList("");
+        } else {
+            setHamburgerIcon("Header__hamburger-active");
+            setNavbarList("navbar__list-active");
+        }
+    }
+
+    return (
+        <header className="Header">
+            <div className="container">
+
+                {/* Brand */}
+                <Link href={"/"}>
+                    <a className="Header__brand-link">
+                        <img id="brand-link__logo" src="/images/FunctionProject_brand-logo.png" alt="FunctionProject" />
+                        <img id="brand-link__logo-small-screen" src="/images/FunctionProject_icon_small.png" alt="FunctionProject" />
+                    </a>
+                </Link>
+
+                {/* Hamburger icon on Mobile */}
+                <div onClick={toggleNavbar} className={"Header__hamburger " + hamburgerIcon}>
+                    <span></span>
+                </div>
+
+                {/* Navigation */}
+                <nav className="Header__navbar">
+                    <ul className={"navbar__list " + navbarList}>
+                        <NavigationLink name="Accueil" path="/" />
+                    </ul>
+                </nav>
+
+            </div>
+        </header>
+    );
+}

frontend/components/Header/NavigationLink.js

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import './Header.css';
+
+export default function NavigationLink(props) {
+
+    const { pathname } = useRouter();
+
+    return (
+        <li className="navbar-item">
+            <Link href={props.path}>
+                <a className={`navbar-link ${pathname === props.path ? "navbar-link-active" : null}`}>
+                    {props.name}
+                </a>
+            </Link>
+        </li>
+    );
+}