Update mobile dropdown

creeperkatze · Dec 31, 2024 · 1385dc6 · 1385dc6
1 parent 27b858b
commit 1385dc6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/components/DropdownDrawer.vue b/components/DropdownDrawer.vue
@@ -1,15 +1,20 @@
 <template>
-    <div class="dropdown flex flex-col" @click="dropdownOpen = !dropdownOpen">
-        <NuxtLink :to="localePath(titleLink)" type="button"
-            class="inline-flex navbar-element items-center justify-center">
+    <div class="dropdown flex flex-col" @click="toggleDropdown">
+        <NuxtLink :to="localePath(titleLink)" type="button" class="inline-flex navbar-element items-center">
             {{ title }}
             <IconDown class="size-4 transform transition-all" :class="{ 'rotate-180': dropdownOpen }" />
         </NuxtLink>
 
-        <div v-if="dropdownOpen" class="mt-4 border border-gray-400 rounded-md flex flex-col space-y-4 p-1">
-            <div v-for="item in items" :key="item.name" class="">
-                <NuxtLink :to="localePath(item.link)" class="navbar-element" @click="emit('item-clicked')">{{ item.name }}</NuxtLink>
+        <div v-if="dropdownOpen" class="mt-2 flex">
+            <div class="w-[2px] bg-gray-400" />
+            <div class="flex flex-col space-y-4 p-1">
+                <div v-for="item in items" :key="item.name" class="ml-2">
+                    <NuxtLink :to="localePath(item.link)" class="navbar-element" @click="emit('item-clicked')">{{
+                        item.name
+                    }}</NuxtLink>
+                </div>
             </div>
+
         </div>
     </div>
 </template>
@@ -38,11 +43,18 @@ const props = defineProps({
     }
 })
 
-watch(() => props.drawerOpen, (newVal) => {
-    if (!newVal) {
-        dropdownOpen.value = false;
+watch(() => props.drawerOpen, (newVal) =>
+{
+    if (!newVal)
+    {
+        toggleDropdown(false)
     }
 })
 
+const toggleDropdown = (state) =>
+{
+    dropdownOpen.value = state
+}
+
 const emit = defineEmits(['item-clicked'])
 </script>
diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -73,13 +73,13 @@
         enter-to-class="transform translate-y-0" leave-active-class="transition duration-100 ease-in"
         leave-from-class="transform translate-y-0" leave-to-class="transform -translate-y-full">
         <div v-show="drawerOpen" class="absolute w-full bg-black -mt-4 pb-4 z-40 lg:hidden" data-nosnippet>
-            <nav class="flex flex-col items-center justify-center space-y-4">
+            <nav class="flex flex-col text-left space-y-4 ml-4">
                 <NuxtLink :to="localePath('/')" class="navbar-element text-left" @click="drawerOpen = !drawerOpen">{{
                     $t('navbar.home') }}</NuxtLink>
                 <DropdownDrawer :title="$t('navbar.projects')" :titleLink="localePath('/projects/')" :items="[
                     { name: $t('navbar.superslide'), link: '/projects/superslide/' },
                     { name: $t('navbar.flappy-christmas'), link: '/projects/flappy-christmas' } 
-                ]" :drawerOpen="drawerOpen" @item-clicked="drawerOpen = !drawerOpen" />
+                    ]" :drawerOpen="drawerOpen" @item-clicked="drawerOpen = !drawerOpen"/>
                 <NuxtLink :to="localePath('/skills/')" class="navbar-element text-left"
                     @click="drawerOpen = !drawerOpen">{{
                         $t('navbar.skills')
@@ -91,7 +91,7 @@
                 <DropdownDrawer :title="$t('navbar.generators')" :titleLink="localePath('/generators/')" :items="[
                     { name: $t('navbar.joke'), link: '/generators/joke' },
                     { name: $t('navbar.cat'), link: '/generators/cat/' }
-                ]" :drawerOpen="drawerOpen" @item-clicked="drawerOpen = !drawerOpen" />
+                    ]" :drawerOpen="drawerOpen" @item-clicked="drawerOpen = !drawerOpen"/>
                 <NuxtLink :to="localePath('/idiot-test/')" class="navbar-element text-left"
                     @click="drawerOpen = !drawerOpen">{{
                         $t('navbar.idiot-test') }}</NuxtLink>
@@ -180,7 +180,7 @@ nav,
 .christmas-stripes:not(.router-link-active)
 {
     background: repeating-linear-gradient(-45deg, rgba(255, 96, 96, 1), rgba(255, 96, 96, 1) 5%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 10%);
-    background-size: 200% 100%;
+    background-size: 80% 100%;
     background-clip: text;
     -webkit-background-clip: text;
     color: transparent;