feat(global): create menu

assets/css/global.css

@@ -11,6 +11,12 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+body::-webkit-scrollbar {
+  display: none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 * {
   box-sizing: border-box;
 }

components/ui/Menu.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="menu">
+    <span @click="toggleMenu">
+      <img
+        class="w-8 cursor-pointer"
+        src="/images/icons/menu.svg"
+        :alt="$t('general.openMenu')"
+      />
+    </span>
+    <transition name="slide-fade">
+      <div
+        v-if="showMenu"
+        class="menu-body bg-primary h-screen w-full absolute top-0 left-0 z-10"
+      >
+        <span
+          class="close flex justify-end text-white p-3 font-bold text-2xl cursor-pointer"
+          @click="toggleMenu"
+        >
+          <img
+            class="w-6"
+            src="/images/icons/cross.svg"
+            :alt="$t('general.closeMenu')"
+          />
+        </span>
+        <div class="menu-content">
+          <div class="text-center flex flex-col p-5">
+            <a
+              v-for="(link, index) in links"
+              :key="index"
+              class="link font-bold text-2xl text-blue-main-800 rounded p-4 cursor-pointer"
+              @click="navigateTo(link.url)"
+            >
+              {{ link.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { NAV_LINKS } from '@/constants/navLinks'
+
+export default {
+  name: 'Menu',
+  data: () => ({
+    showMenu: false,
+  }),
+  computed: {
+    links() {
+      return NAV_LINKS
+    },
+  },
+  methods: {
+    toggleMenu() {
+      this.showMenu = !this.showMenu
+    },
+    navigateTo(url) {
+      this.toggleMenu()
+      this.$router.push(url)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$heightClose: 60px;
+
+.close {
+  height: $heightClose;
+}
+
+.menu-content {
+  height: calc(100% - 120px);
+
+  @apply flex justify-center items-center;
+
+  .link:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateX(10px);
+  opacity: 0;
+}
+</style>

components/ui/TheHeader.vue

@@ -23,38 +23,29 @@
           </nuxt-link>
         </li>
       </ul>
+      <Menu class="block sm:hidden" />
     </div>
   </header>
 </template>
 
 <script>
+import { NAV_LINKS } from '@/constants/navLinks'
 import Logo from '~/components/Logo'
 
 export default {
   name: 'TheHeader',
   components: {
     Logo,
   },
-  data: () => ({
-    links: [
-      {
-        url: '/blog',
-        name: 'Blog',
-      },
-      {
-        url: '/projects',
-        name: 'Projects',
-      },
-      {
-        url: '/about',
-        name: 'About',
-      },
-    ],
-  }),
+  computed: {
+    links() {
+      return NAV_LINKS
+    },
+  },
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .links:last-child {
   border: 0;
 }

constants/navLinks.js

@@ -0,0 +1,14 @@
+export const NAV_LINKS = [
+  {
+    url: '/blog',
+    name: 'Blog',
+  },
+  {
+    url: '/projects',
+    name: 'Projects',
+  },
+  {
+    url: '/about',
+    name: 'About',
+  },
+]

locales/es.json

@@ -1,6 +1,8 @@
 {
   "general": {
-    "altLogo": "Pablo Sirera, desarrollador web frontend | Javascript, Vue y Nuxt"
+    "altLogo": "Pablo Sirera, desarrollador web frontend | Javascript, Vue y Nuxt",
+    "closeMenu": "Cerrar menú",
+    "openMenu": "Abrir menú"
   },
   "months": {
     "april": "Abril",