feat: add PWA support

website/components/Header/Header.css

@@ -1,167 +0,0 @@
-/* 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: 0.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: 0.3125rem;
-  padding-bottom: 0.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: 0.5rem 1rem;
-}
-
-/* Details Styling */
-.navbar-link:hover {
-  text-decoration: none;
-  color: rgba(255, 255, 255, 0.75);
-}
-.navbar-link,
-.navbar-link-active {
-  color: rgba(255, 255, 255, 0.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: 0.5rem;
-}
-
-/* Hamburger Icon */
-.Header__hamburger {
-  display: none;
-  width: 56px;
-  height: 40px;
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 0.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 0.3s ease-in-out;
-}
-.Header__hamburger > span::before,
-.Header__hamburger > span::after {
-  content: '';
-  transition: transform 0.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;
-  }
-}

website/components/Header/Header.jsx

@@ -3,7 +3,6 @@ import { UserContext } from '../../contexts/UserContext'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import NavigationLink from './NavigationLink'
-import './Header.css'
 
 export default function Header () {
   const { isAuth, logoutUser, user } = useContext(UserContext)

website/components/Header/NavigationLink.jsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import './Header.css'
 
 export default function NavigationLink (props) {
   const { pathname } = useRouter()