yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

sidebarListItem: fixed active states to be displayed in ui

Browse Source
This commit is contained in:
Timo
2025-04-29 16:41:10 +02:00
committed by Johannes Kirschbauer
parent 34d4cc9b4f
commit 7dbc9b0593
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
View File

@@ -1,4 +1,4 @@
.sidebar__list__item { .sidebar__list__link {
position: relative; position: relative;
cursor: theme(cursor.pointer); cursor: theme(cursor.pointer);
@@ -19,12 +19,12 @@
&:hover:after { &:hover:after {
background: var(--clr-bg-inv-acc-2); background: var(--clr-bg-inv-acc-2);
transform: scale(theme(scale.100)); transform: scale(theme(scale.100));
transition: transform 0.24s ease-in-out; transition: transform 0.32s ease-in-out;
} }
&:active { &:active {
transform: scale(0.99); transform: scale(0.99);
transition: transform 0.08s ease-in-out; transition: transform 0.12s ease-in-out;
} }
&:active:after { &:active:after {
@@ -37,7 +37,13 @@
position: relative; position: relative;
z-index: 20; z-index: 20;
display: block; display: block;
padding: theme(padding.3); padding: theme(padding.2) theme(padding.3);
}
.sidebar__list__link.active {
&:after {
background: var(--clr-bg-inv-acc-3);
}
} }
.sidebar__list__content { .sidebar__list__content {

2
pkgs/webview-ui/app/src/components/Sidebar/index.tsx
View File

@@ -81,7 +81,7 @@ export const Sidebar = (props: RouteSectionProps) => {
title={route.label} title={route.label}
icon={route.icon || "Paperclip"} icon={route.icon || "Paperclip"}
> >
<ul> <ul class="flex flex-col gap-y-0.5">
<For each={children().filter((r) => !r.hidden)}> <For each={children().filter((r) => !r.hidden)}>
{(child) => ( {(child) => (
<SidebarListItem <SidebarListItem

2
pkgs/webview-ui/app/src/index.css
View File

@@ -30,7 +30,7 @@
:root { :root {
--clr-bg-def-1: theme(colors.white); --clr-bg-def-1: theme(colors.white);
--clr-bg-def-2: theme(colors.secondary.50); --clr-bg-def-2: theme(colors.primary.50);
--clr-bg-def-3: theme(colors.secondary.100); --clr-bg-def-3: theme(colors.secondary.100);
--clr-bg-def-4: theme(colors.secondary.200); --clr-bg-def-4: theme(colors.secondary.200);
--clr-bg-def-5: theme(colors.secondary.300); --clr-bg-def-5: theme(colors.secondary.300);