style: hamburger

Author: julsql

src/App.vue

@@ -1,37 +1,37 @@
 <template>
   <div class="app">
     <!-- HEADER -->
-    <header class="site-header">
+    <transition name="menu-fade">
+    <header class="site-header" :class="{ 'is-open': isOpen }">
       <div class="container header-inner">
-        <div class="brand">
+        <div class="brand" :class="{ 'is-open': isOpen }">
           <a href="/">
             <img :src="Logo" alt="Logo" class="brand-logo"/>
             <span class="brand-title">TheCode</span>
           </a>
         </div>
 
-        <div class="hamburger-menu">
-          <button class="hamburger" @click="toggleMenu">&#9776;</button>
-          <transition name="menu-fade">
-            <div v-if="isOpen" class="mobile-nav">
-              <button class="hamburger close-btn" @click="closeMenu">✕</button>
-              <nav aria-label="Phone Navigation">
+        <nav aria-label="large nav" class="large_nav">
+          <router-link to="/" exact @click="closeMenu">Accueil</router-link>
+          <router-link to="/generate" @click="closeMenu">Générateur</router-link>
+          <router-link to="/privacy" @click="closeMenu">Confidentialité</router-link>
+        </nav>
+
+
+          <div class="hamburger-menu">
+            <div v-if="isOpen">
+              <nav aria-label="small nav" class="small_nav">
                 <router-link to="/" exact @click="closeMenu">Accueil</router-link>
                 <router-link to="/generate" @click="closeMenu">Générateur</router-link>
                 <router-link to="/privacy" @click="closeMenu">Confidentialité</router-link>
               </nav>
             </div>
-          </transition>
-          <div class="nav">
-            <nav aria-label="Big Navigation">
-              <router-link to="/" exact @click="closeMenu">Accueil</router-link>
-              <router-link to="/generate" @click="closeMenu">Générateur</router-link>
-              <router-link to="/privacy" @click="closeMenu">Confidentialité</router-link>
-            </nav>
+            <button v-if="!isOpen" id="open-btn" @click="toggleMenu">&#9776;</button>
+            <button v-if="isOpen" id="close-btn" @click="closeMenu">✕</button>
           </div>
-        </div>
       </div>
     </header>
+    </transition>
 
     <!-- MAIN CONTENT -->
     <main class="main">
@@ -96,6 +96,10 @@ export default defineComponent({
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
+  transition: max-height 0.4s ease, opacity 0.4s ease;
+  max-height: 25px;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .container {
@@ -139,121 +143,109 @@ export default defineComponent({
   margin: auto auto auto 20px;
 }
 
-.nav a {
+.large_nav a {
   margin-left: 25px;
   text-decoration: none;
   font-weight: 500;
   padding-bottom: 4px;
   color: black;
 }
 
-.nav a:hover {
+.large_nav a:hover, .small_nav a:hover {
   color: #6A1E55;
 }
 
-.nav .router-link-exact-active {
+.large_nav .router-link-exact-active, .small_nav .router-link-exact-active {
   font-weight: bold;
 }
 
-.main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.site-footer {
-  background: var(--c2);
-  text-align: center;
-  padding: 15px 0;
-  font-size: 0.85rem;
-  color: #ddd;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.hamburger {
-  display: none;
-}
-
-.mobile-nav {
-  display: none;
-  position: fixed;
-  top: 0;
+.small_nav {
+  position: absolute;
+  display: grid;
   left: 0;
+  top: 50px;
   width: 100vw;
-  height: 100vh;
-  background: rgba(245, 245, 247, 1);
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 30px;
-  z-index: 2000;
-  transform: translateY(0);
 }
 
-.mobile-nav nav {
+.small_nav nav {
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 100%;
   padding: 20px;
 }
 
-.mobile-nav a {
+.small_nav a {
+  margin: 20px;
+  padding: 10px 0;
   color: var(--text);
   font-size: 1.5rem;
   text-decoration: none;
-  margin: 20px;
   font-weight: 400;
-  transition: color 0.2s, font-weight 0.4s;
+  transition: color 0.4s;
 }
 
-.mobile-nav a:hover {
-  color: #6A1E55;
-  font-weight: 700;
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.site-footer {
+  background: var(--c2);
+  text-align: center;
+  padding: 15px 0;
+  font-size: 0.85rem;
+  color: #ddd;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.close-btn {
+button {
   position: absolute;
-  top: 20px;
+  top: 10px;
   right: 25px;
   background: none;
   border: none;
   font-size: 2rem;
   color: var(--text);
   cursor: pointer;
+  display: none;
+}
+
+.hamburger-menu {
+  display: none;
 }
 
 /* TRANSITION ANIMATION */
 .menu-fade-enter-active,
 .menu-fade-leave-active {
   transition: opacity 0.4s ease;
 }
+
 .menu-fade-enter-from,
 .menu-fade-leave-to {
   opacity: 0;
 }
 
 @media (max-width: 550px) {
+  .site-header.is-open {
+    max-height: 100vh;
+  }
+
+  .large_nav {
+    display: none;
+  }
+
   .hamburger-menu {
-    position: relative;
-    display: inline-block;
+    display: flex;
   }
 
-  .hamburger {
-    font-size: 2rem;
-    background: none;
-    border: none;
-    color: var(--c3);
-    cursor: pointer;
+  button {
     display: block;
   }
 
-  .nav {
+  .brand:is(.is-open) {
     display: none;
   }
-
-  .mobile-nav {
-    display: flex;
-  }
 }
 </style>