fix: make top nav responsive (#318)

components/HamburgerComponent.vue

@@ -1,25 +1,41 @@
 <template>
-    <div class="cursor-pointer md:hidden">
-        <img @click="toggleMenu"
-            src="../assets/images/hamburger-menu.svg"
-            alt="hamburger menu" />
-        <div v-if="showMenu">
+    <div class="cursor-pointer md:hidden w-full">
+        <div class="flex justify-between w-full">
             <div>
-                <span class="block hover:-translate-y-1 hover:scale-110 duration-300">Home</span>
-                <span class="block hover:-translate-y-1 hover:scale-110 duration-300">About</span>
+                <img
+                    @click="menuStore.toggleMenu()"
+                    src="../assets/images/hamburger-menu.svg"
+                    alt="hamburger menu"
+                />
+                <div
+                    v-show="menuStore.menuOpen"
+                    class="z-20 absolute top-[50px] w-[200px] p-8 rounded bg-white border-2"
+                >
+                    <div
+                        v-for="(item, index) in menuStore.menuItems"
+                        :key="index"
+                    >
+                        <NuxtLink :to="item.route">
+                            <span
+                                @click="menuStore.toggleMenu()"
+                                class="block hover:-translate-y-1 hover:scale-110 duration-300"
+                                >{{ $t(item.displayText) }}</span
+                            >
+                        </NuxtLink>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <span class="text-black text-md font-bold font-['Noto Sans JP']"
+                    >Find a Doc, Japan</span
+                >
             </div>
         </div>
     </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
-
-//state
-const showMenu = ref(false)
+<script lang="ts" setup>
+import { useMenuStore } from "~/stores/menuStore";
 
-//functions
-function toggleMenu() {
-    showMenu.value = !showMenu.value
-}
+const menuStore = useMenuStore();
 </script>

components/TopNav.vue

@@ -1,44 +1,62 @@
 <template>
-  <div
-    class="p-4 pl-8 border border-secondary-bg/20 flex justify-between items-center bg-gradient-to-t from-secondary-bg/30 via-primary-bg to-primary-bg"
-  >
-    <HamburgerComponent />
-    <div class="font-semibold text-xl group transition-colors items-start">
-      <NuxtLink class="flex" to="/">
-        <svg
-          role="img"
-          title="site icon"
-          class="mr-1 w-10 h-10 flex-shrink-0 align-middle fill-primary group-hover:fill-primary-hover"
-        >
-          <use xlink:href="../assets/images/site-logo.svg#site-logo-svg" />
-        </svg>
-        <div class="title-text flex flex-col flex-shrink-0" data-testid="logo">
-          <div class="text-lg text-primary group-hover:text-primary-hover">Find a Doc</div>
-          <div class="text-sm text-primary leading-none group-hover:text-primary-hover">Japan</div>
+    <div
+        class="p-4 pl-8 border border-secondary-bg/20 flex justify-between items-center bg-gradient-to-t from-secondary-bg/30 via-primary-bg to-primary-bg"
+    >
+        <HamburgerComponent />
+        <div class="hidden md:flex items-center">
+            <div
+                class="font-semibold text-xl group transition-colors items-start"
+            >
+                <NuxtLink class="flex" to="/">
+                    <svg
+                        role="img"
+                        title="site icon"
+                        class="mr-1 w-10 h-10 flex-shrink-0 align-middle fill-primary group-hover:fill-primary-hover"
+                    >
+                        <use
+                            xlink:href="../assets/images/site-logo.svg#site-logo-svg"
+                        />
+                    </svg>
+                    <div
+                        class="title-text flex flex-col flex-shrink-0"
+                        data-testid="logo"
+                    >
+                        <div
+                            class="text-lg text-primary group-hover:text-primary-hover"
+                        >
+                            Find a Doc
+                        </div>
+                        <div
+                            class="text-sm text-primary leading-none group-hover:text-primary-hover"
+                        >
+                            Japan
+                        </div>
+                    </div>
+                </NuxtLink>
+            </div>
+            <div id="searchbar" class="align-middle mr-32">
+                <SearchBar />
+            </div>
+            <nav
+                class="flex gap-4 mx-6"
+                v-for="(item, index) in menuStore.menuItems"
+                :key="index"
+            >
+                <NuxtLink
+                    :to="item.route"
+                    class="hover:text-primary-hover transition-colors"
+                    >{{ $t(item.displayText) }}</NuxtLink
+                >
+            </nav>
+            <LocaleSelector />
         </div>
-      </NuxtLink>
     </div>
-    <div id="searchbar" class="align-middle mr-32">
-      <SearchBar />
-    </div>
-    <nav class="flex gap-4 ml-6 absolute right-10">
-      <NuxtLink
-        to="/about"
-        class="hover:text-primary-hover transition-colors"
-      >{{ $t('topNav.about')}}</NuxtLink>
-      <NuxtLink
-        to="/submit"
-        class="hover:text-primary-hover transition-colors"
-        @click="submissionStore.resetForm()"
-      >{{ $t('topNav.submit')}}</NuxtLink>
-      <LocaleSelector />
-    </nav>
-    <div></div>
-  </div>
 </template>
 
 <script lang="ts" setup>
 import { useSubmissionStore } from "~/stores/submissionStore";
+import { useMenuStore } from "~/stores/menuStore";
 
 const submissionStore = useSubmissionStore();
+const menuStore = useMenuStore();
 </script>

i18n/locales/en.json

@@ -68,6 +68,7 @@
     },
     "topNav": {
         "about": "About",
+        "home": "Home",
         "submit": "Add a Doctor"
     }
 }

stores/menuStore.ts

@@ -0,0 +1,22 @@
+import { defineStore } from "pinia"
+import { ref, watch } from 'vue'
+
+export const useMenuStore = defineStore('menuStore', () => {
+    const menuOpen = ref(false)
+    const menuItems = {
+        "home": { "displayText": "topNav.home", "route": "/" },
+        "about": { "displayText": "topNav.about", "route": "/about" },
+        "submit": { "displayText": "topNav.submit", "route": "/submit" },
+    }
+
+    function toggleMenu() {
+        console.log("menu= ", menuOpen.value)
+        menuOpen.value = !menuOpen.value
+    }
+
+    return {
+        menuItems,
+        menuOpen,
+        toggleMenu
+    }
+})