From 8c5a5653e0bbec9c9d10e6a7dbcd10b0b19db5d5 Mon Sep 17 00:00:00 2001
From: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>
Date: Sat, 21 Dec 2024 17:39:37 +0100
Subject: [PATCH] Rotate dropdown arrow when the menu is active

---
 components/Navbar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Navbar.vue b/components/Navbar.vue
index a85b8fc..1ae0ebe 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -34,12 +34,12 @@
             <nav class="hidden lg:block">
                 <div class="flex justify-start gap-4 mx-4">
                     <NuxtLink :to="localePath('/')" class="navbar-element">{{ $t('navbar.home') }}</NuxtLink>
-                    <div class="dropdown relative inline-flex">
+                    <div class="dropdown relative inline-flex" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false">
                         <NuxtLink id="dropdown-hover-event" :to="localePath('/projects')" type="button"
                             class="inline-flex navbar-element items-center" aria-haspopup="menu" aria-expanded="false"
                             aria-label="Dropdown">
                             {{ $t('navbar.projects') }}
-                            <IconDown class="size-4" />
+                            <IconDown class="size-4 transform transition-all" :class="{ 'rotate-180': dropdownOpen }" />
                         </NuxtLink>
 
                         <div class="dropdown-menu transition duration-100 hidden rounded-md bg-black border border-gray-400 after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full z-10"
@@ -117,6 +117,7 @@ const localePath = useLocalePath()
 
 const showBanner = ref(false);
 const drawerOpen = ref(false);
+const dropdownOpen = ref(false);
 
 function drawer()
 {