mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-04 19:21:51 +00:00
feat(sidebar): sidebar with new functionalities (#7018)
This commit is contained in:
Pablo Lara
@@ -1,12 +0,0 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
|
||||
import { Header } from "@/components/ui";
|
||||
|
||||
export default async function Categories() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Categories" icon="material-symbols:folder-open-outline" />
|
||||
<Spacer y={4} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
ComplianceSkeletonGrid,
|
||||
} from "@/components/compliance";
|
||||
import { DataCompliance } from "@/components/compliance/data-compliance";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { ComplianceOverviewData, SearchParamsProps } from "@/types";
|
||||
|
||||
export default async function Compliance({
|
||||
@@ -80,15 +80,13 @@ export default async function Compliance({
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Compliance" icon="fluent-mdl2:compliance-audit" />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Compliance" icon="fluent-mdl2:compliance-audit">
|
||||
<DataCompliance scans={scanList} regions={regions} />
|
||||
<Spacer y={12} />
|
||||
<Suspense fallback={<ComplianceSkeletonGrid />}>
|
||||
<SSRComplianceGrid searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
ColumnFindings,
|
||||
SkeletonTableFindings,
|
||||
} from "@/components/findings/table";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { createDict } from "@/lib";
|
||||
import {
|
||||
@@ -101,10 +101,7 @@ export default async function Findings({
|
||||
completedScans?.map((scan: ScanProps) => scan.id) || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Findings" icon="carbon:data-view-alt" />
|
||||
<Spacer />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Findings" icon="carbon:data-view-alt">
|
||||
<FilterControls search date />
|
||||
<Spacer y={8} />
|
||||
<DataTableFilterCustom
|
||||
@@ -142,7 +139,7 @@ export default async function Findings({
|
||||
<Suspense key={searchParamsKey} fallback={<SkeletonTableFindings />}>
|
||||
<SSRDataTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
|
||||
export default function Integrations() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Integrations" icon="tabler:puzzle" />
|
||||
|
||||
<p>Hi hi from Integration page</p>
|
||||
</>
|
||||
<ContentLayout title="Integrations" icon="tabler:puzzle">
|
||||
<p>Integrations</p>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
ColumnsInvitation,
|
||||
SkeletonTableInvitation,
|
||||
} from "@/components/invitations/table";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { InvitationProps, Role, SearchParamsProps } from "@/types";
|
||||
|
||||
@@ -22,9 +22,7 @@ export default async function Invitations({
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Invitations" icon="ci:users" />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Invitations" icon="ci:users">
|
||||
<FilterControls search />
|
||||
<Spacer y={8} />
|
||||
<SendInvitationButton />
|
||||
@@ -35,7 +33,7 @@ export default async function Invitations({
|
||||
<Suspense key={searchParamsKey} fallback={<SkeletonTableInvitation />}>
|
||||
<SSRDataTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import "@/styles/globals.css";
|
||||
|
||||
import { Metadata, Viewport } from "next";
|
||||
import React, { use } from "react";
|
||||
import React from "react";
|
||||
|
||||
import { getProfileInfo } from "@/actions/users/users";
|
||||
import { SidebarWrap, Toaster } from "@/components/ui";
|
||||
import MainLayout from "@/components/ui/main-layout/main-layout";
|
||||
import { Toaster } from "@/components/ui/toast";
|
||||
import { fontSans } from "@/config/fonts";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -34,8 +34,6 @@ export default function RootLayout({
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const user = use(getProfileInfo());
|
||||
|
||||
return (
|
||||
<html suppressHydrationWarning lang="en">
|
||||
<head />
|
||||
@@ -47,13 +45,8 @@ export default function RootLayout({
|
||||
)}
|
||||
>
|
||||
<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
|
||||
<div className="flex h-dvh items-center justify-center overflow-hidden">
|
||||
<SidebarWrap user={user} />
|
||||
<main className="no-scrollbar mb-auto h-full flex-1 flex-col overflow-y-auto px-6 py-4 xl:px-10">
|
||||
{children}
|
||||
<Toaster />
|
||||
</main>
|
||||
</div>
|
||||
<MainLayout>{children}</MainLayout>
|
||||
<Toaster />
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import "@/styles/globals.css";
|
||||
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
import React from "react";
|
||||
|
||||
import { NavigationHeader } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
|
||||
interface ProviderLayoutProps {
|
||||
children: React.ReactNode;
|
||||
@@ -11,14 +10,11 @@ interface ProviderLayoutProps {
|
||||
|
||||
export default function ProviderLayout({ children }: ProviderLayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<NavigationHeader
|
||||
title="Manage providers groups"
|
||||
icon="icon-park-outline:close-small"
|
||||
href="/providers"
|
||||
/>
|
||||
<Spacer y={16} />
|
||||
<ContentLayout
|
||||
title="Manage Groups"
|
||||
icon="solar:users-group-two-rounded-outline"
|
||||
>
|
||||
{children}
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
} from "@/components/overview";
|
||||
import { ColumnNewFindingsToDate } from "@/components/overview/new-findings-table/table/column-new-findings-to-date";
|
||||
import { SkeletonTableNewFindings } from "@/components/overview/new-findings-table/table/skeleton-table-new-findings";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable } from "@/components/ui/table";
|
||||
import { createDict } from "@/lib/helper";
|
||||
import { FindingProps, SearchParamsProps } from "@/types";
|
||||
@@ -32,8 +32,7 @@ export default function Home({
|
||||
}) {
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
return (
|
||||
<>
|
||||
<Header title="Scan Overview" icon="solar:pie-chart-2-outline" />
|
||||
<ContentLayout title="Overview" icon="solar:pie-chart-2-outline">
|
||||
<Spacer y={4} />
|
||||
<FilterControls providers />
|
||||
<div className="mx-auto space-y-8 px-0 py-6">
|
||||
@@ -67,7 +66,7 @@ export default function Home({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,14 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
import React, { Suspense } from "react";
|
||||
|
||||
import { getProfileInfo } from "@/actions/users/users";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { SkeletonUserInfo } from "@/components/users/profile";
|
||||
import { UserInfo } from "@/components/users/profile/user-info";
|
||||
import { UserProfileProps } from "@/types";
|
||||
|
||||
export default async function Profile() {
|
||||
return (
|
||||
<>
|
||||
<Header title="User Profile" icon="ci:users" />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="User Profile" icon="ci:users">
|
||||
<div className="min-h-screen">
|
||||
<div className="container mx-auto space-y-8 px-0 py-6">
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
@@ -23,7 +20,7 @@ export default async function Profile() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
ColumnProviders,
|
||||
SkeletonTableProviders,
|
||||
} from "@/components/providers/table";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { ProviderProps, SearchParamsProps } from "@/types";
|
||||
|
||||
@@ -21,10 +21,7 @@ export default async function Providers({
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Cloud Providers" icon="fluent:cloud-sync-24-regular" />
|
||||
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Cloud Providers" icon="fluent:cloud-sync-24-regular">
|
||||
<FilterControls search />
|
||||
<Spacer y={8} />
|
||||
<div className="flex items-center gap-4 md:justify-end">
|
||||
@@ -42,7 +39,7 @@ export default async function Providers({
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ import { filterRoles } from "@/components/filters/data-filters";
|
||||
import { AddRoleButton } from "@/components/roles";
|
||||
import { ColumnsRoles } from "@/components/roles/table";
|
||||
import { SkeletonTableRoles } from "@/components/roles/table";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { SearchParamsProps } from "@/types";
|
||||
|
||||
@@ -19,9 +19,7 @@ export default async function Roles({
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Roles" icon="mdi:account-key-outline" />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Roles" icon="mdi:account-key-outline">
|
||||
<FilterControls search />
|
||||
<Spacer y={8} />
|
||||
<AddRoleButton />
|
||||
@@ -32,7 +30,7 @@ export default async function Roles({
|
||||
<Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>
|
||||
<SSRDataTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
import { LaunchScanWorkflow } from "@/components/scans/launch-workflow";
|
||||
import { SkeletonTableScans } from "@/components/scans/table";
|
||||
import { ColumnGetScans } from "@/components/scans/table/scans";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { ProviderProps, ScanProps, SearchParamsProps } from "@/types";
|
||||
|
||||
@@ -66,23 +66,20 @@ export default async function Scans({
|
||||
{!thereIsNoProviders && (
|
||||
<>
|
||||
{thereIsNoProvidersConnected ? (
|
||||
<>
|
||||
<Header title="Scans" icon="lucide:scan-search" />
|
||||
|
||||
<ContentLayout title="Scans" icon="lucide:scan-search">
|
||||
<Spacer y={8} />
|
||||
<NoProvidersConnected />
|
||||
<Spacer y={8} />
|
||||
</>
|
||||
</ContentLayout>
|
||||
) : (
|
||||
<>
|
||||
<Header title="Scans" icon="lucide:scan-search" />
|
||||
<ContentLayout title="Scans" icon="lucide:scan-search">
|
||||
<AutoRefresh hasExecutingScan={hasExecutingScan} />
|
||||
<LaunchScanWorkflow providers={providerInfo} />
|
||||
<Spacer y={8} />
|
||||
</>
|
||||
</ContentLayout>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-12 items-start gap-4">
|
||||
<div className="grid grid-cols-12 items-start gap-4 px-6 py-4 sm:px-8 xl:px-10">
|
||||
<div className="col-span-12">
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<DataTableFilterCustom filters={filterScans || []} />
|
||||
|
||||
@@ -4,7 +4,7 @@ import { Suspense } from "react";
|
||||
import { getServices } from "@/actions/services";
|
||||
import { FilterControls } from "@/components/filters";
|
||||
import { ServiceCard, ServiceSkeletonGrid } from "@/components/services";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { SearchParamsProps } from "@/types";
|
||||
|
||||
export default async function Services({
|
||||
@@ -14,18 +14,17 @@ export default async function Services({
|
||||
}) {
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
title="Services"
|
||||
icon="material-symbols:linked-services-outline"
|
||||
/>
|
||||
<ContentLayout
|
||||
title="Services"
|
||||
icon="material-symbols:linked-services-outline"
|
||||
>
|
||||
<Spacer y={4} />
|
||||
<FilterControls />
|
||||
<Spacer y={4} />
|
||||
<Suspense key={searchParamsKey} fallback={<ServiceSkeletonGrid />}>
|
||||
<SSRServiceGrid />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
|
||||
import { Header } from "@/components/ui";
|
||||
|
||||
export default async function Settings() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Settings" icon="solar:settings-outline" />
|
||||
<Spacer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { getRoles } from "@/actions/roles";
|
||||
import { getUsers } from "@/actions/users/users";
|
||||
import { FilterControls } from "@/components/filters";
|
||||
import { filterUsers } from "@/components/filters/data-filters";
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
|
||||
import { AddUserButton } from "@/components/users";
|
||||
import { ColumnsUser, SkeletonTableUser } from "@/components/users/table";
|
||||
@@ -19,9 +19,7 @@ export default async function Users({
|
||||
const searchParamsKey = JSON.stringify(searchParams || {});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header title="Users" icon="ci:users" />
|
||||
<Spacer y={4} />
|
||||
<ContentLayout title="Users" icon="ci:users">
|
||||
<FilterControls search />
|
||||
<Spacer y={8} />
|
||||
<AddUserButton />
|
||||
@@ -32,7 +30,7 @@ export default async function Users({
|
||||
<Suspense key={searchParamsKey} fallback={<SkeletonTableUser />}>
|
||||
<SSRDataTable searchParams={searchParams} />
|
||||
</Suspense>
|
||||
</>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,9 @@
|
||||
import { Spacer } from "@nextui-org/react";
|
||||
|
||||
import { Header } from "@/components/ui";
|
||||
import { ContentLayout } from "@/components/ui";
|
||||
|
||||
export default async function Workloads() {
|
||||
return (
|
||||
<>
|
||||
<Header title="Workloads" icon="lucide:tags" />
|
||||
<Spacer y={4} />
|
||||
</>
|
||||
<ContentLayout title="Workloads" icon="lucide:tags">
|
||||
<p>Workloads</p>
|
||||
</ContentLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -832,3 +832,171 @@ export const SpinnerIcon: React.FC<IconSvgProps> = ({
|
||||
<path d="M20 4v5h-.582m0 0a8.001 8.001 0 00-15.356 2m15.356-2H15M4 20v-5h.581m0 0a8.003 8.003 0 0015.357-2M4.581 15H9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const DocIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
|
||||
<path d="M5 12V5a2 2 0 0 1 2-2h7l5 5v4" />
|
||||
<path d="M5 15v6h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z" />
|
||||
<path d="M20 16.5a1.5 1.5 0 0 0-3 0v3a1.5 1.5 0 0 0 3 0" />
|
||||
<path d="M12.5 15a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-3 0v-3a1.5 1.5 0 0 1 1.5-1.5" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const APIdocIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="M4 13h5m3 3V8h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-3m8-5v8M9 16v-5.5a2.5 2.5 0 0 0-5 0V16" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const SupportIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 7h.01" strokeLinecap="round" />
|
||||
<path
|
||||
d="M10 11h2v5m-2 0h4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const CircleHelpIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<path d="M12 17h.01" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const AWSIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M15.626 14.62c-1.107 1.619-2.728 2.384-4.625 2.384c-2.304 0-4.277-1.773-3.993-4.124c.314-2.608 2.34-3.73 5.708-4.143c.601-.073.85-.094 2.147-.19l.138-.01v-.215C15 6.526 13.933 5.3 12.5 5.3c-1.437 0-2.44.747-3.055 2.526l-1.89-.652C8.442 4.604 10.193 3.3 12.5 3.3c2.602 0 4.5 2.178 4.5 5.022c0 2.649.163 4.756.483 5.557c.356.893.486 1.117.884 1.613l-1.56 1.251c-.524-.652-.753-1.048-1.182-2.122m5.631 5.925c-.27.2-.741.081-.528-.44c.264-.648.547-1.408.262-1.752c-.21-.255-.468-.382-1.027-.382c-.46 0-.69.06-.995.08c-.204.014-.294-.297-.091-.44c.261-.185.544-.33.87-.428c1.15-.344 2.505-.155 2.67.083c.365.53-.2 2.569-1.16 3.28m-1.182-1.084a8 8 0 0 1-.829.695c-2.122 1.616-4.871 2.46-7.258 2.46c-3.843 0-7.28-1.793-9.888-4.795c-.224-.23-.039-.566.223-.384c2.81 2.077 6.288 3.333 9.888 3.333c2.266 0 4.708-.537 7.035-1.692c.163-.077.345-.182.504-.255c.367-.21.69.306.325.638m-5.064-8.92c-1.259.094-1.496.113-2.052.181c-2.553.313-3.797 1.003-3.966 2.398c-.125 1.043.81 1.884 2.008 1.884c2.039 0 3.517-1.228 4.022-4.463z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const AzureIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M11.001 5h-6v6h6zm2 0v6h6V5zm6 8h-6v6h6zm-8 6v-6h-6v6zm-8-16h18v18h-18z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const GCPIcon: React.FC<IconSvgProps> = ({
|
||||
size = 24,
|
||||
width,
|
||||
height,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path d="M12 11h8.533q.066.578.067 1.184c0 2.734-.98 5.036-2.678 6.6c-1.485 1.371-3.518 2.175-5.942 2.175A8.976 8.976 0 0 1 3 11.98A8.976 8.976 0 0 1 11.98 3c2.42 0 4.453.89 6.008 2.339L16.526 6.8C15.368 5.681 13.803 5 12 5a7 7 0 0 0 0 14c3.527 0 6.144-2.608 6.577-6H12z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ export const ProwlerExtended: React.FC<IconSvgProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
className="text-prowler-black dark:text-prowler-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1233.67 204.4"
|
||||
fill="none"
|
||||
@@ -36,7 +37,7 @@ export const ProwlerShort: React.FC<IconSvgProps> = ({
|
||||
...props
|
||||
}) => (
|
||||
<svg
|
||||
id="Layer_1"
|
||||
className="text-prowler-black dark:text-prowler-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 432.08 396.77"
|
||||
fill="none"
|
||||
|
||||
@@ -8,7 +8,7 @@ import { CustomButton } from "../ui/custom";
|
||||
|
||||
export const NoProvidersAdded = () => {
|
||||
return (
|
||||
<div className="dark:bg-prowler-blue-900 flex min-h-screen items-center justify-center">
|
||||
<div className="flex min-h-screen items-center justify-center dark:bg-prowler-blue-800">
|
||||
<div className="mx-auto w-full max-w-7xl px-4">
|
||||
<Card className="mx-auto w-full max-w-3xl rounded-lg dark:bg-prowler-blue-400">
|
||||
<CardBody className="flex flex-col items-center space-y-4 p-6 text-center sm:p-8">
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -1 +1,3 @@
|
||||
export * from "./use-sidebar";
|
||||
export * from "./use-store";
|
||||
export * from "./useLocalStorage";
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
import { produce } from "immer";
|
||||
import { create } from "zustand";
|
||||
import { createJSONStorage, persist } from "zustand/middleware";
|
||||
|
||||
type SidebarSettings = { disabled: boolean; isHoverOpen: boolean };
|
||||
type SidebarStore = {
|
||||
isOpen: boolean;
|
||||
isHover: boolean;
|
||||
settings: SidebarSettings;
|
||||
toggleOpen: () => void;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
setIsHover: (isHover: boolean) => void;
|
||||
getOpenState: () => boolean;
|
||||
setSettings: (settings: Partial<SidebarSettings>) => void;
|
||||
};
|
||||
|
||||
export const useSidebar = create(
|
||||
persist<SidebarStore>(
|
||||
(set, get) => ({
|
||||
isOpen: true,
|
||||
isHover: false,
|
||||
settings: { disabled: false, isHoverOpen: false },
|
||||
toggleOpen: () => {
|
||||
set({ isOpen: !get().isOpen });
|
||||
},
|
||||
setIsOpen: (isOpen: boolean) => {
|
||||
set({ isOpen });
|
||||
},
|
||||
setIsHover: (isHover: boolean) => {
|
||||
set({ isHover });
|
||||
},
|
||||
getOpenState: () => {
|
||||
const state = get();
|
||||
return state.isOpen || (state.settings.isHoverOpen && state.isHover);
|
||||
},
|
||||
setSettings: (settings: Partial<SidebarSettings>) => {
|
||||
set(
|
||||
produce((state: SidebarStore) => {
|
||||
state.settings = { ...state.settings, ...settings };
|
||||
}),
|
||||
);
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: "sidebar",
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
},
|
||||
),
|
||||
);
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useEffect, useState } from "react";
|
||||
/**
|
||||
* This hook fix hydration when use persist to save hook data to localStorage
|
||||
*/
|
||||
export const useStore = <T, F>(
|
||||
store: (callback: (state: T) => unknown) => unknown,
|
||||
callback: (state: T) => F,
|
||||
) => {
|
||||
const result = store(callback) as F;
|
||||
const [data, setData] = useState<F>();
|
||||
|
||||
useEffect(() => {
|
||||
setData(result);
|
||||
}, [result]);
|
||||
|
||||
return data;
|
||||
};
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from "./helper";
|
||||
export * from "./menu-list";
|
||||
export * from "./utils";
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
Bookmark,
|
||||
Boxes,
|
||||
CloudCog,
|
||||
Group,
|
||||
LayoutGrid,
|
||||
Mail,
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
SquareChartGantt,
|
||||
SquarePen,
|
||||
Tag,
|
||||
Timer,
|
||||
User,
|
||||
UserCog,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
APIdocIcon,
|
||||
AWSIcon,
|
||||
AzureIcon,
|
||||
CircleHelpIcon,
|
||||
DocIcon,
|
||||
GCPIcon,
|
||||
SupportIcon,
|
||||
} from "@/components/icons/Icons";
|
||||
import { GroupProps } from "@/types";
|
||||
|
||||
export const getMenuList = (pathname: string): GroupProps[] => {
|
||||
return [
|
||||
{
|
||||
groupLabel: "",
|
||||
menus: [
|
||||
{
|
||||
href: "",
|
||||
label: "Analytics",
|
||||
icon: LayoutGrid,
|
||||
submenus: [
|
||||
{
|
||||
href: "/",
|
||||
label: "Overview",
|
||||
icon: SquareChartGantt,
|
||||
active: pathname === "/",
|
||||
},
|
||||
{
|
||||
href: "/compliance",
|
||||
label: "Compliance",
|
||||
icon: ShieldCheck,
|
||||
active: pathname === "/compliance",
|
||||
},
|
||||
],
|
||||
defaultOpen: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
groupLabel: "Issues",
|
||||
menus: [
|
||||
{
|
||||
href: "",
|
||||
label: "Top failed issues",
|
||||
icon: Bookmark,
|
||||
submenus: [
|
||||
{
|
||||
href: "/findings?filter[status__in]=FAIL&sort=severity,-inserted_at",
|
||||
label: "Misconfigurations",
|
||||
icon: AlertCircle,
|
||||
},
|
||||
{
|
||||
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",
|
||||
label: "IAM Issues",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
],
|
||||
defaultOpen: false,
|
||||
},
|
||||
{
|
||||
href: "",
|
||||
label: "High-risk findings",
|
||||
icon: SquarePen,
|
||||
submenus: [
|
||||
{
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=aws&sort=severity,-inserted_at",
|
||||
label: "Amazon Web Services",
|
||||
icon: AWSIcon,
|
||||
},
|
||||
{
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=azure&sort=severity,-inserted_at",
|
||||
label: "Microsoft Azure",
|
||||
icon: AzureIcon,
|
||||
},
|
||||
{
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=gcp&sort=severity,-inserted_at",
|
||||
label: "Google Cloud",
|
||||
icon: GCPIcon,
|
||||
},
|
||||
{
|
||||
href: "/findings?filter[status__in]=FAIL&filter[severity__in]=critical%2Chigh%2Cmedium&filter[provider_type__in]=kubernetes&sort=severity,-inserted_at",
|
||||
label: "Kubernetes",
|
||||
icon: Boxes,
|
||||
},
|
||||
],
|
||||
defaultOpen: false,
|
||||
},
|
||||
{
|
||||
href: "/findings",
|
||||
label: "Browse all findings",
|
||||
icon: Tag,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
groupLabel: "Settings",
|
||||
menus: [
|
||||
{
|
||||
href: "",
|
||||
label: "Configuration",
|
||||
icon: Settings,
|
||||
submenus: [
|
||||
{ href: "/providers", label: "Cloud Providers", icon: CloudCog },
|
||||
{ href: "/manage-groups", label: "Provider Groups", icon: Group },
|
||||
{ href: "/scans", label: "Scan Jobs", icon: Timer },
|
||||
{ href: "/roles", label: "Roles", icon: UserCog },
|
||||
],
|
||||
defaultOpen: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupLabel: "Workspace",
|
||||
menus: [
|
||||
{
|
||||
href: "",
|
||||
label: "Memberships",
|
||||
icon: Users,
|
||||
submenus: [
|
||||
{ href: "/users", label: "Users", icon: User },
|
||||
{ href: "/invitations", label: "Invitations", icon: Mail },
|
||||
],
|
||||
defaultOpen: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupLabel: "",
|
||||
menus: [
|
||||
{
|
||||
href: "",
|
||||
label: "Support & Help",
|
||||
icon: SupportIcon,
|
||||
submenus: [
|
||||
{
|
||||
href: "https://docs.prowler.com/",
|
||||
target: "_blank",
|
||||
label: "Documentation",
|
||||
icon: DocIcon,
|
||||
},
|
||||
{
|
||||
href:
|
||||
process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"
|
||||
? "https://api.prowler.com/api/v1/docs"
|
||||
: `${process.env.NEXT_PUBLIC_API_DOCS_URL}`,
|
||||
target: "_blank",
|
||||
label: "API reference",
|
||||
icon: APIdocIcon,
|
||||
},
|
||||
{
|
||||
href: "https://github.com/prowler-cloud/prowler/issues",
|
||||
target: "_blank",
|
||||
label: "Support",
|
||||
icon: CircleHelpIcon,
|
||||
},
|
||||
],
|
||||
defaultOpen: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
Generated
+808
-563
File diff suppressed because it is too large
Load Diff
@@ -23,6 +23,7 @@
|
||||
"cmdk": "^1.0.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"framer-motion": "^11.16.0",
|
||||
"immer": "^10.1.1",
|
||||
"intl-messageformat": "^10.5.0",
|
||||
"jose": "^5.9.3",
|
||||
"jwt-decode": "^4.0.0",
|
||||
@@ -30,6 +31,7 @@
|
||||
"next": "^14.2.22",
|
||||
"next-auth": "^5.0.0-beta.25",
|
||||
"next-themes": "^0.2.1",
|
||||
"radix-ui": "^1.1.3",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-hook-form": "^7.52.2",
|
||||
|
||||
+10
-2
@@ -141,6 +141,14 @@ module.exports = {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
"collapsible-down": {
|
||||
from: { height: "0" },
|
||||
to: { height: "var(--radix-collapsible-content-height)" },
|
||||
},
|
||||
"collapsible-up": {
|
||||
from: { height: "var(--radix-collapsible-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
advance: { from: { width: 0 }, to: { width: "100%" } },
|
||||
"fade-in": { from: { opacity: 0 }, to: { opacity: 1 } },
|
||||
"fade-out": { from: { opacity: 1 }, to: { opacity: 0 } },
|
||||
@@ -164,8 +172,8 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"collapsible-down": "collapsible-down 0.2s ease-out",
|
||||
"collapsible-up": "collapsible-up 0.2s ease-out",
|
||||
},
|
||||
screens: {
|
||||
"3xl": "1920px", // Add breakpoint to optimize layouts for large screens.
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { SVGProps } from "react";
|
||||
|
||||
export type IconSvgProps = SVGProps<SVGSVGElement> & {
|
||||
@@ -9,6 +10,38 @@ export type IconProps = {
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
export type IconComponent = LucideIcon | React.FC<IconSvgProps>;
|
||||
|
||||
export type SubmenuProps = {
|
||||
href: string;
|
||||
target?: string;
|
||||
label: string;
|
||||
active?: boolean;
|
||||
icon: IconComponent;
|
||||
};
|
||||
|
||||
export type MenuProps = {
|
||||
href: string;
|
||||
label: string;
|
||||
active?: boolean;
|
||||
icon: IconComponent;
|
||||
submenus?: SubmenuProps[];
|
||||
defaultOpen?: boolean;
|
||||
};
|
||||
|
||||
export type GroupProps = {
|
||||
groupLabel: string;
|
||||
menus: MenuProps[];
|
||||
};
|
||||
|
||||
export interface CollapseMenuButtonProps {
|
||||
icon: IconComponent;
|
||||
label: string;
|
||||
submenus: SubmenuProps[];
|
||||
defaultOpen: boolean;
|
||||
isOpen: boolean | undefined;
|
||||
}
|
||||
|
||||
export type NextUIVariants =
|
||||
| "solid"
|
||||
| "faded"
|
||||
|
||||
Reference in New Issue
Block a user