From 747ab9dfd450dbc7dfe9eb2424bdab9eb9642711 Mon Sep 17 00:00:00 2001
From: Andreani Jean <ja.andreani@gmail.com>
Date: Mon, 20 Feb 2023 15:37:56 +0100
Subject: [PATCH] add burger menu

---
 package.json              |  2 +-
 src/components/Header.vue | 62 ++++++++++++++++++++++++++++++++++++++-
 src/components/Link.vue   |  5 ++++
 src/views/HomeView.vue    |  5 ++++
 vite.config.ts            |  1 -
 5 files changed, 72 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index f174472..561f48f 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 765624d..f2751e0 100644
--- a/src/components/Header.vue
+++ b/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>
diff --git a/src/components/Link.vue b/src/components/Link.vue
index 978dac9..4a6165d 100644
--- a/src/components/Link.vue
+++ b/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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 69c8b86..d1037d8 100644
--- a/src/views/HomeView.vue
+++ b/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>
diff --git a/vite.config.ts b/vite.config.ts
index f5eed4c..cb30e2e 100644
--- a/vite.config.ts
+++ b/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'