feat: add stories for dropdown + add new widget, fix: dropdown

src/shared/lib/i18n/locales/en-US.ts

@@ -12,7 +12,11 @@ export default {
   header: {
     upgrade: 'Upgrade "Pro"',
     collaboration: 'Invite members',
-    name: 'Test Workspace'
+    name: 'Test Workspace',
+    user: {
+      welcome: 'Go to Welcome',
+      logout: 'Log out'
+    }
   },
   boards: {
     title: 'Boards in this team',

src/shared/lib/i18n/locales/ru-RU.ts

@@ -12,7 +12,11 @@ export default {
   header: {
     upgrade: 'Обновите до "Pro"',
     collaboration: 'Пригласить участников',
-    name: 'Тестовое рабочее пространство'
+    name: 'Тестовое рабочее пространство',
+    user: {
+      welcome: 'Перейти на главную',
+      logout: 'Выйти'
+    }
   },
   boards: {
     title: 'Доски в этой команде',

src/shared/lib/i18n/locales/zh-CN.ts

@@ -12,7 +12,11 @@ export default {
   header: {
     upgrade: '升级到“专业版”',
     collaboration: '邀请成员',
-    name: '测试工作区'
+    name: '测试工作区',
+    user: {
+      welcome: '前往欢迎页面',
+      logout: '登出'
+    }
   },
   boards: {
     title: '此团队的看板',

src/shared/ui/dropdown/UiDropdown.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '@/shared/ui';
+
+export default {
+  title: 'UiDropdown',
+  component: UiDropdown
+} as Meta<typeof UiDropdown>;
+
+export const Dropdown: StoryFn<typeof UiDropdown> = (args) => ({
+  components: { UiDropdown, UiDropdownItem, UiDropdownShortcut },
+  setup() {
+    return { args };
+  },
+  template: `<UiDropdown>
+    <template #trigger>
+      dropdown
+    </template>
+    <template #header>
+      dropdown header
+    </template>
+    <template #content>
+      <UiDropdownItem>
+        item 1
+        <UiDropdownShortcut>⇧1</UiDropdownShortcut>
+      </UiDropdownItem>
+      <UiDropdownItem>
+        item 2
+        <UiDropdownShortcut>⇧2</UiDropdownShortcut>
+      </UiDropdownItem>
+    </template>
+  </UiDropdown>`
+});

src/shared/ui/dropdown/UiDropdown.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
 import { ref } from 'vue';
-import UiDropdownItem from './UiDropdownItem.vue';
-import type { DropdownItem } from './types';
-
-defineProps<{
-  items: DropdownItem[];
-}>();
 
 const dropdown = ref<HTMLElement | null>(null);
 const isOpen = ref(false);
@@ -25,6 +19,7 @@ onClickOutside(dropdown, () => {
 defineSlots<{
   header: () => any;
   trigger: () => any;
+  content: () => any;
 }>();
 </script>
 
@@ -38,10 +33,8 @@ defineSlots<{
         <div :class="$style.header">
           <slot name="header" />
         </div>
-        <div :class="$style.content">
-          <div v-for="item in items" :key="item.id">
-            <UiDropdownItem :item @on-dropdown="onDropdownContent" />
-          </div>
+        <div :class="$style.content" @click="onDropdownContent">
+          <slot name="content" />
         </div>
       </div>
     </Transition>
@@ -73,11 +66,17 @@ defineSlots<{
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
     .header {
+      width: 100%;
       padding: 0.5rem 10px;
       border-bottom: 1px solid var(--zinc-200);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 20px;
     }
 
     .content {
+      width: 100%;
       padding: 4px;
     }
   }

src/shared/ui/dropdown/UiDropdownItem.vue

@@ -1,28 +1,6 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-import type { DropdownItem } from './types';
-
-const props = defineProps<{
-  item: DropdownItem;
-}>();
-
-const emits = defineEmits<{
-  (e: 'onDropdown'): void;
-}>();
-
-const router = useRouter();
-const onDropdownItem = () => {
-  router.push({ name: props.item.routeName });
-  emits('onDropdown');
-};
-</script>
-
 <template>
-  <div :class="$style.item" @click="onDropdownItem">
-    <span style="font-weight: 500; font-size: 12px;">
-      {{ item.content }}
-    </span>
-    <span style="font-size: 11px;">{{ item.shortcut }}</span>
+  <div :class="$style.item">
+    <slot />
   </div>
 </template>
 
@@ -35,6 +13,8 @@ const onDropdownItem = () => {
   justify-content: space-between;
   align-items: center;
   gap: 2px;
+  font-weight: 500;
+  font-size: 12px;
 
   &:hover {
     background-color: var(--zinc-100);

src/shared/ui/dropdown/UiDropdownShortcut.vue

@@ -0,0 +1,11 @@
+<template>
+  <div :class="$style.shortcut">
+    <slot />
+  </div>
+</template>
+
+<style module lang="scss">
+.shortcut {
+  font-size: 11px;
+}
+</style>

src/shared/ui/dropdown/index.ts

@@ -1,6 +1,5 @@
 import UiDropdown from './UiDropdown.vue';
 import UiDropdownItem from './UiDropdownItem.vue';
+import UiDropdownShortcut from './UiDropdownShortcut.vue';
 
-// TODO: see to optimization and refactoring in components
-
-export { UiDropdown, UiDropdownItem };
+export { UiDropdown, UiDropdownItem, UiDropdownShortcut };

src/widgets/layout/ui/header/HeaderMain.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { UserAvatar } from '@/entities/user';
-import { UiButton, UiDropdown } from '@/shared/ui';
+import { UiButton } from '@/shared/ui';
 import { Link } from 'lucide-vue-next';
-import { computed, shallowReactive } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { RouteNames } from '@/shared/config/consts';
+import UserMenu from './UserMenu.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -16,11 +16,6 @@ const path = computed(() => {
   }
   return t('sidebar.' + route.name?.toString());
 });
-
-const dropdownItems = shallowReactive([
-  { id: '0', content: 'Go to Welcome', shortcut: '⌘B', routeName: RouteNames.boards },
-  { id: '1', content: 'Log Out', shortcut: '⌘Q', routeName: RouteNames.boards }
-]);
 </script>
 
 <template>
@@ -42,16 +37,7 @@ const dropdownItems = shallowReactive([
         <Link :size="18" style="margin-right: 8px" />
         <span>{{ t('header.collaboration') }}</span>
       </UiButton>
-      <UiDropdown :items="dropdownItems">
-        <template #trigger>
-          <UserAvatar>
-            <img src="https://avatars.githubusercontent.com/u/121057011?v=4" style="width: 100%" />
-          </UserAvatar>
-        </template>
-        <template #header>
-          <span class="text-sm" style="font-weight: 500">[email protected]</span>
-        </template>
-      </UiDropdown>
+      <UserMenu />
     </div>
   </div>
 </template>

src/widgets/layout/ui/header/UserMenu.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { UserAvatar } from '@/entities/user';
+import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '@/shared/ui';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <UiDropdown>
+    <template #trigger>
+      <UserAvatar>
+        <img src="https://avatars.githubusercontent.com/u/121057011?v=4" style="width: 100%" />
+      </UserAvatar>
+    </template>
+    <template #header>
+      <span class="text-sm" style="font-weight: 500">[email protected]</span>
+    </template>
+    <template #content>
+      <UiDropdownItem>
+        {{ t('header.user.welcome') }}
+        <UiDropdownShortcut>⌘B</UiDropdownShortcut>
+      </UiDropdownItem>
+      <UiDropdownItem>
+        {{ t('header.user.logout') }}
+        <UiDropdownShortcut>⇧⌘Q</UiDropdownShortcut>
+      </UiDropdownItem>
+    </template>
+  </UiDropdown>
+</template>