fix: enhance header to open only one dropdown

src/assets/main.css

@@ -419,6 +419,10 @@
     box-shadow: inset 0px 2px 4px -1px rgba(0, 57, 79, 0.25);
   }
 
+  .lux-account ::placeholder {
+    @apply text-gray-400;
+  }
+
   .form-control {
     border: 1px solid var(--color-gray);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

src/components/auth/auth-form.vue

@@ -34,7 +34,9 @@ function submit() {
 
 <template>
   <div data-cy="authForm" class="lux-account bg-secondary">
-    <h4 class="lux-panel-title pt-5 pl-5 h-16 shrink-0 flex justify-between">
+    <h4
+      class="lux-panel-title pt-5 mb-5 pl-5 h-16 shrink-0 flex justify-between"
+    >
       {{ t('My account') }}
     </h4>
 
@@ -45,10 +47,10 @@ function submit() {
         <!-- When user is not authenticated -->
         <template v-if="!isAuthenticated">
           <form @submit.prevent="submit">
-            <div class="flex flex-col gap-1 mb-2">
+            <div class="flex flex-col gap-2 mb-2">
               <div>
                 <input
-                  class="w-full lux-input"
+                  class="w-full lux-input h-11"
                   type="text"
                   name="userName"
                   v-model="userName"
@@ -57,7 +59,7 @@ function submit() {
               </div>
               <div>
                 <input
-                  class="w-full lux-input"
+                  class="w-full lux-input h-11"
                   type="password"
                   name="userPassword"
                   :placeholder="t('Password')"
@@ -66,7 +68,7 @@ function submit() {
             </div>
 
             <div class="flex mt-3 items-center">
-              <div class="grow">
+              <div class="grow leading-5">
                 <p>
                   <a
                     data-cy="authFormLostPwd"
@@ -87,7 +89,11 @@ function submit() {
                 </p>
               </div>
               <div>
-                <input class="lux-btn" type="submit" :value="t('Submit')" />
+                <input
+                  class="lux-btn h-11 w-24 text-white placeholder:italic bg-secondary border-none uppercase hover:text-primary hover:bg-secondary"
+                  type="submit"
+                  :value="t('Submit')"
+                />
               </div>
             </div>
           </form>

src/components/common/dropdown-content.vue

@@ -1,19 +1,31 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, shallowRef, ShallowRef } from 'vue'
+import { onMounted, onUnmounted, shallowRef, ShallowRef, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
     placeholder?: string
     enableClickOutside?: boolean
+    isOpen?: boolean
   }>(),
   {
     enableClickOutside: true,
+    isOpen: false,
+  }
+)
+const emit = defineEmits(['toggleDropdown'])
+const localIsOpen: ShallowRef<boolean> = shallowRef(props.isOpen)
+
+watch(
+  () => props.isOpen,
+  isOpen => {
+    localIsOpen.value = isOpen
   }
 )
-const isOpen: ShallowRef<boolean> = shallowRef(false)
 
 function toggleDropdown(forceOpen?: boolean) {
-  isOpen.value = forceOpen === void 0 ? !isOpen.value : forceOpen
+  localIsOpen.value = forceOpen === void 0 ? !localIsOpen.value : forceOpen
+
+  emit('toggleDropdown', localIsOpen.value)
 }
 
 function onClickOpenBtn(event: MouseEvent) {
@@ -43,8 +55,8 @@ onUnmounted(
       <button
         type="button"
         class="lux-btn lux-dropdown-btn"
-        :class="isOpen ? 'expanded' : ''"
-        :aria-expanded="isOpen"
+        :class="localIsOpen ? 'expanded' : ''"
+        :aria-expanded="localIsOpen"
         aria-haspopup="true"
         @click="onClickOpenBtn"
       >
@@ -55,7 +67,7 @@ onUnmounted(
     <div class="lux-dropdown-wrapper">
       <div
         class="lux-dropdown-content"
-        :class="isOpen ? '' : 'hidden'"
+        :class="localIsOpen ? '' : 'hidden'"
         tabindex="-1"
       >
         <slot></slot>

src/components/header-bar/header-bar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTranslation } from 'i18next-vue'
 
@@ -15,6 +15,8 @@ const appStore = useAppStore()
 const { toggleThemeGrid } = appStore
 const themeStore = useThemeStore()
 const { theme } = storeToRefs(themeStore)
+const isAuthFormOpened = ref(false)
+const isLangOpened = ref(false)
 
 watch(
   theme,
@@ -43,6 +45,22 @@ function onClick() {
 
   toggleThemeGrid()
 }
+
+function onToggleDropdownLang(isOpen: boolean) {
+  isLangOpened.value = isOpen
+
+  if (isOpen) {
+    isAuthFormOpened.value = false
+  }
+}
+
+function onToggleDropdownAuth(isOpen: boolean) {
+  isAuthFormOpened.value = isOpen
+
+  if (isOpen) {
+    isLangOpened.value = false
+  }
+}
 </script>
 
 <template>
@@ -72,6 +90,8 @@ function onClick() {
           <language-selector
             data-cy="langSelect"
             class="flex-none h-full"
+            :isOpen="isLangOpened"
+            @toggleDropdown="onToggleDropdownLang"
           ></language-selector>
         </li>
 
@@ -81,6 +101,8 @@ function onClick() {
             data-cy="authFormIcon"
             class="lux-navbar-dropdown lux-navbar-dropdown-auth h-full"
             :enableClickOutside="false"
+            :isOpen="isAuthFormOpened"
+            @toggleDropdown="onToggleDropdownAuth"
           >
             <auth-form class="w-80" />
           </dropdown-content>

src/components/header-bar/language-selector.vue

@@ -29,13 +29,11 @@ function changeLanguages(lang: string) {
 </script>
 
 <template>
-  <div>
-    <dropdown-list
-      class="lux-navbar-dropdown lux-dropdown-inline text-white h-full"
-      :options="availableLanguages"
-      :placeholder="placeholder"
-      v-model="lang"
-      @change="changeLanguages"
-    ></dropdown-list>
-  </div>
+  <dropdown-list
+    class="lux-navbar-dropdown lux-dropdown-inline text-white h-full"
+    :options="availableLanguages"
+    :placeholder="placeholder"
+    v-model="lang"
+    @change="changeLanguages"
+  ></dropdown-list>
 </template>