sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-21 08:09:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update settings nav

Browse Source
This commit is contained in:
Eduard Gert
2026-05-07 12:40:04 +02:00
parent a2be41caf8
commit 062a183e4e
13 changed files with 686 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/ui-wails/frontend/src/components/NavItem.tsx → client/ui-wails/frontend/src/components/CardNavItem.tsx
View File

@@ -9,18 +9,16 @@ type Props = HTMLMotionProps<"button"> & {
description?: string;
active?: boolean;
iconSize?: number;
iconBackground?: boolean;
};
export const NavItem = forwardRef<HTMLButtonElement, Props>(
function NavItem(
export const CardNavItem = forwardRef<HTMLButtonElement, Props>(
function CardNavItem(
{
icon: Icon,
title,
description,
active = false,
iconSize = 15,
iconBackground = true,
className,
type = "button",
...props
@@ -35,40 +33,26 @@ export const NavItem = forwardRef<HTMLButtonElement, Props>(
className={cn(
"w-full flex items-center gap-3 p-1.5 rounded-lg cursor-default outline-none text-left",
"transition-colors duration-150",
active
? "bg-nb-gray-930"
: "hover:bg-nb-gray-940",
active ? "bg-nb-gray-930" : "hover:bg-nb-gray-940",
className,
)}
{...props}
>
{iconBackground ? (
<div
className={cn(
"h-9 w-9 rounded-md flex items-center justify-center shrink-0",
"transition-colors duration-150",
active ? "bg-nb-gray-800" : "bg-nb-gray-920",
)}
>
<Icon
size={iconSize}
className={cn(
"transition-colors duration-150",
active
? "text-nb-gray-200"
: "text-nb-gray-400",
)}
/>
</div>
) : (
<div
className={cn(
"h-9 w-9 rounded-md flex items-center justify-center shrink-0",
"transition-colors duration-150",
active ? "bg-nb-gray-800" : "bg-nb-gray-920",
)}
>
<Icon
size={iconSize}
className={cn(
"shrink-0 ml-2 transition-colors duration-150",
"transition-colors duration-150",
active ? "text-nb-gray-200" : "text-nb-gray-400",
)}
/>
)}
</div>
<div className={"min-w-0"}>
<h2
className={cn(

87
client/ui-wails/frontend/src/components/VerticalTabs.tsx Normal file
View File

@@ -0,0 +1,87 @@
import { ComponentType, forwardRef } from "react";
import * as Tabs from "@radix-ui/react-tabs";
import { LucideProps } from "lucide-react";
import { cn } from "@/lib/cn";
const Root = forwardRef<
HTMLDivElement,
Omit<Tabs.TabsProps, "orientation">
>(function VerticalTabsRoot({ className, ...props }, ref) {
return (
<Tabs.Root
ref={ref}
orientation={"vertical"}
className={cn("flex flex-1 min-h-0 gap-4", className)}
{...props}
/>
);
});
const List = forwardRef<HTMLDivElement, Tabs.TabsListProps>(
function VerticalTabsList({ className, ...props }, ref) {
return (
<Tabs.List
ref={ref}
className={cn("w-full flex flex-col gap-1", className)}
{...props}
/>
);
},
);
type TriggerProps = Tabs.TabsTriggerProps & {
icon: ComponentType<LucideProps>;
title: string;
iconSize?: number;
};
const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
function VerticalTabsTrigger(
{ icon: Icon, title, iconSize = 16, className, ...props },
ref,
) {
return (
<Tabs.Trigger
ref={ref}
className={cn(
"group w-full flex items-center gap-3 py-2.5 px-2 rounded-lg cursor-default outline-none text-left",
"transition-colors duration-150",
"data-[state=active]:bg-nb-gray-930",
"data-[state=inactive]:hover:bg-nb-gray-935",
className,
)}
{...props}
>
<Icon
size={iconSize}
className={cn(
"shrink-0 ml-2 transition-colors duration-150",
"text-nb-gray-400 group-data-[state=active]:text-nb-gray-100",
)}
/>
<h2
className={cn(
"font-medium text-sm truncate min-w-0 transition-colors duration-150",
"text-nb-gray-400 group-data-[state=active]:text-nb-gray-100",
)}
>
{title}
</h2>
</Tabs.Trigger>
);
},
);
const Content = forwardRef<HTMLDivElement, Tabs.TabsContentProps>(
function VerticalTabsContent({ className, ...props }, ref) {
return (
<Tabs.Content
ref={ref}
className={cn("outline-none", className)}
{...props}
/>
);
},
);
export const VerticalTabs = Object.assign(Root, { List, Trigger, Content });