fix: UI, a11y and cleanning

Author: alexiscolin

src/components/layout/Footer.vue

@@ -39,4 +39,4 @@ const socials = [
     link: 'https://www.linkedin.com/company/gnoland/',
   },
 ]
-</script>
+</script>

src/components/layout/Header.vue

@@ -1,30 +1,51 @@
 <template>
-  <header class="flex w-full items-center justify-between max-w-[110rem] mx-auto px-4 md:px-14 lg:px-20 pt-8 pb-4 mb-8 md:mb-16 relative">
-    <IconGnoland class="cursor-pointer" />
-    <HamburgerMenu :navItems="navItems"/>
-    <div class="md:flex justify-end items-center gap-5 hidden">
-      <a class="cursor-pointer link-with-animation" v-for="item, i in navItems" :key="i" href="item.link" target="_blank">{{item.title}}</a>
-      <a class="cursor-pointer px-2 py-1 bg-grey-100 rounded-sm hover:scale-105 transition-transform duration-300">Connect Wallet</a>
+  <header class="min-h-28 w-full max-w-[110rem] mx-auto px-8 md:px-14 lg:px-20 pt-8 pb-4 mb-8 md:mb-16">
+    <div class="relative w-full">
+      <nav class="absolute justify-between md:flex p-4 pb-8 md:p-0 z-2 w-full top-0 before:absolute before:z-30 before:top-0 before:left-0 before:bg-grey-500 before:w-full before:rounded before:h-0 before:duration-700 before:delay-50" :class="[menuIsOpen === true && 'before:!h-full before:!delay-0 before:!duration-500']">
+        <div class="top-0 left-0 right-0 bottom-0 bg-darkblur backdrop-blur-sm" :class="menuIsOpen ? 'fixed' : 'hidden'" @click="toggleMenu"></div>
+        <IconGnoland class="relative z-40 justify-start" />
+
+        <button id="menubutton" class="group absolute z-40 md:hidden w-7 h-5 block right-4 top-6 focus:outline-0" :aria-expanded="menuIsOpen" aria-haspopup="true" aria-label="Toggle menu" aria-controls="menu" tabindex="0" @click="toggleMenu">
+          <span class="absolute rounded h-px w-full origin-right left-0 top-0 bg-light duration-200" :class="[menuIsOpen === true && '-rotate-45 translate-y-0']"></span>
+          <span class="absolute rounded h-px w-full scale-x-75 origin-right left-0 top-1/2 -translate-y-1/2 bg-light duration-200 group-hover:scale-x-100 group-focus:scale-x-100" :class="[menuIsOpen === true && 'opacity-0']"></span>
+          <span class="absolute rounded h-px w-full scale-x-50 origin-right left-0 bottom-0 bg-light duration-200 group-hover:scale-x-100 group-focus:scale-x-100" :class="[menuIsOpen === true && 'rotate-45 !scale-x-100']"></span>
+        </button>
+
+        <ul class="relative z-40 md:flex mt-8 md:mt-0 justify-end items-center space-y-5 md:space-x-8 md:space-y-0" :aria-hidden="!menuIsOpen" id="menu" role="menu" aria-labelledby="menubutton">
+          <li v-for="item in navItems" :key="item.title" class="opacity-0 md:opacity-100 duration-150 delay-0" :class="[menuIsOpen === true && 'opacity-100 !delay-300 !duration-300']" role="presentation">
+            <a :href="item.link" class="text-link" role="menuitem">{{ item.title }}</a>
+          </li>
+        </ul>
+      </nav>
     </div>
   </header>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import IconGnoland from '@/components/icons/IconGnoland.vue'
-import { NavItem } from '@/types';
-import HamburgerMenu from '../ui/HamburgerMenu.vue';
-  const navItems: NavItem[] = [
-    {
-      title: 'Home',
-      link: 'https://gno.land/'
-    },
-    {
-      title: 'Docs',
-      link: 'https://docs.gno.land/'
-    },
-    {
-      title: 'Playground',
-      link: 'https://play.gno.land/'
-    }
-  ]
+
+const menuIsOpen = ref(false)
+
+interface NavItem {
+  title: string
+  link: string
+}
+
+const navItems: NavItem[] = [
+  {
+    title: 'Gno.land',
+    link: 'https://gno.land/',
+  },
+  {
+    title: 'Docs',
+    link: 'https://docs.gno.land/',
+  },
+  {
+    title: 'Playground',
+    link: 'https://play.gno.land/',
+  },
+]
+
+const toggleMenu = () => (menuIsOpen.value = !menuIsOpen.value)
 </script>

src/components/ui/HamburgerMenu.vue

@@ -130,6 +130,14 @@ html {
   @apply list-decimal;
 }
 
+@layer components {
+  .text-link {
+    @apply inline-block no-underline focus:outline-0 
+    after:block after:w-full after:bg-current after:h-px after:duration-200 after:transition-transform after:scale-x-0 after:origin-right 
+    hover:after:origin-left hover:after:scale-x-100 focus:after:origin-left focus:after:scale-x-100;
+  }
+}
+
 @layer utilities {
   /* Hide scrollbar for Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {
@@ -141,16 +149,3 @@ html {
     scrollbar-width: none; /* Firefox */
   }
 }
-
-.link-with-animation::after {
-  content: '';
-  display: block;
-  width: 0;
-  height: 2px;
-  background-color: currentColor;
-  transition: width 0.2s ease-in-out;
-}
-
-.link-with-animation:hover::after {
-  width: 100%;
-}

src/style.css

@@ -9,8 +9,3 @@ export interface Faucet {
   recaptcha: string // the recaptcha site key, if any
   token?: string // token name: default $GNOT
 }
-
-export interface NavItem {
-  title: string
-  link: string
-}