apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-18 23:11:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: add check icon to active items in sidebar navigation and user profile

Browse source 
- Introduced a Check icon to visually indicate active items in the NavSection and SidebarUserProfile components.
- Updated styling to ensure the Check icon appears correctly without altering the background color for active items.
- Enhanced user experience by providing a clear visual cue for selected themes and languages in the sidebar.
This commit is contained in:
Anish Sarkar 2026-01-24 20:05:42 +05:30
parent ce9e3b01b7
commit eaecc091e3
2 changed files with 45 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
"use client"; "use client";
import { Check } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { NavItem } from "../../types/layout.types"; import type { NavItem } from "../../types/layout.types";
@ -34,12 +35,14 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
className={cn( className={cn(
"relative flex h-10 w-10 items-center justify-center rounded-md transition-colors", "relative flex h-10 w-10 items-center justify-center rounded-md transition-colors",
"hover:bg-accent hover:text-accent-foreground", "hover:bg-accent hover:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
item.isActive && "bg-accent text-accent-foreground"
)} )}
{...joyrideAttr} {...joyrideAttr}
> >
<Icon className="h-4 w-4" /> <Icon className="h-4 w-4" />
{item.isActive && (
<Check className="absolute bottom-0.5 right-0.5 h-3 w-3 text-primary" />
)}
{item.badge && ( {item.badge && (
<span className="absolute top-0.5 right-0.5 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-red-500 text-white text-[9px] font-medium"> <span className="absolute top-0.5 right-0.5 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-red-500 text-white text-[9px] font-medium">
{item.badge} {item.badge}
@ -64,13 +67,15 @@ export function NavSection({ items, onItemClick, isCollapsed = false }: NavSecti
className={cn( className={cn(
"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left", "flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
"hover:bg-accent hover:text-accent-foreground", "hover:bg-accent hover:text-accent-foreground",
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
item.isActive && "bg-accent text-accent-foreground"
)} )}
{...joyrideAttr} {...joyrideAttr}
> >
<Icon className="h-4 w-4 shrink-0" /> <Icon className="h-4 w-4 shrink-0" />
<span className="flex-1 truncate">{item.title}</span> <span className="flex-1 truncate">{item.title}</span>
{item.isActive && (
<Check className="h-4 w-4 shrink-0 text-primary" />
)}
{item.badge && ( {item.badge && (
<span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium"> <span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
{item.badge} {item.badge}

60
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react"; import { Check, ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { import {
DropdownMenu, DropdownMenu,
@ -197,11 +197,14 @@ export function SidebarUserProfile({
className={cn( className={cn(
"mb-1 last:mb-0 transition-all", "mb-1 last:mb-0 transition-all",
"hover:bg-accent/50", "hover:bg-accent/50",
isSelected && "bg-accent/80" isSelected && "text-primary"
)} )}
> >
<Icon className="mr-2 h-4 w-4" /> <Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span> <span className="flex-1">{t(themeOption.value)}</span>
{isSelected && (
<Check className="h-4 w-4 shrink-0" />
)}
</DropdownMenuItem> </DropdownMenuItem>
); );
})} })}
@ -226,11 +229,14 @@ export function SidebarUserProfile({
className={cn( className={cn(
"mb-1 last:mb-0 transition-all", "mb-1 last:mb-0 transition-all",
"hover:bg-accent/50", "hover:bg-accent/50",
isSelected && "bg-accent/80" isSelected && "text-primary"
)} )}
> >
<span className="mr-2">{language.flag}</span> <span className="mr-2">{language.flag}</span>
<span className="flex-1">{language.name}</span> <span className="flex-1">{language.name}</span>
{isSelected && (
<Check className="h-4 w-4 shrink-0" />
)}
</DropdownMenuItem> </DropdownMenuItem>
); );
})} })}
@ -302,26 +308,29 @@ export function SidebarUserProfile({
{t("theme")} {t("theme")}
</DropdownMenuSubTrigger> </DropdownMenuSubTrigger>
<DropdownMenuPortal> <DropdownMenuPortal>
<DropdownMenuSubContent className="gap-1"> <DropdownMenuSubContent className="gap-1">
{THEMES.map((themeOption) => { {THEMES.map((themeOption) => {
const Icon = themeOption.icon; const Icon = themeOption.icon;
const isSelected = theme === themeOption.value; const isSelected = theme === themeOption.value;
return ( return (
<DropdownMenuItem <DropdownMenuItem
key={themeOption.value} key={themeOption.value}
onClick={() => handleThemeChange(themeOption.value)} onClick={() => handleThemeChange(themeOption.value)}
className={cn( className={cn(
"mb-1 last:mb-0 transition-all", "mb-1 last:mb-0 transition-all",
"hover:bg-accent/50", "hover:bg-accent/50",
isSelected && "bg-accent/80" isSelected && "text-primary"
)} )}
> >
<Icon className="mr-2 h-4 w-4" /> <Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span> <span className="flex-1">{t(themeOption.value)}</span>
</DropdownMenuItem> {isSelected && (
); <Check className="h-4 w-4 shrink-0" />
})} )}
</DropdownMenuSubContent> </DropdownMenuItem>
);
})}
</DropdownMenuSubContent>
</DropdownMenuPortal> </DropdownMenuPortal>
</DropdownMenuSub> </DropdownMenuSub>
)} )}
@ -342,11 +351,14 @@ export function SidebarUserProfile({
className={cn( className={cn(
"mb-1 last:mb-0 transition-all", "mb-1 last:mb-0 transition-all",
"hover:bg-accent/50", "hover:bg-accent/50",
isSelected && "bg-accent/80" isSelected && "text-primary"
)} )}
> >
<span className="mr-2">{language.flag}</span> <span className="mr-2">{language.flag}</span>
<span className="flex-1">{language.name}</span> <span className="flex-1">{language.name}</span>
{isSelected && (
<Check className="h-4 w-4 shrink-0" />
)}
</DropdownMenuItem> </DropdownMenuItem>
); );
})} })}