Skip to content

Commit 40cc084

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent b793cc9 commit 40cc084

File tree

1 file changed

+59
-78
lines changed
  • storage/framework/defaults/components/Dashboard

1 file changed

+59
-78
lines changed

‎storage/framework/defaults/components/Dashboard/Sidebar.vue

Lines changed: 59 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -448,7 +448,8 @@ const calculateDropdownPosition = (event: MouseEvent, itemPath: string) => {
448448
const target = event.currentTarget as HTMLElement
449449
if (target) {
450450
const rect = target.getBoundingClientRect()
451-
dropdownPositions.value[itemPath] = rect.top
451+
// Center the dropdown vertically relative to the button
452+
dropdownPositions.value[itemPath] = rect.top - 5
452453
}
453454
}
454455
@@ -519,7 +520,13 @@ const endAccordionTransition = (el: Element, done: () => void) => {
519520
class="hidden lg:fixed lg:inset-y-0 lg:flex lg:flex-col transition-all duration-300 ease-in-out"
520521
:class="isSidebarCollapsed ? 'lg:w-20' : 'lg:w-64'"
521522
>
522-
<div class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-4 dark:border-gray-600 dark:bg-blue-gray-900" :class="{ 'items-center': isSidebarCollapsed }">
523+
<div
524+
class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white dark:border-gray-600 dark:bg-blue-gray-900 transition-all duration-300"
525+
:class="{
526+
'items-center px-2 pb-4': isSidebarCollapsed,
527+
'px-6 pb-4': !isSidebarCollapsed
528+
}"
529+
>
523530
<div class="pt-4 h-10 flex shrink-0 items-center justify-between rounded-lg">
524531
<RouterLink to="/" :class="isSidebarCollapsed ? 'hidden' : ''">
525532
<img class="h-10 w-auto rounded-lg cursor-pointer" src="/images/logos/logo.svg" alt="Stacks Logo">
@@ -696,14 +703,14 @@ const endAccordionTransition = (el: Element, done: () => void) => {
696703
<li v-if="!item.children" class="w-full">
697704
<Tooltip v-if="isSidebarCollapsed" :text="item.text" position="right" :dark="isDark" :usePortal="true">
698705
<RouterLink :to="item.to" class="group sidebar-links justify-center">
699-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
706+
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700']" />
700707
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
701708
{{ item.letter }}
702709
</div>
703710
</RouterLink>
704711
</Tooltip>
705712
<RouterLink v-else :to="item.to" class="group sidebar-links w-full">
706-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
713+
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700']" />
707714
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
708715
{{ item.letter }}
709716
</div>
@@ -721,7 +728,7 @@ const endAccordionTransition = (el: Element, done: () => void) => {
721728
class="group sidebar-links w-full text-left sidebar-dropdown-trigger"
722729
:class="{ 'parent-active': isChildRouteActive(item) }"
723730
>
724-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
731+
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700']" />
725732
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
726733
{{ item.letter }}
727734
</div>
@@ -779,74 +786,52 @@ const endAccordionTransition = (el: Element, done: () => void) => {
779786
>
780787
<div
781788
v-if="sections[sectionKey]"
782-
class="w-full flex flex-col items-center space-y-0.5 accordion-content overflow-hidden"
789+
class="w-full flex flex-col items-center space-y-1 accordion-content overflow-hidden"
783790
>
784791
<template v-for="item in sectionContent[sectionKey]?.items" :key="item.to">
785792
<!-- Regular item -->
786-
<li v-if="!item.children" class="w-full">
793+
<li v-if="!item.children" class="flex justify-center w-full">
787794
<Tooltip v-if="isSidebarCollapsed" :text="item.text" position="right" :dark="isDark" :usePortal="true">
788795
<RouterLink :to="item.to" class="group sidebar-links justify-center">
789-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
796+
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700']" />
790797
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
791798
{{ item.letter }}
792799
</div>
793800
</RouterLink>
794801
</Tooltip>
795-
<RouterLink v-else :to="item.to" class="group sidebar-links w-full">
796-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
797-
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
798-
{{ item.letter }}
799-
</div>
800-
<span class="flex-1">{{ item.text }}</span>
801-
</RouterLink>
802802
</li>
803803

804804
<!-- Dropdown item in collapsed mode -->
805-
<li v-else class="w-full">
806-
<div class="relative">
805+
<li v-else class="flex justify-center w-full">
806+
<div class="relative flex justify-center">
807807
<Tooltip v-if="isSidebarCollapsed" :text="item.text" position="right" :dark="isDark" :usePortal="true">
808808
<button
809809
@click="(event) => {
810810
event.stopPropagation();
811811
toggleItem(item.to);
812812
calculateDropdownPosition(event as MouseEvent, item.to);
813813
}"
814-
class="group sidebar-links w-full justify-center sidebar-dropdown-trigger"
814+
class="group sidebar-links justify-center sidebar-dropdown-trigger"
815815
:class="{ 'parent-active': isChildRouteActive(item) }"
816816
>
817-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
817+
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700']" />
818818
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
819819
{{ item.letter }}
820820
</div>
821821
</button>
822822
</Tooltip>
823-
<button
824-
v-else
825-
@click="(event) => {
826-
event.stopPropagation();
827-
toggleItem(item.to);
828-
}"
829-
class="group sidebar-links w-full text-left sidebar-dropdown-trigger"
830-
:class="{ 'parent-active': isChildRouteActive(item) }"
831-
>
832-
<div v-if="item.icon" :class="[item.icon, 'h-5 w-5 text-gray-400 transition duration-150 ease-in-out dark:text-gray-200 group-hover:text-gray-700 mt-0.5']" />
833-
<div v-else-if="item.letter" class="flex h-5 w-5 items-center justify-center rounded-md border border-gray-200 bg-white text-[10px] font-medium text-gray-400 dark:border-gray-700 dark:bg-blue-gray-800">
834-
{{ item.letter }}
835-
</div>
836-
<span class="flex-1">{{ item.text }}</span>
837-
<div
838-
class="i-hugeicons-arrow-right-01 ml-auto h-4 w-4 text-gray-400 transition-transform duration-200"
839-
:class="{ 'transform rotate-90': expandedItems[item.to] }"
840-
/>
841-
</button>
842823
</div>
843824

844825
<!-- Teleport dropdown for collapsed mode -->
845826
<Teleport to="body" v-if="expandedItems[item.to]">
846827
<div
847828
class="fixed z-50 rounded-lg bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-blue-gray-800 dark:ring-gray-700 sidebar-dropdown-menu"
848-
style="width: 200px; left: 80px;"
849-
:style="{ top: `${dropdownPositions[item.to] || 100}px` }"
829+
style="width: 200px;"
830+
:style="{
831+
top: `${dropdownPositions[item.to] || 100}px`,
832+
left: '64px',
833+
transform: 'translateX(0)'
834+
}"
850835
>
851836
<div class="px-2 py-1">
852837
<h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ item.text }}</h3>
@@ -881,77 +866,49 @@ const endAccordionTransition = (el: Element, done: () => void) => {
881866
<!-- Bottom section -->
882867
<li class="mt-auto pb-4">
883868
<div :class="isSidebarCollapsed ? 'flex flex-col items-center justify-center space-y-6' : 'flex items-center space-x-4'">
884-
<Tooltip v-if="isSidebarCollapsed" text="AI Buddy" position="right" :dark="isDark" :usePortal="true">
869+
<Tooltip text="AI Buddy" position="right" :dark="isDark" :usePortal="true">
885870
<RouterLink
886871
to="/buddy"
887872
class="sidebar-bottom-link"
888873
:class="{ 'active-bottom-link': route.path === '/buddy' }"
889874
>
890875
<div class="i-hugeicons-ai-chat-02 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
876+
<span v-if="!isSidebarCollapsed" class="ml-2 text-sm">AI Buddy</span>
891877
</RouterLink>
892878
</Tooltip>
893-
<RouterLink
894-
v-else
895-
to="/buddy"
896-
class="sidebar-bottom-link"
897-
:class="{ 'active-bottom-link': route.path === '/buddy' }"
898-
>
899-
<div class="i-hugeicons-ai-chat-02 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
900-
</RouterLink>
901879

902-
<Tooltip v-if="isSidebarCollapsed" text="Environment" position="right" :dark="isDark" :usePortal="true">
880+
<Tooltip text="Environment" position="right" :dark="isDark" :usePortal="true">
903881
<RouterLink
904882
to="/environment"
905883
class="sidebar-bottom-link"
906884
:class="{ 'active-bottom-link': route.path === '/environment' }"
907885
>
908886
<div class="i-hugeicons-key-01 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
887+
<span v-if="!isSidebarCollapsed" class="ml-2 text-sm">Environment</span>
909888
</RouterLink>
910889
</Tooltip>
911-
<RouterLink
912-
v-else
913-
to="/environment"
914-
class="sidebar-bottom-link"
915-
:class="{ 'active-bottom-link': route.path === '/environment' }"
916-
>
917-
<div class="i-hugeicons-key-01 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
918-
</RouterLink>
919890

920-
<Tooltip v-if="isSidebarCollapsed" text="Access Tokens" position="right" :dark="isDark" :usePortal="true">
891+
<Tooltip text="Access Tokens" position="right" :dark="isDark" :usePortal="true">
921892
<RouterLink
922893
to="/access-tokens"
923894
class="sidebar-bottom-link"
924895
:class="{ 'active-bottom-link': route.path === '/access-tokens' }"
925896
>
926897
<div class="i-hugeicons-shield-key h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
898+
<span v-if="!isSidebarCollapsed" class="ml-2 text-sm">Access Tokens</span>
927899
</RouterLink>
928900
</Tooltip>
929-
<RouterLink
930-
v-else
931-
to="/access-tokens"
932-
class="sidebar-bottom-link"
933-
:class="{ 'active-bottom-link': route.path === '/access-tokens' }"
934-
>
935-
<div class="i-hugeicons-shield-key h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
936-
</RouterLink>
937901

938-
<Tooltip v-if="isSidebarCollapsed" text="Settings" position="right" :dark="isDark" :usePortal="true">
902+
<Tooltip text="Settings" position="right" :dark="isDark" :usePortal="true">
939903
<RouterLink
940904
to="/settings/ai"
941905
class="sidebar-bottom-link"
942906
:class="{ 'active-bottom-link': route.path.startsWith('/settings/ai') }"
943907
>
944908
<div class="i-hugeicons-settings-02 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
909+
<span v-if="!isSidebarCollapsed" class="ml-2 text-sm">Settings</span>
945910
</RouterLink>
946911
</Tooltip>
947-
<RouterLink
948-
v-else
949-
to="/settings/ai"
950-
class="sidebar-bottom-link"
951-
:class="{ 'active-bottom-link': route.path.startsWith('/settings/ai') }"
952-
>
953-
<div class="i-hugeicons-settings-02 h-5 w-5 text-gray-400 transition-all duration-150 ease-in-out dark:text-gray-200 group-hover:text-blue-600" />
954-
</RouterLink>
955912
</div>
956913
</li>
957914
</ul>
@@ -976,8 +933,10 @@ const endAccordionTransition = (el: Element, done: () => void) => {
976933
/* When sidebar is collapsed, adjust links */
977934
:deep(.lg\:w-20) .sidebar-links {
978935
@apply justify-center px-0 rounded-lg;
979-
width: 40px;
936+
width: 32px;
937+
height: 32px;
980938
margin: 0 auto;
939+
padding: 0.375rem; /* 6px */
981940
}
982941
983942
/* Active state styling */
@@ -1060,10 +1019,15 @@ const endAccordionTransition = (el: Element, done: () => void) => {
10601019
10611020
/* Bottom links styling */
10621021
.sidebar-bottom-link {
1063-
@apply flex items-center justify-center p-1.5 text-gray-400 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100 rounded-lg;
1022+
@apply flex items-center p-1.5 text-gray-400 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-100 rounded-lg;
10641023
transition: all 0.2s ease;
1024+
}
1025+
1026+
:deep(.lg\:w-20) .sidebar-bottom-link {
1027+
@apply justify-center;
10651028
width: 32px;
10661029
height: 32px;
1030+
padding: 0.375rem; /* 6px */
10671031
}
10681032
10691033
.active-bottom-link div {
@@ -1124,4 +1088,21 @@ img.rounded-lg {
11241088
opacity: 0;
11251089
transform: translateY(-8px);
11261090
}
1091+
1092+
/* Dropdown menu styling */
1093+
.sidebar-dropdown-menu {
1094+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1095+
}
1096+
1097+
/* Ensure all items in collapsed sidebar are properly centered */
1098+
:deep(.lg\:w-20) .flex.flex-col.items-center button,
1099+
:deep(.lg\:w-20) .flex.flex-col.items-center a {
1100+
display: flex;
1101+
justify-content: center;
1102+
align-items: center;
1103+
width: 32px;
1104+
height: 32px;
1105+
padding: 0.375rem;
1106+
margin: 0 auto;
1107+
}
11271108
</style>

0 commit comments

Comments
 (0)