add burger menu

package.json

@@ -49,8 +49,8 @@
     "prettier": "2.8.1",
     "typescript": "~4.7.4",
     "vite": "^3.2.4",
-    "vitest": "^0.25.3",
     "vite-plugin-eslint": "^1.8.1",
+    "vitest": "^0.25.3",
     "vue-tsc": "^1.0.9"
   },
   "eslintConfig": {

src/components/Header.vue

@@ -15,7 +15,7 @@
           <span class="beta">{{ $t('general.beta_version') }}</span>
         </p>
       </div>
-      <ul class="nav-list">
+      <ul :class="['nav-list', { 'mobile-menu-open': !menuIsClosed }]">
         <li class="nav-list-item">
           <Link
             :text="$t('general.header.contribute_text')"
@@ -34,12 +34,23 @@
           <Link icon="bi bi-person-circle" :disabled="true" path="/" />
         </li>
       </ul>
+      <button class="menu-burger" @click="toggleMenu">
+        <i v-if="!menuIsClosed" class="bi bi-x-lg"></i>
+        <i v-else class="bi bi-list"></i>
+      </button>
     </nav>
   </header>
 </template>
 
 <script lang="ts" setup>
 import Link from '@/components/Link.vue'
+import { ref } from 'vue'
+
+let menuIsClosed = ref<boolean>(true)
+
+function toggleMenu() {
+  menuIsClosed.value = !menuIsClosed.value
+}
 </script>
 
 <style scoped>
@@ -76,4 +87,53 @@ import Link from '@/components/Link.vue'
 .nav-list-item {
   margin-right: 2rem;
 }
+.menu-burger {
+  display: none;
+}
+@media (max-width: 500px) {
+  .header {
+    height: 6rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .nav {
+    align-items: center;
+  }
+  .nav-list {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: initial;
+    position: absolute;
+    width: 100%;
+    height: calc(100vh - 6rem);
+    top: 6rem;
+    left: 0;
+    z-index: 2;
+    background-color: var(--white);
+  }
+  .wrapper-logo p {
+    font-size: 1.2rem;
+  }
+  .beta {
+    font-size: 1rem;
+    position: absolute;
+    top: 0.8rem;
+  }
+  .menu-burger {
+    display: block;
+    background-color: transparent;
+    border: none;
+    font-size: 2.5rem;
+  }
+  .mobile-menu-open {
+    display: flex;
+  }
+  .nav-list-item {
+    margin-bottom: 2.5rem;
+  }
+  .menu-burger {
+    padding: 0;
+  }
+}
 </style>

src/components/Link.vue

@@ -82,4 +82,9 @@ const titleImg = computed<string>(() =>
 .disabled:hover {
   text-decoration: none;
 }
+@media (max-width: 500px) {
+  .link {
+    font-size: 1.6rem;
+  }
+}
 </style>

src/views/HomeView.vue

@@ -36,4 +36,9 @@ onMounted(async () => {
   width: 100vw;
   position: relative;
 }
+@media (max-width: 500px) {
+  .entry-viewer {
+    height: calc(100vh - 6rem);
+  }
+}
 </style>

vite.config.ts

@@ -1,5 +1,4 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import eslintPlugin from 'vite-plugin-eslint'