diff options
| -rw-r--r-- | packages/app/src/pages/layout/sidebar-workspace.tsx | 20 |
1 files changed, 13 insertions, 7 deletions
diff --git a/packages/app/src/pages/layout/sidebar-workspace.tsx b/packages/app/src/pages/layout/sidebar-workspace.tsx index 44f4b3530..d4ada4f85 100644 --- a/packages/app/src/pages/layout/sidebar-workspace.tsx +++ b/packages/app/src/pages/layout/sidebar-workspace.tsx @@ -167,11 +167,9 @@ export const SortableWorkspace = (props: { openOnDblClick={false} /> </Show> - <Icon - name={open() ? "chevron-down" : "chevron-right"} - size="small" - class="shrink-0 text-icon-base opacity-0 transition-opacity group-hover/workspace:opacity-100 group-focus-within/workspace:opacity-100" - /> + <div class="flex items-center justify-center shrink-0 overflow-hidden w-0 opacity-0 transition-all duration-200 group-hover/workspace:w-3.5 group-hover/workspace:opacity-100 group-focus-within/workspace:w-3.5 group-focus-within/workspace:opacity-100"> + <Icon name={open() ? "chevron-down" : "chevron-right"} size="small" class="text-icon-base" /> + </div> </div> ) @@ -196,7 +194,9 @@ export const SortableWorkspace = (props: { when={workspaceEditActive()} fallback={ <Collapsible.Trigger - class="flex items-center justify-between w-full pl-2 pr-16 py-1.5 rounded-md hover:bg-surface-raised-base-hover" + class={`flex items-center justify-between w-full pl-2 py-1.5 rounded-md hover:bg-surface-raised-base-hover transition-[padding] duration-200 ${ + menu.open ? "pr-16" : "pr-2" + } group-hover/workspace:pr-16 group-focus-within/workspace:pr-16`} data-action="workspace-toggle" data-workspace={base64Encode(props.directory)} > @@ -204,7 +204,13 @@ export const SortableWorkspace = (props: { </Collapsible.Trigger> } > - <div class="flex items-center justify-between w-full pl-2 pr-16 py-1.5 rounded-md">{header()}</div> + <div + class={`flex items-center justify-between w-full pl-2 py-1.5 rounded-md transition-[padding] duration-200 ${ + menu.open ? "pr-16" : "pr-2" + } group-hover/workspace:pr-16 group-focus-within/workspace:pr-16`} + > + {header()} + </div> </Show> <div class="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-0.5 transition-opacity" |