Merge pull request #885 from hit-pay/new-sidebar-ui

fix: user-dropdown position
hit-pay · Jan 7, 2025 · 4c20078 · 4c20078
2 parents 2b8e24c + 1180df9
commit 4c20078
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 10 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@orchidui/core",
   "description": "Orchid UI, Library Vue 3 tailwind css",
-  "version": "1.1.31-17",
+  "version": "1.1.31-18",
   "type": "module",
   "scripts": {
     "build": "vite build"

diff --git a/packages/core/src/Elements/Sidebar/OcSidebar.stories.js b/packages/core/src/Elements/Sidebar/OcSidebar.stories.js
@@ -1,4 +1,4 @@
-import { Theme, Sidebar, SidebarFeatureBanners, AccountSetupProgress } from '@/orchidui-core'
+import { Theme, Sidebar, SidebarFeatureBanners, AccountSetupProgress, DropdownItem } from '@/orchidui-core'
 
 import {
   PAYMENTS_SIDEBAR_GROUP,
@@ -27,7 +27,7 @@ export const Default = {
     progress: 80
   },
   render: (args) => ({
-    components: { Sidebar, Theme, OcAccountSetup, SidebarFeatureBanners, AccountSetupProgress },
+    components: { Sidebar, Theme, OcAccountSetup, SidebarFeatureBanners, AccountSetupProgress, DropdownItem },
     setup() {
       return { args }
     },
@@ -49,11 +49,21 @@ export const Default = {
               <template #before>
                 <OcAccountSetup :isExpanded="args.isExpanded" :progress="args.progress"/>
               </template>
-              <template v-slot:label="{menu}">
-                <a href="#" class="whitespace-nowrap px-5 py-3">{{ menu.label }}</a>
-              </template>
-              <template v-slot:submenu_label="{submenu}">
-                <a href="#" class="whitespace-nowrap px-5 py-3">{{ submenu.label }}</a>
+              <template #user-menu="{ toggle}">
+                <div class="p-2 border-b border-gray-200">
+                  <a href="#">
+                      <DropdownItem text="userName" />
+                    </a>
+                    <a href="#">
+                      <DropdownItem text="Security" />
+                    </a>
+                    <a v-if="isAdmin" href="#">
+                      <DropdownItem text="Admin Dashboard" />
+                    </a>
+                  </div>
+                  <div class="p-2">
+                    <DropdownItem @click="logout" text="Logout" variant="destructive" />
+                  </div>
               </template>
             </Sidebar>
           </Theme>

diff --git a/packages/core/src/Elements/Sidebar/OcSidebarFooter.vue b/packages/core/src/Elements/Sidebar/OcSidebarFooter.vue
@@ -13,7 +13,7 @@
           <Icon name="chat-2" width="18" height="18" />
           <span v-if="isExpanded">Contact support</span>
         </div>
-        <Dropdown v-model="isUserMenuOpen">
+        <Dropdown v-model="isUserMenuOpen" placement="top">
           <Avatar :size="32" class="shrink-0 uppercase" @click="$emit('user-click')">{{ displayName || 'J' }}</Avatar>
           <template #menu>
             <div class="flex flex-col">

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@orchidui/dashboard",
   "description": "Orchid Dashboard UI , Dashboard Ui Library Vue 3 tailwind css",
-  "version": "1.1.31-18",
+  "version": "1.1.31-19",
   "type": "module",
   "scripts": {
     "build": "vite build"