style: 重新调整结构

src/components/Navbar.vue

@@ -83,14 +83,10 @@
             tabindex="0"
             role="button"
             class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
-            @click="isUserMenuOpen = !isUserMenuOpen"
           >
             <User class="h-5 w-5" />
             <span class="font-medium">{{ userName }}</span>
-            <ChevronDownIcon
-              class="icon"
-              :class="{ 'rotate-180': isUserMenuOpen }"
-            />
+            <ChevronDownIcon class="icon transition-transform duration-300 dropdown-icon" />
           </div>
           <ul
             tabindex="0"
@@ -196,4 +192,9 @@ onMounted(() => {
 .icon {
   @apply h-5 w-5 opacity-70;
 }
+
+.dropdown[open] .dropdown-icon,
+.dropdown:focus-within .dropdown-icon {
+  transform: rotate(180deg);
+}
 </style>