apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-08 20:25:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: add isActive prop to SidebarButton and NavSection for improved active state management; update styles accordingly

Browse source
This commit is contained in:
Anish Sarkar 2026-03-22 00:01:50 +05:30
parent 020d806b1f
commit 44f59bfb61
3 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
surfsense_web/components/layout/ui/sidebar/NavSection.tsx
View file

@ -97,6 +97,7 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
label={item.title}
onClick={() => onItemClick?.(item)}
isCollapsed={isCollapsed}
isActive={item.isActive}
badge={item.badge}
collapsedOverlay={<CollapsedOverlay item={item} />}
expandedIconNode={

8
surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx
View file

@ -10,6 +10,7 @@ interface SidebarButtonProps {
label: string;
onClick?: () => void;
isCollapsed?: boolean;
isActive?: boolean;
badge?: React.ReactNode;
/** Overlay in the top-right corner of the collapsed icon (e.g. status badge) */
collapsedOverlay?: React.ReactNode;
@ -37,12 +38,15 @@ export function SidebarButton({
label,
onClick,
isCollapsed = false,
isActive = false,
badge,
collapsedOverlay,
expandedIconNode,
className,
buttonProps,
}: SidebarButtonProps) {
const activeClassName = "bg-accent text-accent-foreground";
if (isCollapsed) {
return (
<Tooltip>
@ -50,7 +54,7 @@ export function SidebarButton({
<button
type="button"
onClick={onClick}
className={cn(collapsedClassName, className)}
className={cn(collapsedClassName, isActive && activeClassName, className)}
{...buttonProps}
>
<Icon className="h-4 w-4" />
@ -70,7 +74,7 @@ export function SidebarButton({
<button
type="button"
onClick={onClick}
className={cn(expandedClassName, className)}
className={cn(expandedClassName, isActive && activeClassName, className)}
{...buttonProps}
>
{expandedIconNode ?? <Icon className="h-4 w-4 shrink-0" />}

3
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -88,8 +88,7 @@ function HeroCarouselCard({
return (
<>
<div className="rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900">
<div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
<div className="overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-xl sm:rounded-3xl dark:border-neutral-700/60 dark:bg-neutral-900"> <div className="flex items-center gap-3 border-b border-neutral-200/60 px-4 py-3 sm:px-6 sm:py-4 dark:border-neutral-700/60">
<div className="min-w-0">
<h3 className="truncate text-base font-semibold text-neutral-900 sm:text-xl dark:text-white">
{title}