mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-10-31 07:44:21 +00:00
feat(sidebar): sidebar with new functionalities (#7018)
This commit is contained in:
Pablo Lara authored and GitHub committed
1 parent
8db442d8ba
commit
bdc759d34c
52 files changed
+2438
-2018
No files matched your search
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
||||
|
||||
const AvatarImage = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
||||
|
||||
const AvatarFallback = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"bg-muted flex h-full w-full items-center justify-center rounded-full",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
||||
|
||||
export { Avatar, AvatarFallback, AvatarImage };
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-default-100 text-default-900 shadow-sm dark:bg-prowler-blue-800 font-bold",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground text-default-600 hover:font-bold hover:bg-default-100 dark:hover:bg-prowler-blue-800",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
||||
|
||||
const Collapsible = CollapsiblePrimitive.Root;
|
||||
|
||||
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
||||
|
||||
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
||||
|
||||
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Suspense, use } from "react";
|
||||
|
||||
import { getProfileInfo } from "@/actions/users/users";
|
||||
|
||||
import { Navbar } from "../nav-bar/navbar";
|
||||
import { SkeletonContentLayout } from "./skeleton-content-layout";
|
||||
interface ContentLayoutProps {
|
||||
title: string;
|
||||
icon: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function ContentLayout({ title, icon, children }: ContentLayoutProps) {
|
||||
const user = use(getProfileInfo());
|
||||
|
||||
return (
|
||||
<>
|
||||
<Suspense fallback={<SkeletonContentLayout />}>
|
||||
<Navbar title={title} icon={icon} user={user} />
|
||||
</Suspense>
|
||||
<div className="px-6 py-4 sm:px-8 xl:px-10">{children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Skeleton } from "@nextui-org/react";
|
||||
|
||||
export const SkeletonContentLayout = () => {
|
||||
return (
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Theme Switch Skeleton */}
|
||||
<Skeleton className="h-8 w-8 rounded-full dark:bg-prowler-blue-800">
|
||||
<div className="h-8 w-8 bg-default-200"></div>
|
||||
</Skeleton>
|
||||
|
||||
{/* User Avatar Skeleton */}
|
||||
<Skeleton className="h-10 w-10 rounded-full dark:bg-prowler-blue-800">
|
||||
<div className="h-10 w-10 bg-default-200"></div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,208 @@
|
||||
"use client";
|
||||
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
DotFilledIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"hover:text-accent-foreground focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-default-600 outline-none hover:bg-default-100 hover:font-bold",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
));
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md bg-background/95 p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-prowler-blue-800",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md bg-background/95 p-1 shadow-md dark:bg-prowler-blue-800",
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
));
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm text-default-600 subpixel-antialiased outline-none transition-colors hover:bg-default-100 hover:[font-variation-settings:'wght'_600] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-prowler-blue-400",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm text-default-600 outline-none transition-colors hover:bg-default-100 hover:font-bold data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
));
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<DotFilledIcon className="h-4 w-4 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
));
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"-mx-1 my-1 h-px bg-default-200 dark:bg-default-700",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Divider } from "@nextui-org/react";
|
||||
import React from "react";
|
||||
|
||||
interface HeaderProps {
|
||||
title: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const Header: React.FC<HeaderProps> = ({ title, icon }) => {
|
||||
return (
|
||||
<>
|
||||
<header className="flex items-center gap-3 py-4">
|
||||
<Icon className="text-default-500" height={40} icon={icon} width={40} />
|
||||
<h1 className="text-2xl font-light text-default-700">{title}</h1>
|
||||
</header>
|
||||
<Divider className="mb-4" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -2,11 +2,12 @@ export * from "./action-card/ActionCard";
|
||||
export * from "./alert/Alert";
|
||||
export * from "./alert-dialog/AlertDialog";
|
||||
export * from "./chart/Chart";
|
||||
export * from "./content-layout/content-layout";
|
||||
export * from "./dialog/dialog";
|
||||
export * from "./dropdown/Dropdown";
|
||||
export * from "./headers/header";
|
||||
export * from "./headers/navigation-header";
|
||||
export * from "./label/Label";
|
||||
export * from "./main-layout/main-layout";
|
||||
export * from "./select/Select";
|
||||
export * from "./sidebar";
|
||||
export * from "./toast";
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { useSidebar } from "@/hooks/use-sidebar";
|
||||
import { useStore } from "@/hooks/use-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { Sidebar } from "../sidebar/sidebar";
|
||||
export default function MainLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const sidebar = useStore(useSidebar, (x) => x);
|
||||
if (!sidebar) return null;
|
||||
const { getOpenState, settings } = sidebar;
|
||||
return (
|
||||
<div className="flex h-dvh items-center justify-center overflow-hidden">
|
||||
<Sidebar />
|
||||
<main
|
||||
className={cn(
|
||||
"no-scrollbar mb-auto h-full flex-1 flex-col overflow-y-auto transition-[margin-left] duration-300 ease-in-out",
|
||||
!settings.disabled && (!getOpenState() ? "lg:ml-[90px]" : "lg:ml-72"),
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Icon } from "@iconify/react";
|
||||
|
||||
import { ThemeSwitch } from "@/components/ThemeSwitch";
|
||||
import { UserProfileProps } from "@/types";
|
||||
|
||||
import { SheetMenu } from "../sidebar/sheet-menu";
|
||||
import { UserNav } from "../user-nav/user-nav";
|
||||
interface NavbarProps {
|
||||
title: string;
|
||||
icon: string;
|
||||
user: UserProfileProps;
|
||||
}
|
||||
|
||||
export function Navbar({ title, icon, user }: NavbarProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-10 w-full bg-background/95 shadow backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:shadow-primary">
|
||||
<div className="mx-4 flex h-14 items-center sm:mx-8">
|
||||
<div className="flex items-center space-x-2">
|
||||
<SheetMenu />
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
height={24}
|
||||
icon={icon}
|
||||
width={24}
|
||||
/>
|
||||
<h1 className="text-sm font-bold text-default-700">{title}</h1>
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-end gap-3">
|
||||
<ThemeSwitch />
|
||||
<UserNav user={user} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("relative overflow-hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
));
|
||||
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
||||
|
||||
const ScrollBar = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
ref={ref}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
));
|
||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
||||
|
||||
export { ScrollArea, ScrollBar };
|
||||
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible/collapsible";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { CollapseMenuButtonProps } from "@/types";
|
||||
|
||||
import { Button } from "../button/button";
|
||||
|
||||
export const CollapseMenuButton = ({
|
||||
icon: Icon,
|
||||
label,
|
||||
submenus,
|
||||
defaultOpen,
|
||||
isOpen,
|
||||
}: CollapseMenuButtonProps) => {
|
||||
const pathname = usePathname();
|
||||
const isSubmenuActive = submenus.some((submenu) =>
|
||||
submenu.active === undefined ? submenu.href === pathname : submenu.active,
|
||||
);
|
||||
const [isCollapsed, setIsCollapsed] = useState<boolean>(
|
||||
isSubmenuActive || defaultOpen,
|
||||
);
|
||||
|
||||
return isOpen ? (
|
||||
<Collapsible
|
||||
open={isCollapsed}
|
||||
onOpenChange={setIsCollapsed}
|
||||
defaultOpen={defaultOpen}
|
||||
className="w-full"
|
||||
>
|
||||
<CollapsibleTrigger
|
||||
className="[&[data-state=open]>div>div>svg]:rotate-180"
|
||||
asChild
|
||||
>
|
||||
<Button
|
||||
variant={isSubmenuActive ? "secondary" : "ghost"}
|
||||
className="mb-1 h-7 w-full justify-start"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-4">
|
||||
<Icon size={18} />
|
||||
</span>
|
||||
<p
|
||||
className={cn(
|
||||
"max-w-[150px] truncate",
|
||||
isOpen
|
||||
? "translate-x-0 opacity-100"
|
||||
: "-translate-x-96 opacity-0",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"whitespace-nowrap",
|
||||
isOpen
|
||||
? "translate-x-0 opacity-100"
|
||||
: "-translate-x-96 opacity-0",
|
||||
)}
|
||||
>
|
||||
<ChevronDown
|
||||
size={18}
|
||||
className="transition-transform duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
|
||||
{submenus.map(
|
||||
({ href, label, active, icon: SubIcon, target }, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant={
|
||||
(active === undefined && pathname === href) || active
|
||||
? "secondary"
|
||||
: "ghost"
|
||||
}
|
||||
className="ml-4 h-8 w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={href} target={target} className="flex items-center">
|
||||
<div className="mr-4 h-full border-l border-default-200"></div>
|
||||
<span className="mr-2">
|
||||
<SubIcon size={16} />
|
||||
</span>
|
||||
<p
|
||||
className={cn(
|
||||
"max-w-[170px] truncate",
|
||||
isOpen
|
||||
? "translate-x-0 opacity-100"
|
||||
: "-translate-x-96 opacity-0",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</Link>
|
||||
</Button>
|
||||
),
|
||||
)}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
) : (
|
||||
<DropdownMenu>
|
||||
<TooltipProvider disableHoverableContent>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant={isSubmenuActive ? "secondary" : "ghost"}
|
||||
className="mb-1 h-10 w-full justify-start"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<span className={cn(isOpen === false ? "" : "mr-4")}>
|
||||
<Icon size={18} />
|
||||
</span>
|
||||
<p
|
||||
className={cn(
|
||||
"max-w-[200px] truncate",
|
||||
isOpen === false ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" align="start" alignOffset={2}>
|
||||
{label}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<DropdownMenuContent side="right" sideOffset={25} align="start">
|
||||
<DropdownMenuLabel className="max-w-[190px] truncate">
|
||||
{label}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{submenus.map(({ href, label, active, icon: SubIcon }, index) => (
|
||||
<DropdownMenuItem key={index} asChild>
|
||||
<Link
|
||||
className={`flex cursor-pointer items-center gap-2 ${
|
||||
((active === undefined && pathname === href) || active) &&
|
||||
"bg-secondary"
|
||||
}`}
|
||||
href={href}
|
||||
>
|
||||
<SubIcon size={16} />
|
||||
<p className="max-w-[180px] truncate">{label}</p>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
<DropdownMenuArrow className="fill-border" />
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,5 @@
|
||||
export * from "./collapse-menu-button";
|
||||
export * from "./menu";
|
||||
export * from "./sheet-menu";
|
||||
export * from "./sidebar";
|
||||
export * from "./sidebar-items";
|
||||
export * from "./sidebar-wrap";
|
||||
export * from "./skeleton-profile";
|
||||
export * from "./team-avatar";
|
||||
export * from "./user-avatar";
|
||||
export * from "./sidebar-toggle";
|
||||
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { Ellipsis, LogOut } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { logOut } from "@/actions/auth";
|
||||
import { AddIcon } from "@/components/icons";
|
||||
import { CollapseMenuButton } from "@/components/ui/sidebar/collapse-menu-button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip/tooltip";
|
||||
import { getMenuList } from "@/lib/menu-list";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { Button } from "../button/button";
|
||||
import { CustomButton } from "../custom/custom-button";
|
||||
import { ScrollArea } from "../scroll-area/scroll-area";
|
||||
|
||||
export const Menu = ({ isOpen }: { isOpen: boolean }) => {
|
||||
const pathname = usePathname();
|
||||
const menuList = getMenuList(pathname);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2">
|
||||
<CustomButton
|
||||
asLink="/scans"
|
||||
className={cn(isOpen ? "w-full" : "w-fit")}
|
||||
ariaLabel="Launch Scan"
|
||||
variant="solid"
|
||||
color="action"
|
||||
size="md"
|
||||
endContent={isOpen ? <AddIcon size={20} /> : null}
|
||||
>
|
||||
{isOpen ? "Launch Scan" : <AddIcon size={20} />}
|
||||
</CustomButton>
|
||||
</div>
|
||||
<ScrollArea className="[&>div>div[style]]:!block">
|
||||
<nav className="mt-2 h-full w-full lg:mt-6">
|
||||
<ul className="flex min-h-[calc(100vh-16px-60px-40px-16px-32px-40px-32px)] flex-col items-start space-y-1 px-2 lg:min-h-[calc(100vh-16px-60px-40px-16px-64px-16px)]">
|
||||
{menuList.map(({ groupLabel, menus }, index) => (
|
||||
<li
|
||||
className={cn(
|
||||
"w-full",
|
||||
groupLabel ? "pt-2" : "",
|
||||
"last:!mt-auto",
|
||||
)}
|
||||
key={index}
|
||||
>
|
||||
{(isOpen && groupLabel) || isOpen === undefined ? (
|
||||
<p className="text-muted-foreground max-w-[248px] truncate px-4 pb-2 text-xs font-normal">
|
||||
{groupLabel}
|
||||
</p>
|
||||
) : !isOpen && isOpen !== undefined && groupLabel ? (
|
||||
<TooltipProvider>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger className="w-full">
|
||||
<div className="flex w-full items-center justify-center">
|
||||
<Ellipsis className="h-5 w-5" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="z-100" side="right">
|
||||
<p>{groupLabel}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
) : (
|
||||
<p className="pb-2"></p>
|
||||
)}
|
||||
{menus.map(
|
||||
(
|
||||
{ href, label, icon: Icon, active, submenus, defaultOpen },
|
||||
index,
|
||||
) =>
|
||||
!submenus || submenus.length === 0 ? (
|
||||
<div className="w-full" key={index}>
|
||||
<TooltipProvider disableHoverableContent>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant={
|
||||
(active === undefined &&
|
||||
pathname.startsWith(href)) ||
|
||||
active
|
||||
? "secondary"
|
||||
: "ghost"
|
||||
}
|
||||
className="mb-1 h-8 w-full justify-start"
|
||||
asChild
|
||||
>
|
||||
<Link href={href}>
|
||||
<span
|
||||
className={cn(
|
||||
isOpen === false ? "" : "mr-4",
|
||||
)}
|
||||
>
|
||||
<Icon size={18} />
|
||||
</span>
|
||||
<p
|
||||
className={cn(
|
||||
"max-w-[200px] truncate",
|
||||
isOpen === false
|
||||
? "-translate-x-96 opacity-0"
|
||||
: "translate-x-0 opacity-100",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
{isOpen === false && (
|
||||
<TooltipContent side="right">
|
||||
{label}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full" key={index}>
|
||||
<CollapseMenuButton
|
||||
icon={Icon}
|
||||
label={label}
|
||||
submenus={submenus}
|
||||
isOpen={isOpen}
|
||||
defaultOpen={defaultOpen ?? false}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</ScrollArea>
|
||||
<div className="flex w-full grow items-end">
|
||||
<TooltipProvider disableHoverableContent>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
onClick={() => logOut()}
|
||||
variant="outline"
|
||||
className="mt-5 h-10 w-full justify-center"
|
||||
>
|
||||
<span className={cn(isOpen === false ? "" : "mr-4")}>
|
||||
<LogOut size={18} />
|
||||
</span>
|
||||
<p
|
||||
className={cn(
|
||||
"whitespace-nowrap",
|
||||
isOpen === false ? "hidden opacity-0" : "opacity-100",
|
||||
)}
|
||||
>
|
||||
Sign out
|
||||
</p>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
{isOpen === false && (
|
||||
<TooltipContent side="right">Sign out</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
import { MenuIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { ProwlerExtended } from "@/components/icons";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Menu } from "@/components/ui/sidebar/menu";
|
||||
|
||||
import { Button } from "../button/button";
|
||||
|
||||
export function SheetMenu() {
|
||||
return (
|
||||
<Sheet>
|
||||
<SheetTrigger className="lg:hidden" asChild>
|
||||
<Button className="h-8" variant="outline" size="icon">
|
||||
<MenuIcon size={20} />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
className="flex h-full flex-col px-3 dark:bg-prowler-theme-midnight sm:w-72"
|
||||
side="left"
|
||||
>
|
||||
<SheetHeader>
|
||||
<Button
|
||||
className="flex items-center justify-center pb-2 pt-1"
|
||||
variant="link"
|
||||
asChild
|
||||
>
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<ProwlerExtended />
|
||||
</Link>
|
||||
</Button>
|
||||
</SheetHeader>
|
||||
<Menu isOpen />
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
@@ -1,531 +0,0 @@
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Chip } from "@nextui-org/react";
|
||||
|
||||
import { SidebarItem, SidebarItemType } from "./sidebar";
|
||||
import { TeamAvatar } from "./team-avatar";
|
||||
|
||||
/**
|
||||
* Please check the https://nextui.org/docs/guide/routing to have a seamless router integration
|
||||
*/
|
||||
|
||||
export const items: SidebarItem[] = [
|
||||
{
|
||||
key: "home",
|
||||
href: "#",
|
||||
icon: "solar:home-2-linear",
|
||||
title: "Home",
|
||||
},
|
||||
{
|
||||
key: "projects",
|
||||
href: "#",
|
||||
icon: "solar:widget-2-outline",
|
||||
title: "Projects",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-default-400"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "invitations",
|
||||
href: "#",
|
||||
icon: "solar:checklist-minimalistic-outline",
|
||||
title: "Invitations",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-default-400"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "team",
|
||||
href: "#",
|
||||
icon: "solar:users-group-two-rounded-outline",
|
||||
title: "Team",
|
||||
},
|
||||
{
|
||||
key: "tracker",
|
||||
href: "#",
|
||||
icon: "solar:sort-by-time-linear",
|
||||
title: "Tracker",
|
||||
endContent: (
|
||||
<Chip size="sm" variant="flat">
|
||||
New
|
||||
</Chip>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "analytics",
|
||||
href: "#",
|
||||
icon: "solar:chart-outline",
|
||||
title: "Analytics",
|
||||
},
|
||||
{
|
||||
key: "perks",
|
||||
href: "#",
|
||||
icon: "solar:gift-linear",
|
||||
title: "Perks",
|
||||
endContent: (
|
||||
<Chip size="sm" variant="flat">
|
||||
3
|
||||
</Chip>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "expenses",
|
||||
href: "#",
|
||||
icon: "solar:bill-list-outline",
|
||||
title: "Expenses",
|
||||
},
|
||||
{
|
||||
key: "settings",
|
||||
href: "#",
|
||||
icon: "solar:settings-outline",
|
||||
title: "Settings",
|
||||
},
|
||||
];
|
||||
|
||||
export const sectionItems: SidebarItem[] = [
|
||||
// {
|
||||
// key: "dashboards",
|
||||
// title: "Dashboard",
|
||||
// items: [
|
||||
// {
|
||||
// key: "overview",
|
||||
// href: "/",
|
||||
// icon: "solar:pie-chart-2-outline",
|
||||
// title: "Overview",
|
||||
// },
|
||||
// {
|
||||
// key: "projects",
|
||||
// href: "#",
|
||||
// icon: "solar:widget-2-outline",
|
||||
// title: "Projects",
|
||||
// endContent: (
|
||||
// <Icon
|
||||
// className="text-default-400"
|
||||
// icon="solar:add-circle-line-duotone"
|
||||
// width={24}
|
||||
// />
|
||||
// ),
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
|
||||
{
|
||||
key: "analytics",
|
||||
title: "Analytics",
|
||||
items: [
|
||||
{
|
||||
key: "overview",
|
||||
href: "/",
|
||||
icon: "solar:pie-chart-2-outline",
|
||||
title: "Overview",
|
||||
},
|
||||
{
|
||||
key: "compliance",
|
||||
href: "/compliance",
|
||||
icon: "fluent-mdl2:compliance-audit",
|
||||
title: "Compliance",
|
||||
// endContent: (
|
||||
// <Chip size="sm" variant="flat">
|
||||
// New
|
||||
// </Chip>
|
||||
// ),
|
||||
},
|
||||
// {
|
||||
// key: "services",
|
||||
// href: "/services",
|
||||
// icon: "material-symbols:linked-services-outline",
|
||||
// title: "Services",
|
||||
// },
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
key: "issues",
|
||||
title: "Issues",
|
||||
items: [
|
||||
{
|
||||
key: "cloud-misconfigurations",
|
||||
href: "/findings?filter[status__in]=FAIL&sort=severity,-inserted_at",
|
||||
icon: "solar:danger-triangle-linear",
|
||||
title: "Cloud Misconfigurations",
|
||||
},
|
||||
{
|
||||
key: "iam-issues",
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=aws%2Cazure%2Cgcp%2Ckubernetes&filter[service__in]=iam%2Crbac&sort=-inserted_at",
|
||||
icon: "solar:shield-user-linear",
|
||||
title: "IAM Issues",
|
||||
},
|
||||
{
|
||||
key: "aws-findings",
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=aws&sort=severity,-inserted_at",
|
||||
icon: "ri:amazon-line",
|
||||
title: "AWS Top Failed Findings",
|
||||
},
|
||||
{
|
||||
key: "azure-findings",
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=azure&sort=severity,-inserted_at",
|
||||
icon: "ri:microsoft-line",
|
||||
title: "Azure Top Failed Findings",
|
||||
},
|
||||
{
|
||||
key: "gcp-findings",
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=gcp&sort=severity,-inserted_at",
|
||||
icon: "ri:google-line",
|
||||
title: "GCP Top Failed Findings",
|
||||
},
|
||||
{
|
||||
key: "kubernetes-findings",
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=kubernetes&sort=severity,-inserted_at",
|
||||
icon: "ri:steering-2-line",
|
||||
title: "Kubernetes Top Failed Findings",
|
||||
},
|
||||
{
|
||||
key: "all-findings",
|
||||
href: "/findings",
|
||||
icon: "solar:document-text-linear",
|
||||
title: "Browse All Findings",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
key: "settings",
|
||||
title: "Settings",
|
||||
items: [
|
||||
{
|
||||
key: "providers",
|
||||
href: "/providers",
|
||||
icon: "fluent:cloud-sync-24-regular",
|
||||
title: "Cloud Providers",
|
||||
},
|
||||
{
|
||||
key: "provider-groups",
|
||||
href: "/manage-groups",
|
||||
icon: "solar:settings-outline",
|
||||
title: "Provider Groups",
|
||||
},
|
||||
{
|
||||
key: "scans",
|
||||
href: "/scans",
|
||||
icon: "lucide:scan-search",
|
||||
title: "Scan Jobs",
|
||||
},
|
||||
{
|
||||
key: "roles",
|
||||
href: "/roles",
|
||||
icon: "mdi:account-key-outline",
|
||||
title: "Roles",
|
||||
},
|
||||
// {
|
||||
// key: "integrations",
|
||||
// href: "/integrations",
|
||||
// icon: "tabler:puzzle",
|
||||
// title: "Integrations",
|
||||
// },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const sectionItemsWithTeams: SidebarItem[] = [
|
||||
...sectionItems,
|
||||
{
|
||||
key: "memberships",
|
||||
title: "Membership",
|
||||
items: [
|
||||
{
|
||||
key: "users",
|
||||
href: "/users",
|
||||
title: "Users",
|
||||
icon: "ci:users",
|
||||
},
|
||||
{
|
||||
key: "invitations",
|
||||
href: "/invitations",
|
||||
icon: "solar:checklist-minimalistic-outline",
|
||||
title: "Invitations",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const brandItems: SidebarItem[] = [
|
||||
{
|
||||
key: "overview",
|
||||
title: "Overview",
|
||||
items: [
|
||||
{
|
||||
key: "home",
|
||||
href: "/",
|
||||
icon: "solar:home-2-linear",
|
||||
title: "Home",
|
||||
},
|
||||
{
|
||||
key: "projects",
|
||||
href: "#",
|
||||
icon: "solar:widget-2-outline",
|
||||
title: "Projects",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-primary-foreground/60"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "tasks",
|
||||
href: "#",
|
||||
icon: "solar:checklist-minimalistic-outline",
|
||||
title: "Tasks",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-primary-foreground/60"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "team",
|
||||
href: "#",
|
||||
icon: "solar:users-group-two-rounded-outline",
|
||||
title: "Team",
|
||||
},
|
||||
{
|
||||
key: "tracker",
|
||||
href: "#",
|
||||
icon: "solar:sort-by-time-linear",
|
||||
title: "Tracker",
|
||||
endContent: (
|
||||
<Chip
|
||||
className="bg-primary-foreground font-medium text-primary"
|
||||
size="sm"
|
||||
variant="flat"
|
||||
>
|
||||
New
|
||||
</Chip>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "your-teams",
|
||||
title: "Your Teams",
|
||||
items: [
|
||||
{
|
||||
key: "nextui",
|
||||
href: "#",
|
||||
title: "NextUI",
|
||||
startContent: (
|
||||
<TeamAvatar
|
||||
classNames={{
|
||||
base: "border-1 border-primary-foreground/20",
|
||||
name: "text-primary-foreground/80",
|
||||
}}
|
||||
name="Next UI"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "tailwind-variants",
|
||||
href: "#",
|
||||
title: "Tailwind Variants",
|
||||
startContent: (
|
||||
<TeamAvatar
|
||||
classNames={{
|
||||
base: "border-1 border-primary-foreground/20",
|
||||
name: "text-primary-foreground/80",
|
||||
}}
|
||||
name="Tailwind Variants"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "nextui-pro",
|
||||
href: "#",
|
||||
title: "NextUI Pro",
|
||||
startContent: (
|
||||
<TeamAvatar
|
||||
classNames={{
|
||||
base: "border-1 border-primary-foreground/20",
|
||||
name: "text-primary-foreground/80",
|
||||
}}
|
||||
name="NextUI Pro"
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const sectionLongList: SidebarItem[] = [
|
||||
...sectionItems,
|
||||
{
|
||||
key: "payments",
|
||||
title: "Payments",
|
||||
items: [
|
||||
{
|
||||
key: "payroll",
|
||||
href: "#",
|
||||
title: "Payroll",
|
||||
icon: "solar:dollar-minimalistic-linear",
|
||||
},
|
||||
{
|
||||
key: "invoices",
|
||||
href: "#",
|
||||
title: "Invoices",
|
||||
icon: "solar:file-text-linear",
|
||||
},
|
||||
{
|
||||
key: "billing",
|
||||
href: "#",
|
||||
title: "Billing",
|
||||
icon: "solar:card-outline",
|
||||
},
|
||||
{
|
||||
key: "payment-methods",
|
||||
href: "#",
|
||||
title: "Payment Methods",
|
||||
icon: "solar:wallet-money-outline",
|
||||
},
|
||||
{
|
||||
key: "payouts",
|
||||
href: "#",
|
||||
title: "Payouts",
|
||||
icon: "solar:card-transfer-outline",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "your-teams",
|
||||
title: "Your Teams",
|
||||
items: [
|
||||
{
|
||||
key: "nextui",
|
||||
href: "#",
|
||||
title: "NextUI",
|
||||
startContent: <TeamAvatar name="Next UI" />,
|
||||
},
|
||||
{
|
||||
key: "tailwind-variants",
|
||||
href: "#",
|
||||
title: "Tailwind Variants",
|
||||
startContent: <TeamAvatar name="Tailwind Variants" />,
|
||||
},
|
||||
{
|
||||
key: "nextui-pro",
|
||||
href: "#",
|
||||
title: "NextUI Pro",
|
||||
startContent: <TeamAvatar name="NextUI Pro" />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export const sectionNestedItems: SidebarItem[] = [
|
||||
{
|
||||
key: "home",
|
||||
href: "#",
|
||||
icon: "solar:home-2-linear",
|
||||
title: "Home",
|
||||
},
|
||||
{
|
||||
key: "projects",
|
||||
href: "#",
|
||||
icon: "solar:widget-2-outline",
|
||||
title: "Projects",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-default-400"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "tasks",
|
||||
href: "#",
|
||||
icon: "solar:checklist-minimalistic-outline",
|
||||
title: "Tasks",
|
||||
endContent: (
|
||||
<Icon
|
||||
className="text-default-400"
|
||||
icon="solar:add-circle-line-duotone"
|
||||
width={24}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "team",
|
||||
href: "#",
|
||||
icon: "solar:users-group-two-rounded-outline",
|
||||
title: "Team",
|
||||
},
|
||||
{
|
||||
key: "tracker",
|
||||
href: "#",
|
||||
icon: "solar:sort-by-time-linear",
|
||||
title: "Tracker",
|
||||
endContent: (
|
||||
<Chip size="sm" variant="flat">
|
||||
New
|
||||
</Chip>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "analytics",
|
||||
href: "#",
|
||||
icon: "solar:chart-outline",
|
||||
title: "Analytics",
|
||||
},
|
||||
{
|
||||
key: "perks",
|
||||
href: "#",
|
||||
icon: "solar:gift-linear",
|
||||
title: "Perks",
|
||||
endContent: (
|
||||
<Chip size="sm" variant="flat">
|
||||
3
|
||||
</Chip>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "cap_table",
|
||||
title: "Cap Table",
|
||||
icon: "solar:pie-chart-2-outline",
|
||||
type: SidebarItemType.Nest,
|
||||
items: [
|
||||
{
|
||||
key: "shareholders",
|
||||
icon: "solar:users-group-rounded-linear",
|
||||
href: "#",
|
||||
title: "Shareholders",
|
||||
},
|
||||
{
|
||||
key: "note_holders",
|
||||
icon: "solar:notes-outline",
|
||||
href: "#",
|
||||
title: "Note Holders",
|
||||
},
|
||||
{
|
||||
key: "transactions_log",
|
||||
icon: "solar:clipboard-list-linear",
|
||||
href: "#",
|
||||
title: "Transactions Log",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: "expenses",
|
||||
href: "#",
|
||||
icon: "solar:bill-list-outline",
|
||||
title: "Expenses",
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,29 @@
|
||||
import { ChevronLeft } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { Button } from "../button/button";
|
||||
interface SidebarToggleProps {
|
||||
isOpen: boolean | undefined;
|
||||
setIsOpen?: () => void;
|
||||
}
|
||||
|
||||
export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {
|
||||
return (
|
||||
<div className="invisible absolute -right-[16px] top-[12px] z-20 lg:visible">
|
||||
<Button
|
||||
onClick={() => setIsOpen?.()}
|
||||
className="h-8 w-8 rounded-md"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
>
|
||||
<ChevronLeft
|
||||
className={cn(
|
||||
"h-4 w-4 transition-transform duration-700 ease-in-out",
|
||||
isOpen === false ? "rotate-180" : "rotate-0",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,370 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useCallback } from "react";
|
||||
import { useMediaQuery } from "usehooks-ts";
|
||||
|
||||
import { logOut } from "@/actions/auth";
|
||||
import { AddIcon } from "@/components/icons";
|
||||
import { useUIStore } from "@/store";
|
||||
import { UserProfileProps } from "@/types";
|
||||
|
||||
import {
|
||||
ProwlerExtended,
|
||||
ProwlerShort,
|
||||
} from "../../icons/prowler/ProwlerIcons";
|
||||
import { ThemeSwitch } from "../../ThemeSwitch";
|
||||
import { CustomButton } from "../custom";
|
||||
import Sidebar from "./sidebar";
|
||||
import { sectionItemsWithTeams } from "./sidebar-items";
|
||||
import { SkeletonProfile } from "./skeleton-profile";
|
||||
import { UserAvatar } from "./user-avatar";
|
||||
|
||||
export const SidebarWrap = ({ user }: { user: UserProfileProps }) => {
|
||||
const pathname = usePathname();
|
||||
const isCollapsed = useUIStore((state) => state.isSideMenuOpen);
|
||||
const openSideMenu = useUIStore((state) => state.openSideMenu);
|
||||
const closeSideMenu = useUIStore((state) => state.closeSideMenu);
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const isCompact = isCollapsed || isMobile;
|
||||
|
||||
const onToggle = useCallback(() => {
|
||||
if (!isCollapsed) openSideMenu();
|
||||
if (isCollapsed) closeSideMenu();
|
||||
}, [isCollapsed, openSideMenu, closeSideMenu]);
|
||||
|
||||
const currentPath = pathname === "/" ? "overview" : pathname.split("/")?.[1];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
"relative flex h-screen flex-col rounded-r-3xl !border-r-small border-divider transition-width",
|
||||
{
|
||||
"w-72 p-6": !isCompact,
|
||||
"w-16 items-center px-2 py-6": isCompact,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col gap-y-8">
|
||||
<Link
|
||||
href="/"
|
||||
className={clsx(
|
||||
"flex w-full flex-col items-center justify-center gap-y-8 px-3",
|
||||
{
|
||||
"gap-0": isCompact,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx({
|
||||
hidden: !isCompact,
|
||||
})}
|
||||
>
|
||||
<ProwlerShort />
|
||||
</div>
|
||||
<div
|
||||
className={clsx({
|
||||
hidden: isCompact,
|
||||
"!mt-0": !isCompact,
|
||||
})}
|
||||
>
|
||||
<ProwlerExtended />
|
||||
</div>
|
||||
</Link>
|
||||
<Link href={"/users"}>
|
||||
{!user ? (
|
||||
<SkeletonProfile />
|
||||
) : (
|
||||
<UserAvatar
|
||||
userName={user?.data?.attributes?.name as string}
|
||||
position={user?.data?.attributes?.company_name as string}
|
||||
isCompact={isCompact}
|
||||
/>
|
||||
)}
|
||||
</Link>
|
||||
<div
|
||||
className={clsx({
|
||||
hidden: isCompact,
|
||||
"w-full": !isCompact,
|
||||
})}
|
||||
>
|
||||
<CustomButton
|
||||
asLink="/scans"
|
||||
className="w-full"
|
||||
ariaLabel="Launch Scan"
|
||||
variant="solid"
|
||||
color="action"
|
||||
size="md"
|
||||
endContent={<AddIcon size={20} />}
|
||||
>
|
||||
Launch Scan
|
||||
</CustomButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollShadow hideScrollBar className="-mr-6 h-full max-h-full py-4 pr-6">
|
||||
<Sidebar
|
||||
defaultSelectedKey="overview"
|
||||
isCompact={isCompact}
|
||||
items={sectionItemsWithTeams}
|
||||
selectedKeys={[currentPath]}
|
||||
/>
|
||||
</ScrollShadow>
|
||||
<Spacer y={2} />
|
||||
<div
|
||||
className={clsx("mt-auto flex flex-col", {
|
||||
"items-center": isCompact,
|
||||
})}
|
||||
>
|
||||
<Tooltip
|
||||
content="Documentation"
|
||||
isDisabled={!isCompact}
|
||||
placement="right"
|
||||
>
|
||||
<CustomButton
|
||||
asLink="https://docs.prowler.com/"
|
||||
target="_blank"
|
||||
ariaLabel="Documentation"
|
||||
variant="flat"
|
||||
className={clsx(
|
||||
"justify-start truncate bg-transparent text-default-500 data-[hover=true]:text-foreground dark:bg-transparent",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly={isCompact}
|
||||
startContent={
|
||||
isCompact ? null : (
|
||||
<Icon
|
||||
className="flex-none text-default-500"
|
||||
icon="tabler:file-type-doc"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
{isCompact ? (
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
icon="tabler:file-type-doc"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
"Documentation"
|
||||
)}
|
||||
</CustomButton>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
content="API reference"
|
||||
isDisabled={!isCompact}
|
||||
placement="right"
|
||||
>
|
||||
<CustomButton
|
||||
asLink={
|
||||
process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"
|
||||
? "https://api.prowler.com/api/v1/docs"
|
||||
: `${process.env.NEXT_PUBLIC_API_DOCS_URL}`
|
||||
}
|
||||
target="_blank"
|
||||
ariaLabel="API reference"
|
||||
variant="flat"
|
||||
className={clsx(
|
||||
"justify-start truncate bg-transparent text-default-500 data-[hover=true]:text-foreground dark:bg-transparent",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly={isCompact}
|
||||
startContent={
|
||||
isCompact ? null : (
|
||||
<Icon
|
||||
className="flex-none text-default-500"
|
||||
icon="tabler:api"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
{isCompact ? (
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
icon="tabler:api"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
"API reference"
|
||||
)}
|
||||
</CustomButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="Support" isDisabled={!isCompact} placement="right">
|
||||
<CustomButton
|
||||
asLink="https://github.com/prowler-cloud/prowler/issues"
|
||||
target="_blank"
|
||||
ariaLabel="Support"
|
||||
variant="flat"
|
||||
className={clsx(
|
||||
"justify-start truncate bg-transparent text-default-500 data-[hover=true]:text-foreground dark:bg-transparent",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly={isCompact}
|
||||
startContent={
|
||||
isCompact ? null : (
|
||||
<Icon
|
||||
className="flex-none text-default-500"
|
||||
icon="akar-icons:info"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
{isCompact ? (
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
icon="akar-icons:info"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
"Support"
|
||||
)}
|
||||
</CustomButton>
|
||||
</Tooltip>
|
||||
{/* <Tooltip
|
||||
content="Product Updates"
|
||||
isDisabled={!isCompact}
|
||||
placement="right"
|
||||
>
|
||||
<Button
|
||||
aria-label="Product Updates"
|
||||
className={clsx(
|
||||
"justify-start text-default-500 data-[hover=true]:text-foreground",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly={isCompact}
|
||||
startContent={
|
||||
isCompact ? null : (
|
||||
<Icon
|
||||
className="flex-none text-default-500"
|
||||
icon="mdi:update"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
variant="light"
|
||||
>
|
||||
{isCompact ? (
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
icon="mdi:update"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
"Product Updates"
|
||||
)}
|
||||
</Button>
|
||||
</Tooltip> */}
|
||||
|
||||
<Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
|
||||
<Button
|
||||
aria-label="Log Out"
|
||||
onPress={() => logOut()}
|
||||
className={clsx(
|
||||
"justify-start text-default-500 data-[hover=true]:text-foreground",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly={isCompact}
|
||||
startContent={
|
||||
isCompact ? null : (
|
||||
<Icon
|
||||
className="flex-none text-default-500"
|
||||
icon="heroicons-outline:logout"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
}
|
||||
variant="light"
|
||||
>
|
||||
{isCompact ? (
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
icon="heroicons-outline:logout"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
"Log Out"
|
||||
)}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div
|
||||
className={clsx("mt-auto flex justify-end gap-3", {
|
||||
"flex-col items-center": isCompact,
|
||||
"items-baseline": !isCompact,
|
||||
})}
|
||||
>
|
||||
<Tooltip
|
||||
content="Light | Dark mode"
|
||||
placement={isCompact ? "right" : "top"}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"px-0 text-default-500 data-[hover=true]:text-foreground",
|
||||
{
|
||||
"mt-3 justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<ThemeSwitch aria-label="Toggle theme" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
content="Open | Close sidebar"
|
||||
placement={isCompact ? "right" : "top"}
|
||||
>
|
||||
<Button
|
||||
aria-label={isCompact ? "Open sidebar" : "Close sidebar"}
|
||||
className={clsx(
|
||||
"px-0 text-default-500 data-[hover=true]:text-foreground",
|
||||
{
|
||||
"justify-center": isCompact,
|
||||
},
|
||||
)}
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="light"
|
||||
onPress={onToggle}
|
||||
>
|
||||
<Icon
|
||||
className="text-default-500"
|
||||
height={24}
|
||||
icon="solar:sidebar-minimalistic-outline"
|
||||
width={24}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,330 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import { Icon } from "@iconify/react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
type ListboxProps,
|
||||
type ListboxSectionProps,
|
||||
type Selection,
|
||||
} from "@nextui-org/react";
|
||||
import {
|
||||
Listbox,
|
||||
ListboxItem,
|
||||
ListboxSection,
|
||||
Tooltip,
|
||||
} from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export enum SidebarItemType {
|
||||
Nest = "nest",
|
||||
}
|
||||
import { ProwlerShort } from "@/components/icons";
|
||||
import { ProwlerExtended } from "@/components/icons";
|
||||
import { useSidebar } from "@/hooks/use-sidebar";
|
||||
import { useStore } from "@/hooks/use-store";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type SidebarItem = {
|
||||
key: string;
|
||||
title: string;
|
||||
icon?: string;
|
||||
href?: string;
|
||||
type?: SidebarItemType.Nest;
|
||||
startContent?: React.ReactNode;
|
||||
endContent?: React.ReactNode;
|
||||
items?: SidebarItem[];
|
||||
className?: string;
|
||||
};
|
||||
import { Button } from "../button/button";
|
||||
import { Menu } from "./menu";
|
||||
import { SidebarToggle } from "./sidebar-toggle";
|
||||
|
||||
export type SidebarProps = Omit<ListboxProps<SidebarItem>, "children"> & {
|
||||
items: SidebarItem[];
|
||||
isCompact?: boolean;
|
||||
hideEndContent?: boolean;
|
||||
iconClassName?: string;
|
||||
sectionClasses?: ListboxSectionProps["classNames"];
|
||||
classNames?: ListboxProps["classNames"];
|
||||
defaultSelectedKey: string;
|
||||
onSelect?: (key: string) => void;
|
||||
};
|
||||
|
||||
const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(
|
||||
(
|
||||
{
|
||||
items,
|
||||
isCompact,
|
||||
defaultSelectedKey,
|
||||
onSelect,
|
||||
hideEndContent,
|
||||
sectionClasses: sectionClassesProp = {},
|
||||
itemClasses: itemClassesProp = {},
|
||||
iconClassName,
|
||||
classNames,
|
||||
className,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const [selected, setSelected] = useState<React.Key>(defaultSelectedKey);
|
||||
|
||||
const sectionClasses = {
|
||||
...sectionClassesProp,
|
||||
base: clsx(sectionClassesProp?.base, "w-full", {
|
||||
"p-0 max-w-[44px]": isCompact,
|
||||
}),
|
||||
group: clsx(sectionClassesProp?.group, {
|
||||
"flex flex-col gap-1": isCompact,
|
||||
}),
|
||||
heading: clsx(sectionClassesProp?.heading, {
|
||||
hidden: isCompact,
|
||||
}),
|
||||
};
|
||||
|
||||
const itemClasses = {
|
||||
...itemClassesProp,
|
||||
base: clsx(itemClassesProp?.base, {
|
||||
"w-11 h-11 gap-0 p-0": isCompact,
|
||||
}),
|
||||
};
|
||||
|
||||
const renderNestItem: (item: SidebarItem) => JSX.Element =
|
||||
React.useCallback(
|
||||
(item) => {
|
||||
const isNestType =
|
||||
item.items &&
|
||||
item.items?.length > 0 &&
|
||||
item?.type === SidebarItemType.Nest;
|
||||
|
||||
if (isNestType) {
|
||||
// Is a nest type item , so we need to remove the href
|
||||
delete item.href;
|
||||
}
|
||||
|
||||
return (
|
||||
<ListboxItem
|
||||
{...item}
|
||||
key={item.key}
|
||||
aria-label={item.title}
|
||||
classNames={{
|
||||
base: clsx(
|
||||
{
|
||||
"h-auto p-0": !isCompact && isNestType,
|
||||
},
|
||||
{
|
||||
"inline-block w-11": isCompact && isNestType,
|
||||
},
|
||||
),
|
||||
}}
|
||||
endContent={
|
||||
isCompact || isNestType || hideEndContent
|
||||
? null
|
||||
: (item.endContent ?? null)
|
||||
}
|
||||
startContent={
|
||||
isCompact || isNestType ? null : item.icon ? (
|
||||
<Icon
|
||||
className={clsx(
|
||||
"text-default-500 group-data-[selected=true]:text-foreground",
|
||||
iconClassName,
|
||||
)}
|
||||
icon={item.icon}
|
||||
aria-hidden={"true"}
|
||||
width={24}
|
||||
/>
|
||||
) : (
|
||||
(item.startContent ?? null)
|
||||
)
|
||||
}
|
||||
title={isCompact || isNestType ? null : item.title}
|
||||
>
|
||||
{isCompact ? (
|
||||
<Tooltip content={item.title} placement="right">
|
||||
<div className="flex w-full items-center justify-center">
|
||||
{item.icon ? (
|
||||
<Icon
|
||||
className={clsx(
|
||||
"text-default-500 group-data-[selected=true]:text-foreground",
|
||||
iconClassName,
|
||||
)}
|
||||
aria-hidden={"true"}
|
||||
icon={item.icon}
|
||||
width={24}
|
||||
/>
|
||||
) : (
|
||||
(item.startContent ?? null)
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
{!isCompact && isNestType ? (
|
||||
<Accordion className={"p-0"}>
|
||||
<AccordionItem
|
||||
key={item.key}
|
||||
aria-label={item.title}
|
||||
classNames={{
|
||||
heading: "pr-3",
|
||||
trigger: "p-0",
|
||||
content: "py-0 pl-4",
|
||||
}}
|
||||
title={
|
||||
item.icon ? (
|
||||
<div className={"flex items-center gap-2 px-2 py-1.5"}>
|
||||
<Icon
|
||||
className={clsx(
|
||||
"text-default-500 group-data-[selected=true]:text-foreground",
|
||||
iconClassName,
|
||||
)}
|
||||
aria-hidden="true"
|
||||
icon={item.icon}
|
||||
width={24}
|
||||
/>
|
||||
<span className="text-small font-medium text-default-500 group-data-[selected=true]:text-foreground">
|
||||
{item.title}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
(item.startContent ?? null)
|
||||
)
|
||||
}
|
||||
>
|
||||
{item.items && item.items?.length > 0 ? (
|
||||
<Listbox
|
||||
className={"mt-0.5"}
|
||||
classNames={{
|
||||
list: clsx("border-l border-default-200 pl-4"),
|
||||
}}
|
||||
items={item.items}
|
||||
variant="flat"
|
||||
>
|
||||
{item.items.map(renderItem)}
|
||||
</Listbox>
|
||||
) : (
|
||||
renderItem(item)
|
||||
)}
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
) : null}
|
||||
</ListboxItem>
|
||||
);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[isCompact, hideEndContent, iconClassName],
|
||||
);
|
||||
|
||||
const renderItem: (item: SidebarItem) => JSX.Element = React.useCallback(
|
||||
(item) => {
|
||||
const isNestType =
|
||||
item.items &&
|
||||
item.items?.length > 0 &&
|
||||
item?.type === SidebarItemType.Nest;
|
||||
|
||||
if (isNestType) {
|
||||
return renderNestItem(item);
|
||||
}
|
||||
|
||||
return (
|
||||
<ListboxItem
|
||||
{...item}
|
||||
key={item.key}
|
||||
endContent={
|
||||
isCompact || hideEndContent ? null : (item.endContent ?? null)
|
||||
}
|
||||
startContent={
|
||||
isCompact ? null : item.icon ? (
|
||||
<Icon
|
||||
className={clsx(
|
||||
"text-default-500 group-data-[selected=true]:text-foreground",
|
||||
iconClassName,
|
||||
)}
|
||||
icon={item.icon}
|
||||
width={24}
|
||||
/>
|
||||
) : (
|
||||
(item.startContent ?? null)
|
||||
)
|
||||
}
|
||||
textValue={item.title}
|
||||
title={isCompact ? null : item.title}
|
||||
>
|
||||
{isCompact ? (
|
||||
<Tooltip content={item.title} placement="right">
|
||||
<div className="flex w-full items-center justify-center">
|
||||
{item.icon ? (
|
||||
<Icon
|
||||
className={clsx(
|
||||
"text-default-500 group-data-[selected=true]:text-foreground",
|
||||
iconClassName,
|
||||
)}
|
||||
icon={item.icon}
|
||||
width={24}
|
||||
/>
|
||||
) : (
|
||||
(item.startContent ?? null)
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</ListboxItem>
|
||||
);
|
||||
},
|
||||
[isCompact, hideEndContent, iconClassName, renderNestItem],
|
||||
);
|
||||
|
||||
return (
|
||||
<Listbox
|
||||
key={isCompact ? "compact" : "default"}
|
||||
ref={ref}
|
||||
hideSelectedIcon
|
||||
as="nav"
|
||||
className={clsx("list-none", className)}
|
||||
classNames={{
|
||||
...classNames,
|
||||
list: clsx("items-center", classNames?.list),
|
||||
}}
|
||||
color="default"
|
||||
aria-label="Navigation Menu"
|
||||
itemClasses={{
|
||||
...itemClasses,
|
||||
base: clsx(
|
||||
"px-3 rounded-large data-[selected=true]:bg-default-100 dark:data-[selected=true]:bg-prowler-blue-800",
|
||||
itemClasses?.base,
|
||||
),
|
||||
title: clsx(
|
||||
"text-small font-medium text-default-500 group-data-[selected=true]:text-foreground",
|
||||
itemClasses?.title,
|
||||
),
|
||||
}}
|
||||
items={items}
|
||||
selectedKeys={[selected] as unknown as Selection}
|
||||
selectionMode="single"
|
||||
variant="flat"
|
||||
onSelectionChange={(keys) => {
|
||||
const key = Array.from(keys)[0];
|
||||
|
||||
setSelected(key as React.Key);
|
||||
onSelect?.(key as string);
|
||||
}}
|
||||
{...props}
|
||||
export function Sidebar() {
|
||||
const sidebar = useStore(useSidebar, (x) => x);
|
||||
if (!sidebar) return null;
|
||||
const { isOpen, toggleOpen, getOpenState, setIsHover, settings } = sidebar;
|
||||
return (
|
||||
<aside
|
||||
className={cn(
|
||||
"fixed left-0 top-0 z-20 h-screen -translate-x-full transition-[width] duration-300 ease-in-out lg:translate-x-0",
|
||||
!getOpenState() ? "w-[90px]" : "w-72",
|
||||
settings.disabled && "hidden",
|
||||
)}
|
||||
>
|
||||
<SidebarToggle isOpen={isOpen} setIsOpen={toggleOpen} />
|
||||
<div
|
||||
onMouseEnter={() => setIsHover(true)}
|
||||
onMouseLeave={() => setIsHover(false)}
|
||||
className="no-scrollbar relative flex h-full flex-col overflow-y-auto overflow-x-hidden px-3 py-4 shadow-md dark:shadow-primary"
|
||||
>
|
||||
{(item) => {
|
||||
return item.items &&
|
||||
item.items?.length > 0 &&
|
||||
item?.type === SidebarItemType.Nest ? (
|
||||
renderNestItem(item)
|
||||
) : item.items && item.items?.length > 0 ? (
|
||||
<ListboxSection
|
||||
key={item.key}
|
||||
classNames={sectionClasses}
|
||||
showDivider={isCompact}
|
||||
title={item.title}
|
||||
<Button
|
||||
className={cn(
|
||||
"mb-1 transition-transform duration-300 ease-in-out",
|
||||
!getOpenState() ? "translate-x-1" : "translate-x-0",
|
||||
)}
|
||||
variant="link"
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
className={clsx(
|
||||
"mb-6 flex w-full flex-col items-center justify-center px-3",
|
||||
{
|
||||
"gap-0": !isOpen,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx({
|
||||
hidden: isOpen,
|
||||
})}
|
||||
>
|
||||
{item.items.map(renderItem)}
|
||||
</ListboxSection>
|
||||
) : (
|
||||
renderItem(item)
|
||||
);
|
||||
}}
|
||||
</Listbox>
|
||||
);
|
||||
},
|
||||
);
|
||||
<ProwlerShort />
|
||||
</div>
|
||||
<div
|
||||
className={clsx({
|
||||
hidden: !isOpen,
|
||||
"!mt-0": isOpen,
|
||||
})}
|
||||
>
|
||||
<ProwlerExtended />
|
||||
</div>
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
Sidebar.displayName = "Sidebar";
|
||||
|
||||
export default Sidebar;
|
||||
<Menu isOpen={getOpenState()} />
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { Skeleton } from "@nextui-org/react";
|
||||
|
||||
export const SkeletonProfile = () => {
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Skeleton className="h-10 w-10 rounded-full">
|
||||
<div className="h-10 w-10 rounded-full bg-default-200"></div>
|
||||
</Skeleton>
|
||||
<div className="flex flex-col space-y-1">
|
||||
<Skeleton className="h-4 w-24 rounded-lg">
|
||||
<div className="h-4 bg-default-200"></div>
|
||||
</Skeleton>
|
||||
<Skeleton className="h-3 w-24 rounded-lg">
|
||||
<div className="h-3 bg-default-200"></div>
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { AvatarProps } from "@nextui-org/react";
|
||||
import { Avatar } from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
|
||||
export const TeamAvatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
|
||||
({ name, className, classNames = {}, ...props }, ref) => (
|
||||
<Avatar
|
||||
{...props}
|
||||
ref={ref}
|
||||
classNames={{
|
||||
...classNames,
|
||||
base: clsx(
|
||||
"bg-transparent border border-divider",
|
||||
classNames?.base,
|
||||
className,
|
||||
),
|
||||
name: clsx(
|
||||
"text-default-500 text-[0.6rem] font-semibold",
|
||||
classNames?.name,
|
||||
),
|
||||
}}
|
||||
getInitials={(name) =>
|
||||
(name[0] || "") + (name[name.lastIndexOf(" ") + 1] || "").toUpperCase()
|
||||
}
|
||||
name={name}
|
||||
radius="md"
|
||||
size="sm"
|
||||
/>
|
||||
),
|
||||
);
|
||||
|
||||
TeamAvatar.displayName = "TeamAvatar";
|
||||
@@ -1,32 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar } from "@nextui-org/react";
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
|
||||
interface UserAvatarProps {
|
||||
userName: string;
|
||||
position: string;
|
||||
isCompact: boolean;
|
||||
}
|
||||
export const UserAvatar: React.FC<UserAvatarProps> = ({
|
||||
userName,
|
||||
position,
|
||||
isCompact = false,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-3">
|
||||
<Avatar isBordered className="flex-none" size="sm" showFallback />
|
||||
<div
|
||||
className={clsx("flex max-w-full flex-col", {
|
||||
hidden: isCompact,
|
||||
})}
|
||||
>
|
||||
<p className="truncate text-small font-medium text-default-600">
|
||||
{userName}
|
||||
</p>
|
||||
<p className="truncate text-tiny text-default-400">{position}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<TooltipPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
||||
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import { LogOut, User } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { logOut } from "@/actions/auth";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@/components/ui/avatar/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip/tooltip";
|
||||
import { UserProfileProps } from "@/types";
|
||||
|
||||
import { Button } from "../button/button";
|
||||
|
||||
export const UserNav = ({ user }: { user?: UserProfileProps }) => {
|
||||
if (!user || !user.data) return null;
|
||||
|
||||
const { name, email, company_name } = user.data.attributes;
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<TooltipProvider disableHoverableContent>
|
||||
<Tooltip delayDuration={100}>
|
||||
<TooltipTrigger asChild>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="relative h-8 w-8 rounded-full"
|
||||
>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src="#" alt="Avatar" />
|
||||
<AvatarFallback className="bg-transparent text-xs font-bold">
|
||||
{name.includes(" ")
|
||||
? name
|
||||
.split(" ")
|
||||
.map((word) => word.charAt(0))
|
||||
.join("")
|
||||
: name.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">Profile</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
<DropdownMenuContent className="w-56" align="end" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-small font-medium leading-none">
|
||||
{name}
|
||||
{company_name && (
|
||||
<span className="text-xs">{` | ${company_name}`}</span>
|
||||
)}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs leading-none">
|
||||
{email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem disabled className="hover:cursor-pointer" asChild>
|
||||
<Link href="/profile" className="flex items-center">
|
||||
<User className="text-muted-foreground mr-3 h-4 w-4" />
|
||||
Account
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
className="hover:cursor-pointer"
|
||||
onClick={() => logOut()}
|
||||
>
|
||||
<LogOut className="text-muted-foreground mr-3 h-4 w-4" />
|
||||
Sign out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user