diff --git a/ui/changelog.d/sidebar-redesign.changed.md b/ui/changelog.d/sidebar-redesign.changed.md
new file mode 100644
index 0000000000..9d45d8ffdf
--- /dev/null
+++ b/ui/changelog.d/sidebar-redesign.changed.md
@@ -0,0 +1 @@
+Sidebar navigation with grouped sections, clearer active states, and a responsive mobile overlay
diff --git a/ui/components/layout/app-sidebar/app-sidebar-content.test.tsx b/ui/components/layout/app-sidebar/app-sidebar-content.test.tsx
new file mode 100644
index 0000000000..54dedad07c
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-content.test.tsx
@@ -0,0 +1,126 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
+
+import { AppSidebarContent } from "./app-sidebar-content";
+import { useAppSidebarMode } from "./app-sidebar-mode-store";
+import { APP_SIDEBAR_MODE } from "./types";
+
+const {
+ openCloudUpgradeMock,
+ openLaunchScanModalMock,
+ pathnameValue,
+ pushMock,
+} = vi.hoisted(() => ({
+ openCloudUpgradeMock: vi.fn(),
+ openLaunchScanModalMock: vi.fn(),
+ pathnameValue: { current: "/findings" },
+ pushMock: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+ usePathname: () => pathnameValue.current,
+ useRouter: () => ({ push: pushMock }),
+}));
+
+vi.mock("@/hooks", () => ({
+ useAuth: () => ({ permissions: {} }),
+}));
+
+vi.mock("@/hooks/use-runtime-config", () => ({
+ useRuntimeConfig: () => ({ apiDocsUrl: "https://local.example/docs" }),
+}));
+
+vi.mock("@/store", () => ({
+ useScansStore: (
+ selector: (state: {
+ openLaunchScanModal: typeof openLaunchScanModalMock;
+ }) => unknown,
+ ) => selector({ openLaunchScanModal: openLaunchScanModalMock }),
+ useCloudUpgradeStore: (
+ selector: (state: {
+ openCloudUpgrade: typeof openCloudUpgradeMock;
+ }) => unknown,
+ ) => selector({ openCloudUpgrade: openCloudUpgradeMock }),
+}));
+
+vi.mock("@/app/(prowler)/lighthouse/_components/navigation", () => ({
+ LighthouseV2SidebarChat: () =>
,
+}));
+
+describe("AppSidebarContent", () => {
+ beforeEach(() => {
+ pathnameValue.current = "/findings";
+ pushMock.mockClear();
+ openCloudUpgradeMock.mockClear();
+ openLaunchScanModalMock.mockClear();
+ useAppSidebarMode.setState({ mode: APP_SIDEBAR_MODE.BROWSE });
+ });
+
+ afterEach(() => {
+ vi.unstubAllEnvs();
+ });
+
+ it("shares the brand, Launch Scan action and Local Server Cloud affordances", async () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+ vi.stubEnv("NEXT_PUBLIC_PROWLER_RELEASE_VERSION", "5.8.0");
+ const user = userEvent.setup();
+
+ // When
+ render(
);
+
+ // Then
+ const homeLink = screen.getByRole("link", { name: "Prowler home" });
+ expect(homeLink).toBeVisible();
+ expect(screen.getByRole("link", { name: "Launch Scan" })).toHaveAttribute(
+ "href",
+ "/scans?launchScan=true",
+ );
+ expect(screen.getByText("5.8.0")).toBeVisible();
+
+ await user.click(screen.getByRole("button", { name: "Chat" }));
+ expect(openCloudUpgradeMock).toHaveBeenCalledWith(
+ CLOUD_UPGRADE_FEATURE.LIGHTHOUSE_AI,
+ undefined,
+ );
+ expect(screen.getAllByText("Cloud").length).toBeGreaterThan(0);
+ });
+
+ it("keeps the existing Lighthouse chat sidebar in Cloud Chat mode", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ useAppSidebarMode.setState({ mode: APP_SIDEBAR_MODE.CHAT });
+
+ // When
+ render(
);
+
+ // Then
+ expect(screen.getByTestId("lighthouse-chat-sidebar")).toBeVisible();
+ expect(
+ screen.getByRole("link", { name: "Service status" }),
+ ).toHaveAttribute("href", "https://status.prowler.com");
+ expect(
+ screen.queryByText("All systems operational"),
+ ).not.toBeInTheDocument();
+ });
+
+ it("opens the current scan modal instead of navigating from the scans route", async () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ pathnameValue.current = "/scans";
+ const user = userEvent.setup();
+
+ // When
+ render(
);
+ await user.click(screen.getByRole("button", { name: "Launch Scan" }));
+
+ // Then
+ expect(openLaunchScanModalMock).toHaveBeenCalledOnce();
+ expect(
+ screen.queryByRole("link", { name: "Launch Scan" }),
+ ).not.toBeInTheDocument();
+ });
+});
diff --git a/ui/components/layout/app-sidebar/app-sidebar-content.tsx b/ui/components/layout/app-sidebar/app-sidebar-content.tsx
new file mode 100644
index 0000000000..c32a7d5048
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-content.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { LighthouseV2SidebarChat } from "@/app/(prowler)/lighthouse/_components/navigation";
+import { ProwlerBrand } from "@/components/icons";
+import { useAuth } from "@/hooks";
+import { useRuntimeConfig } from "@/hooks/use-runtime-config";
+import { isCloud } from "@/lib/shared/env";
+
+import { useAppSidebarMode } from "./app-sidebar-mode-store";
+import { AppSidebarModeToggle } from "./app-sidebar-mode-toggle";
+import { LaunchScanAction } from "./launch-scan-action";
+import { getNavigationConfig } from "./navigation-config";
+import { SidebarFooter } from "./sidebar-footer";
+import { SidebarNavigation } from "./sidebar-navigation";
+import { APP_SIDEBAR_MODE, type AppSidebarSelectionHandler } from "./types";
+
+interface AppSidebarContentProps {
+ onSelect?: AppSidebarSelectionHandler;
+}
+
+export function AppSidebarContent({ onSelect }: AppSidebarContentProps) {
+ const pathname = usePathname();
+ const { permissions } = useAuth();
+ const { apiDocsUrl } = useRuntimeConfig();
+ const mode = useAppSidebarMode((state) => state.mode);
+ const isCloudEnvironment = isCloud();
+ const sections = getNavigationConfig({ pathname, apiDocsUrl, permissions });
+ const showChat = isCloudEnvironment && mode === APP_SIDEBAR_MODE.CHAT;
+
+ return (
+
+
+
+
+
+
+ {showChat ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/app-sidebar-mode-store.test.ts b/ui/components/layout/app-sidebar/app-sidebar-mode-store.test.ts
new file mode 100644
index 0000000000..ba85902736
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-mode-store.test.ts
@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import {
+ migrateAppSidebarState,
+ useAppSidebarMode,
+} from "./app-sidebar-mode-store";
+import { APP_SIDEBAR_MODE } from "./types";
+
+describe("app sidebar mode store", () => {
+ beforeEach(() => {
+ localStorage.clear();
+ useAppSidebarMode.setState({ mode: APP_SIDEBAR_MODE.BROWSE });
+ });
+
+ it("keeps the persisted chat mode while discarding legacy sidebar state", () => {
+ // Given
+ const legacyState = {
+ isOpen: false,
+ isHover: true,
+ navigationMode: APP_SIDEBAR_MODE.CHAT,
+ settings: { disabled: false, isHoverOpen: false },
+ };
+
+ // When
+ const migrated = migrateAppSidebarState(legacyState);
+
+ // Then
+ expect(migrated).toEqual({ mode: APP_SIDEBAR_MODE.CHAT });
+ expect(migrated).not.toHaveProperty("isOpen");
+ expect(migrated).not.toHaveProperty("settings");
+ });
+
+ it("falls back to browse for an invalid persisted mode", () => {
+ // Given / When
+ const migrated = migrateAppSidebarState({ navigationMode: "invalid" });
+
+ // Then
+ expect(migrated).toEqual({ mode: APP_SIDEBAR_MODE.BROWSE });
+ });
+
+ it("rehydrates the legacy payload under the existing sidebar key", async () => {
+ // Given
+ localStorage.setItem(
+ "sidebar",
+ JSON.stringify({
+ state: {
+ navigationMode: APP_SIDEBAR_MODE.CHAT,
+ isOpen: false,
+ isHover: true,
+ settings: { disabled: true },
+ },
+ version: 0,
+ }),
+ );
+
+ // When
+ await useAppSidebarMode.persist.rehydrate();
+
+ // Then
+ expect(useAppSidebarMode.getState().mode).toBe(APP_SIDEBAR_MODE.CHAT);
+ expect(useAppSidebarMode.getState()).not.toEqual(
+ expect.objectContaining({ isOpen: expect.anything() }),
+ );
+ });
+
+ it("updates the current navigation mode", () => {
+ // Given / When
+ useAppSidebarMode.getState().setMode(APP_SIDEBAR_MODE.CHAT);
+
+ // Then
+ expect(useAppSidebarMode.getState().mode).toBe(APP_SIDEBAR_MODE.CHAT);
+ });
+});
diff --git a/ui/components/layout/app-sidebar/app-sidebar-mode-store.ts b/ui/components/layout/app-sidebar/app-sidebar-mode-store.ts
new file mode 100644
index 0000000000..fc076c0296
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-mode-store.ts
@@ -0,0 +1,54 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+import { APP_SIDEBAR_MODE, type AppSidebarMode } from "./types";
+
+interface PersistedAppSidebarState {
+ mode: AppSidebarMode;
+}
+
+interface AppSidebarModeStore extends PersistedAppSidebarState {
+ setMode: (mode: AppSidebarMode) => void;
+}
+
+function isAppSidebarMode(value: unknown): value is AppSidebarMode {
+ return Object.values(APP_SIDEBAR_MODE).some((mode) => mode === value);
+}
+
+export function migrateAppSidebarState(
+ persistedState: unknown,
+): PersistedAppSidebarState {
+ if (typeof persistedState !== "object" || persistedState === null) {
+ return { mode: APP_SIDEBAR_MODE.BROWSE };
+ }
+
+ if ("mode" in persistedState && isAppSidebarMode(persistedState.mode)) {
+ return { mode: persistedState.mode };
+ }
+
+ if (
+ "navigationMode" in persistedState &&
+ isAppSidebarMode(persistedState.navigationMode)
+ ) {
+ return { mode: persistedState.navigationMode };
+ }
+
+ return { mode: APP_SIDEBAR_MODE.BROWSE };
+}
+
+export const useAppSidebarMode = create
()(
+ persist(
+ (set) => ({
+ mode: APP_SIDEBAR_MODE.BROWSE,
+ setMode: (mode) => set({ mode }),
+ }),
+ {
+ name: "sidebar",
+ storage: createJSONStorage(() => localStorage),
+ merge: (persistedState, currentState) => ({
+ ...currentState,
+ ...migrateAppSidebarState(persistedState),
+ }),
+ },
+ ),
+);
diff --git a/ui/components/layout/app-sidebar/app-sidebar-mode-sync.test.tsx b/ui/components/layout/app-sidebar/app-sidebar-mode-sync.test.tsx
new file mode 100644
index 0000000000..59caaae738
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-mode-sync.test.tsx
@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { useAppSidebarMode } from "./app-sidebar-mode-store";
+import { AppSidebarModeSync } from "./app-sidebar-mode-sync";
+import { APP_SIDEBAR_MODE } from "./types";
+
+describe("AppSidebarModeSync", () => {
+ beforeEach(() => {
+ useAppSidebarMode.setState({ mode: APP_SIDEBAR_MODE.CHAT });
+ });
+
+ it("restores the requested sidebar mode when a route mounts", () => {
+ // Given / When
+ render();
+
+ // Then
+ expect(useAppSidebarMode.getState().mode).toBe(APP_SIDEBAR_MODE.BROWSE);
+ });
+});
diff --git a/ui/components/layout/app-sidebar/app-sidebar-mode-sync.tsx b/ui/components/layout/app-sidebar/app-sidebar-mode-sync.tsx
new file mode 100644
index 0000000000..c97d84a14d
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-mode-sync.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useMountEffect } from "@/hooks/use-mount-effect";
+
+import { useAppSidebarMode } from "./app-sidebar-mode-store";
+import type { AppSidebarMode } from "./types";
+
+interface AppSidebarModeSyncProps {
+ mode: AppSidebarMode;
+}
+
+export function AppSidebarModeSync({ mode }: AppSidebarModeSyncProps) {
+ const setMode = useAppSidebarMode((state) => state.setMode);
+
+ useMountEffect(() => {
+ setMode(mode);
+ });
+
+ return null;
+}
diff --git a/ui/components/layout/app-sidebar/app-sidebar-mode-toggle.tsx b/ui/components/layout/app-sidebar/app-sidebar-mode-toggle.tsx
new file mode 100644
index 0000000000..0631d09dbf
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar-mode-toggle.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { Home } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { LighthouseIcon } from "@/components/icons/Icons";
+import { Badge } from "@/components/shadcn/badge/badge";
+import { NavigationButton } from "@/components/shadcn/navigation-button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/shadcn/tooltip";
+import { useCloudUpgradeStore } from "@/store";
+import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
+
+import { useAppSidebarMode } from "./app-sidebar-mode-store";
+import {
+ APP_SIDEBAR_MODE,
+ type AppSidebarMode,
+ type AppSidebarSelectionHandler,
+} from "./types";
+
+interface AppSidebarModeToggleProps {
+ chatEnabled: boolean;
+ onSelect?: AppSidebarSelectionHandler;
+}
+
+const MODES = [
+ {
+ value: APP_SIDEBAR_MODE.BROWSE,
+ label: "Home",
+ icon: Home,
+ },
+ {
+ value: APP_SIDEBAR_MODE.CHAT,
+ label: "Chat",
+ icon: LighthouseIcon,
+ },
+] as const;
+
+export function AppSidebarModeToggle({
+ chatEnabled,
+ onSelect,
+}: AppSidebarModeToggleProps) {
+ const router = useRouter();
+ const mode = useAppSidebarMode((state) => state.mode);
+ const setMode = useAppSidebarMode((state) => state.setMode);
+ const openCloudUpgrade = useCloudUpgradeStore(
+ (state) => state.openCloudUpgrade,
+ );
+
+ const selectMode = (nextMode: AppSidebarMode) => {
+ const isChatUpsell = nextMode === APP_SIDEBAR_MODE.CHAT && !chatEnabled;
+
+ if (isChatUpsell) {
+ openCloudUpgrade(
+ CLOUD_UPGRADE_FEATURE.LIGHTHOUSE_AI,
+ onSelect?.() ?? undefined,
+ );
+ return;
+ }
+
+ setMode(nextMode);
+ onSelect?.();
+
+ if (nextMode === APP_SIDEBAR_MODE.CHAT) {
+ router.push("/lighthouse");
+ }
+ };
+
+ return (
+
+ {MODES.map((item) => {
+ const Icon = item.icon;
+ const isActive = item.value === mode;
+ const isCloudUpsell =
+ item.value === APP_SIDEBAR_MODE.CHAT && !chatEnabled;
+ const button = (
+ selectMode(item.value)}
+ >
+
+ {item.label}
+ {isCloudUpsell && (
+
+ Cloud
+
+ )}
+
+ );
+
+ if (!isCloudUpsell) return button;
+
+ return (
+
+ {button}
+
+ Available in Prowler Cloud
+
+
+ );
+ })}
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/app-sidebar.tsx b/ui/components/layout/app-sidebar/app-sidebar.tsx
new file mode 100644
index 0000000000..6864cd64a9
--- /dev/null
+++ b/ui/components/layout/app-sidebar/app-sidebar.tsx
@@ -0,0 +1,10 @@
+import { AppSidebarContent } from "./app-sidebar-content";
+
+export function AppSidebar() {
+ return (
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/index.ts b/ui/components/layout/app-sidebar/index.ts
new file mode 100644
index 0000000000..5ee953a19d
--- /dev/null
+++ b/ui/components/layout/app-sidebar/index.ts
@@ -0,0 +1,5 @@
+export { AppSidebar } from "./app-sidebar";
+export { AppSidebarModeSync } from "./app-sidebar-mode-sync";
+export { MobileAppSidebar } from "./mobile-app-sidebar";
+export type { AppSidebarMode } from "./types";
+export { APP_SIDEBAR_MODE } from "./types";
diff --git a/ui/components/layout/app-sidebar/launch-scan-action.tsx b/ui/components/layout/app-sidebar/launch-scan-action.tsx
new file mode 100644
index 0000000000..1da429811f
--- /dev/null
+++ b/ui/components/layout/app-sidebar/launch-scan-action.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { ScanLine } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { Button } from "@/components/shadcn/button/button";
+import { LAUNCH_SCAN_HREF } from "@/lib/scans-navigation";
+import { useScansStore } from "@/store";
+
+import type { AppSidebarSelectionHandler } from "./types";
+
+interface LaunchScanActionProps {
+ onSelect?: AppSidebarSelectionHandler;
+}
+
+function LaunchScanContent() {
+ return (
+ <>
+
+ Launch Scan
+
+ );
+}
+
+export function LaunchScanAction({ onSelect }: LaunchScanActionProps) {
+ const pathname = usePathname();
+ const openLaunchScanModal = useScansStore(
+ (state) => state.openLaunchScanModal,
+ );
+ const isScansPage = pathname.startsWith("/scans");
+
+ if (isScansPage) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/mobile-app-sidebar.test.tsx b/ui/components/layout/app-sidebar/mobile-app-sidebar.test.tsx
new file mode 100644
index 0000000000..75aae87f5a
--- /dev/null
+++ b/ui/components/layout/app-sidebar/mobile-app-sidebar.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("./app-sidebar-content", () => ({
+ AppSidebarContent: ({
+ onSelect,
+ }: {
+ onSelect?: () => HTMLElement | null;
+ }) => (
+
+ ),
+}));
+
+import { MobileAppSidebar } from "./mobile-app-sidebar";
+
+describe("MobileAppSidebar", () => {
+ it("replaces the open hamburger with a viewport X while the overlay is visible", async () => {
+ // Given
+ const user = userEvent.setup();
+ render();
+
+ // When
+ const openButton = screen.getByRole("button", { name: "Open menu" });
+ await user.click(openButton);
+
+ // Then
+ expect(screen.getByRole("dialog", { name: "App sidebar" })).toBeVisible();
+ const closeButton = screen.getByRole("button", { name: "Close menu" });
+ expect(closeButton).toBeVisible();
+ expect(closeButton.querySelector(".lucide-x")).toBeInTheDocument();
+ expect(
+ screen.queryByRole("button", { name: "Close" }),
+ ).not.toBeInTheDocument();
+
+ // When
+ await user.click(closeButton);
+
+ // Then
+ expect(
+ screen.queryByRole("dialog", { name: "App sidebar" }),
+ ).not.toBeInTheDocument();
+ expect(openButton).toHaveFocus();
+ });
+
+ it("closes after selecting an item from the shared sidebar content", async () => {
+ // Given
+ const user = userEvent.setup();
+ render();
+ await user.click(screen.getByRole("button", { name: "Open menu" }));
+
+ // When
+ await user.click(screen.getByRole("button", { name: "Alerts" }));
+
+ // Then
+ expect(
+ screen.queryByRole("dialog", { name: "App sidebar" }),
+ ).not.toBeInTheDocument();
+ });
+});
diff --git a/ui/components/layout/app-sidebar/mobile-app-sidebar.tsx b/ui/components/layout/app-sidebar/mobile-app-sidebar.tsx
new file mode 100644
index 0000000000..abb6fbbfe7
--- /dev/null
+++ b/ui/components/layout/app-sidebar/mobile-app-sidebar.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { MenuIcon, X } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { Button } from "@/components/shadcn/button/button";
+import {
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/shadcn/sheet";
+import { cn } from "@/lib/utils";
+
+import { AppSidebarContent } from "./app-sidebar-content";
+
+export function MobileAppSidebar() {
+ const [open, setOpen] = useState(false);
+ const triggerRef = useRef(null);
+
+ const handleSelect = () => {
+ setOpen(false);
+ return triggerRef.current;
+ };
+
+ return (
+
+
+
+
+
+
+ App sidebar
+ Primary application navigation
+
+
+
+
+
+
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/navigation-config.test.ts b/ui/components/layout/app-sidebar/navigation-config.test.ts
new file mode 100644
index 0000000000..1ad3fc7228
--- /dev/null
+++ b/ui/components/layout/app-sidebar/navigation-config.test.ts
@@ -0,0 +1,335 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
+import type { RolePermissionAttributes } from "@/types/users";
+
+import {
+ filterNavigationByPermissions,
+ getNavigationConfig,
+} from "./navigation-config";
+import { NAVIGATION_ITEM_KIND } from "./types";
+
+const getItem = (label: string) =>
+ getNavigationConfig({ pathname: "/alerts", apiDocsUrl: null })
+ .flatMap((section) => section.items)
+ .find((item) => item.label === label);
+
+const getConfigurationChildren = () => {
+ const configuration = getItem("Configuration");
+
+ if (configuration?.kind !== NAVIGATION_ITEM_KIND.COLLAPSIBLE) {
+ throw new Error("Configuration must be a collapsible navigation item");
+ }
+
+ return configuration.children;
+};
+
+describe("getNavigationConfig", () => {
+ afterEach(() => {
+ vi.unstubAllEnvs();
+ });
+
+ it("groups the Local Server navigation without losing available features", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+
+ // When
+ const sections = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: "https://local.example/api/v1/docs",
+ });
+
+ // Then
+ expect(sections.map((section) => section.label ?? null)).toEqual([
+ null,
+ "SECURITY",
+ "SETTINGS",
+ "HELP",
+ ]);
+ expect(sections[0]?.items.map((item) => item.label)).toEqual([
+ "Overview",
+ "Lighthouse AI",
+ ]);
+ expect(sections[1]?.items.map((item) => item.label)).toEqual([
+ "Compliance",
+ "Findings",
+ "Attack Paths",
+ "Scans",
+ "Resources",
+ ]);
+ expect(sections[2]?.items.map((item) => item.label)).toEqual([
+ "Configuration",
+ "Organization",
+ ]);
+ expect(sections[3]?.items.map((item) => item.label)).toEqual([
+ "Documentation",
+ "API Reference",
+ "Community Support",
+ "Prowler Hub",
+ ]);
+ });
+
+ it("models Local Server Cloud features as contextual upgrade actions", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+
+ // When
+ const children = getConfigurationChildren();
+
+ // Then
+ expect(children.map((item) => item.label)).toEqual([
+ "Providers",
+ "Alerts",
+ "Mutelist",
+ "Scans",
+ "CLI Import",
+ "Integrations",
+ "Lighthouse AI",
+ ]);
+ expect(children.find((item) => item.label === "Alerts")).toEqual(
+ expect.objectContaining({
+ kind: NAVIGATION_ITEM_KIND.CLOUD_UPGRADE,
+ cloudUpgradeFeature: CLOUD_UPGRADE_FEATURE.ALERTS,
+ }),
+ );
+ expect(children.find((item) => item.label === "Scans")).toEqual(
+ expect.objectContaining({
+ kind: NAVIGATION_ITEM_KIND.CLOUD_UPGRADE,
+ cloudUpgradeFeature: CLOUD_UPGRADE_FEATURE.SCAN_CONFIGURATION,
+ }),
+ );
+ expect(children.find((item) => item.label === "CLI Import")).toEqual(
+ expect.objectContaining({
+ kind: NAVIGATION_ITEM_KIND.CLOUD_UPGRADE,
+ cloudUpgradeFeature: CLOUD_UPGRADE_FEATURE.CLI_IMPORT,
+ }),
+ );
+ });
+
+ it("uses Cloud destinations and current New badges", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+
+ // When
+ const sections = getNavigationConfig({
+ pathname: "/scans/config",
+ apiDocsUrl: "https://ignored.example/docs",
+ });
+ const items = sections.flatMap((section) => section.items);
+ const configuration = items.find((item) => item.label === "Configuration");
+
+ if (configuration?.kind !== NAVIGATION_ITEM_KIND.COLLAPSIBLE) {
+ throw new Error("Configuration must be a collapsible navigation item");
+ }
+
+ // Then
+ expect(sections[0]?.items.map((item) => item.label)).toEqual(["Overview"]);
+ expect(configuration.children).not.toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({ label: "CLI Import" }),
+ ]),
+ );
+ expect(
+ configuration.children.find((item) => item.label === "Alerts"),
+ ).toEqual(expect.objectContaining({ highlight: true }));
+ expect(
+ configuration.children.find((item) => item.label === "Scans"),
+ ).toEqual(expect.objectContaining({ active: true, highlight: true }));
+ expect(items.find((item) => item.label === "Attack Paths")).not.toEqual(
+ expect.objectContaining({ highlight: true }),
+ );
+ expect(sections[3]?.items.map((item) => item.label)).toEqual([
+ "Documentation",
+ "API Reference",
+ "Support Desk",
+ "Prowler Hub",
+ ]);
+ });
+
+ it("keeps the Cloud Billing destination for users with billing permission", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ const permissions = {
+ manage_billing: true,
+ } as RolePermissionAttributes;
+
+ // When
+ const billing = getNavigationConfig({
+ pathname: "/billing",
+ apiDocsUrl: null,
+ permissions,
+ })
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "Billing");
+
+ // Then
+ expect(billing).toEqual(
+ expect.objectContaining({
+ href: "/billing",
+ active: true,
+ requiredPermission: "manage_billing",
+ }),
+ );
+ });
+
+ it("hides Billing without permission and in Local Server", () => {
+ // Given
+ const permissions = {
+ manage_billing: false,
+ } as RolePermissionAttributes;
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+
+ // When
+ const cloudItems = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: null,
+ permissions,
+ }).flatMap((section) => section.items);
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+ const localItems = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: null,
+ permissions: { ...permissions, manage_billing: true },
+ }).flatMap((section) => section.items);
+
+ // Then
+ expect(cloudItems.find((item) => item.label === "Billing")).toBeUndefined();
+ expect(localItems.find((item) => item.label === "Billing")).toBeUndefined();
+ });
+
+ it("keeps environment-specific API documentation destinations", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+
+ // When
+ const localApiReference = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: "https://local.example/api/v1/docs",
+ })
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "API Reference");
+
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ const cloudApiReference = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: "https://ignored.example/docs",
+ })
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "API Reference");
+
+ // Then
+ expect(localApiReference).toEqual(
+ expect.objectContaining({ href: "https://local.example/api/v1/docs" }),
+ );
+ expect(cloudApiReference).toEqual(
+ expect.objectContaining({ href: "https://api.prowler.com/api/v1/docs" }),
+ );
+ });
+
+ it("omits the Local Server API reference when no URL is configured", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+
+ // When
+ const items = getNavigationConfig({
+ pathname: "/",
+ apiDocsUrl: null,
+ }).flatMap((section) => section.items);
+
+ // Then
+ expect(
+ items.find((item) => item.label === "API Reference"),
+ ).toBeUndefined();
+ });
+
+ it("filters navigation by required permission after visible copy changes", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ const sections = getNavigationConfig({
+ pathname: "/integrations",
+ apiDocsUrl: null,
+ }).map((section) => ({
+ ...section,
+ items: section.items.map((item) =>
+ item.kind === NAVIGATION_ITEM_KIND.COLLAPSIBLE
+ ? {
+ ...item,
+ children: item.children.map((child) =>
+ child.label === "Integrations"
+ ? { ...child, label: "Connected apps" }
+ : child,
+ ),
+ }
+ : item,
+ ),
+ }));
+ const permissions = {
+ manage_integrations: false,
+ } as RolePermissionAttributes;
+
+ // When
+ const filtered = filterNavigationByPermissions(sections, permissions);
+
+ // Then
+ expect(
+ filtered
+ .flatMap((section) => section.items)
+ .filter((item) => item.kind === NAVIGATION_ITEM_KIND.COLLAPSIBLE)
+ .flatMap((item) => item.children)
+ .find((item) => item.label === "Connected apps"),
+ ).toBeUndefined();
+ });
+
+ it("keeps navigation when the required permission is granted", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
+ const permissions = {
+ manage_integrations: true,
+ } as RolePermissionAttributes;
+
+ // When
+ const configuration = getNavigationConfig({
+ pathname: "/integrations",
+ apiDocsUrl: null,
+ permissions,
+ })
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "Configuration");
+
+ // Then
+ expect(configuration).toEqual(
+ expect.objectContaining({
+ children: expect.arrayContaining([
+ expect.objectContaining({ label: "Integrations" }),
+ ]),
+ }),
+ );
+ });
+
+ it("matches complete route segments without stealing nested settings routes", () => {
+ // Given
+ vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
+
+ // When
+ const scanDetails = getNavigationConfig({
+ pathname: "/scans/scan-123",
+ apiDocsUrl: null,
+ });
+ const scanSettings = getNavigationConfig({
+ pathname: "/scans/config/edit",
+ apiDocsUrl: null,
+ });
+
+ // Then
+ expect(
+ scanDetails
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "Scans"),
+ ).toEqual(expect.objectContaining({ active: true }));
+ expect(
+ scanSettings
+ .flatMap((section) => section.items)
+ .find((item) => item.label === "Scans"),
+ ).toEqual(expect.objectContaining({ active: false }));
+ });
+});
diff --git a/ui/components/layout/app-sidebar/navigation-config.ts b/ui/components/layout/app-sidebar/navigation-config.ts
new file mode 100644
index 0000000000..40e15cb6e7
--- /dev/null
+++ b/ui/components/layout/app-sidebar/navigation-config.ts
@@ -0,0 +1,325 @@
+import {
+ Code,
+ CreditCard,
+ FileText,
+ GitBranch,
+ LayoutGrid,
+ MessageCircleQuestion,
+ Settings,
+ ShieldCheck,
+ SquareChartGantt,
+ Tag,
+ Timer,
+ Users,
+ Warehouse,
+} from "lucide-react";
+
+import { LighthouseIcon } from "@/components/icons/Icons";
+import { isCloud } from "@/lib/shared/env";
+import type { CloudUpgradeFeature } from "@/types/cloud-upgrade";
+import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
+import type { RolePermissionAttributes } from "@/types/users";
+
+import {
+ NAVIGATION_ITEM_KIND,
+ NAVIGATION_PERMISSION,
+ type NavigationChild,
+ type NavigationItem,
+ type NavigationSection,
+} from "./types";
+
+interface NavigationConfigOptions {
+ pathname: string;
+ apiDocsUrl?: string | null;
+ permissions?: RolePermissionAttributes;
+}
+
+interface CloudFeatureOptions {
+ isCloudEnvironment: boolean;
+ href: string;
+ label: string;
+ active: boolean;
+ feature: CloudUpgradeFeature;
+}
+
+function getCloudFeature({
+ isCloudEnvironment,
+ href,
+ label,
+ active,
+ feature,
+}: CloudFeatureOptions): NavigationChild {
+ if (!isCloudEnvironment) {
+ return {
+ kind: NAVIGATION_ITEM_KIND.CLOUD_UPGRADE,
+ label,
+ cloudUpgradeFeature: feature,
+ };
+ }
+
+ return {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href,
+ label,
+ active,
+ highlight: true,
+ };
+}
+
+function isRouteActive(pathname: string, href: string) {
+ return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+function hasRequiredPermission(
+ item: NavigationItem | NavigationChild,
+ permissions?: RolePermissionAttributes,
+) {
+ return (
+ item.requiredPermission === undefined ||
+ permissions?.[item.requiredPermission] !== false
+ );
+}
+
+export function filterNavigationByPermissions(
+ sections: NavigationSection[],
+ permissions?: RolePermissionAttributes,
+) {
+ return sections
+ .map((section) => ({
+ ...section,
+ items: section.items
+ .filter((item) => hasRequiredPermission(item, permissions))
+ .map((item) =>
+ item.kind === NAVIGATION_ITEM_KIND.COLLAPSIBLE
+ ? {
+ ...item,
+ children: item.children.filter((child) =>
+ hasRequiredPermission(child, permissions),
+ ),
+ }
+ : item,
+ ),
+ }))
+ .filter((section) => section.items.length > 0);
+}
+
+export function getNavigationConfig({
+ pathname,
+ apiDocsUrl = null,
+ permissions,
+}: NavigationConfigOptions): NavigationSection[] {
+ const isCloudEnvironment = isCloud();
+ const apiReferenceUrl = isCloudEnvironment
+ ? "https://api.prowler.com/api/v1/docs"
+ : apiDocsUrl;
+
+ const sections: NavigationSection[] = [
+ {
+ items: [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/",
+ label: "Overview",
+ icon: SquareChartGantt,
+ active: pathname === "/",
+ },
+ ...(!isCloudEnvironment
+ ? [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/lighthouse",
+ label: "Lighthouse AI",
+ icon: LighthouseIcon,
+ active:
+ isRouteActive(pathname, "/lighthouse") &&
+ !isRouteActive(pathname, "/lighthouse/settings"),
+ } as const,
+ ]
+ : []),
+ ],
+ },
+ {
+ label: "SECURITY",
+ items: [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/compliance",
+ label: "Compliance",
+ icon: ShieldCheck,
+ active: isRouteActive(pathname, "/compliance"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/findings?filter[muted]=false&filter[status__in]=FAIL",
+ label: "Findings",
+ icon: Tag,
+ active: isRouteActive(pathname, "/findings"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/attack-paths",
+ label: "Attack Paths",
+ icon: GitBranch,
+ active: isRouteActive(pathname, "/attack-paths"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/scans",
+ label: "Scans",
+ icon: Timer,
+ active:
+ isRouteActive(pathname, "/scans") &&
+ !isRouteActive(pathname, "/scans/config"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/resources",
+ label: "Resources",
+ icon: Warehouse,
+ active: isRouteActive(pathname, "/resources"),
+ },
+ ],
+ },
+ {
+ label: "SETTINGS",
+ items: [
+ {
+ kind: NAVIGATION_ITEM_KIND.COLLAPSIBLE,
+ label: "Configuration",
+ icon: Settings,
+ defaultOpen: true,
+ children: [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/providers",
+ label: "Providers",
+ active: isRouteActive(pathname, "/providers"),
+ },
+ getCloudFeature({
+ isCloudEnvironment,
+ href: "/alerts",
+ label: "Alerts",
+ active: isRouteActive(pathname, "/alerts"),
+ feature: CLOUD_UPGRADE_FEATURE.ALERTS,
+ }),
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/mutelist",
+ label: "Mutelist",
+ active: pathname === "/mutelist",
+ },
+ getCloudFeature({
+ isCloudEnvironment,
+ href: "/scans/config",
+ label: "Scans",
+ active: isRouteActive(pathname, "/scans/config"),
+ feature: CLOUD_UPGRADE_FEATURE.SCAN_CONFIGURATION,
+ }),
+ ...(!isCloudEnvironment
+ ? [
+ {
+ kind: NAVIGATION_ITEM_KIND.CLOUD_UPGRADE,
+ label: "CLI Import",
+ cloudUpgradeFeature: CLOUD_UPGRADE_FEATURE.CLI_IMPORT,
+ } as const,
+ ]
+ : []),
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/integrations",
+ label: "Integrations",
+ requiredPermission: NAVIGATION_PERMISSION.MANAGE_INTEGRATIONS,
+ active: isRouteActive(pathname, "/integrations"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/lighthouse/settings",
+ label: "Lighthouse AI",
+ active: isRouteActive(pathname, "/lighthouse/settings"),
+ },
+ ],
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.COLLAPSIBLE,
+ label: "Organization",
+ icon: Users,
+ defaultOpen: false,
+ children: [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/users",
+ label: "Users",
+ active: isRouteActive(pathname, "/users"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/invitations",
+ label: "Invitations",
+ active: isRouteActive(pathname, "/invitations"),
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/roles",
+ label: "Roles",
+ active: isRouteActive(pathname, "/roles"),
+ },
+ ],
+ },
+ ...(isCloudEnvironment
+ ? [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "/billing",
+ label: "Billing",
+ icon: CreditCard,
+ requiredPermission: NAVIGATION_PERMISSION.MANAGE_BILLING,
+ active: isRouteActive(pathname, "/billing"),
+ } as const,
+ ]
+ : []),
+ ],
+ },
+ {
+ label: "HELP",
+ items: [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "https://docs.prowler.com/",
+ label: "Documentation",
+ icon: FileText,
+ target: "_blank",
+ },
+ ...(apiReferenceUrl
+ ? [
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: apiReferenceUrl,
+ label: "API Reference",
+ icon: Code,
+ target: "_blank",
+ } as const,
+ ]
+ : []),
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: isCloudEnvironment
+ ? "https://customer.support.prowler.com/servicedesk/customer/portal/9/create/102"
+ : "https://github.com/prowler-cloud/prowler/issues",
+ label: isCloudEnvironment ? "Support Desk" : "Community Support",
+ icon: MessageCircleQuestion,
+ target: "_blank",
+ },
+ {
+ kind: NAVIGATION_ITEM_KIND.LINK,
+ href: "https://hub.prowler.com/",
+ label: "Prowler Hub",
+ icon: LayoutGrid,
+ target: "_blank",
+ tooltip: "Looking for all available checks? learn more.",
+ },
+ ],
+ },
+ ];
+
+ return filterNavigationByPermissions(sections, permissions);
+}
diff --git a/ui/components/layout/app-sidebar/sidebar-footer.tsx b/ui/components/layout/app-sidebar/sidebar-footer.tsx
new file mode 100644
index 0000000000..66c45a5bcb
--- /dev/null
+++ b/ui/components/layout/app-sidebar/sidebar-footer.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Cloud } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/shadcn/button/button";
+import { useCloudUpgradeStore } from "@/store";
+import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
+
+import type { AppSidebarSelectionHandler } from "./types";
+
+interface SidebarFooterProps {
+ isCloudEnvironment: boolean;
+ onSelect?: AppSidebarSelectionHandler;
+}
+
+export function SidebarFooter({
+ isCloudEnvironment,
+ onSelect,
+}: SidebarFooterProps) {
+ const openCloudUpgrade = useCloudUpgradeStore(
+ (state) => state.openCloudUpgrade,
+ );
+ const version = process.env.NEXT_PUBLIC_PROWLER_RELEASE_VERSION;
+
+ return (
+
+ {!isCloudEnvironment && (
+
+
+
+ )}
+
+
+ {isCloudEnvironment && (
+
+ Service status
+
+ )}
+ {version}
+
+
+ {item.children.map((child) => (
+ -
+
+
+ ))}
+
+
+
+ );
+}
+
+function NavigationSectionList({
+ section,
+ onSelect,
+}: {
+ section: NavigationSection;
+ onSelect?: AppSidebarSelectionHandler;
+}) {
+ return (
+
+ {section.label && (
+
+ )}
+
+ {section.items.map((item) => (
+ -
+ {item.kind === NAVIGATION_ITEM_KIND.COLLAPSIBLE ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+ );
+}
+
+export function SidebarNavigation({
+ sections,
+ onSelect,
+}: SidebarNavigationProps) {
+ return (
+
+
+
+ );
+}
diff --git a/ui/components/layout/app-sidebar/types.ts b/ui/components/layout/app-sidebar/types.ts
new file mode 100644
index 0000000000..a05d593779
--- /dev/null
+++ b/ui/components/layout/app-sidebar/types.ts
@@ -0,0 +1,71 @@
+import type { IconComponent } from "@/types";
+import type { CloudUpgradeFeature } from "@/types/cloud-upgrade";
+
+export const APP_SIDEBAR_MODE = {
+ BROWSE: "browse",
+ CHAT: "chat",
+} as const;
+
+export type AppSidebarMode =
+ (typeof APP_SIDEBAR_MODE)[keyof typeof APP_SIDEBAR_MODE];
+
+export const NAVIGATION_ITEM_KIND = {
+ LINK: "link",
+ COLLAPSIBLE: "collapsible",
+ CLOUD_UPGRADE: "cloud_upgrade",
+} as const;
+
+export const NAVIGATION_PERMISSION = {
+ MANAGE_BILLING: "manage_billing",
+ MANAGE_INTEGRATIONS: "manage_integrations",
+} as const;
+
+export type NavigationPermission =
+ (typeof NAVIGATION_PERMISSION)[keyof typeof NAVIGATION_PERMISSION];
+
+interface NavigationLabel {
+ label: string;
+ requiredPermission?: NavigationPermission;
+}
+
+export interface NavigationLink extends NavigationLabel {
+ kind: typeof NAVIGATION_ITEM_KIND.LINK;
+ href: string;
+ icon: IconComponent;
+ active?: boolean;
+ highlight?: boolean;
+ target?: string;
+ tooltip?: string;
+}
+
+export interface NavigationChildLink extends NavigationLabel {
+ kind: typeof NAVIGATION_ITEM_KIND.LINK;
+ href: string;
+ active?: boolean;
+ disabled?: boolean;
+ highlight?: boolean;
+ target?: string;
+}
+
+export interface NavigationCloudUpgrade extends NavigationLabel {
+ kind: typeof NAVIGATION_ITEM_KIND.CLOUD_UPGRADE;
+ cloudUpgradeFeature: CloudUpgradeFeature;
+}
+
+export type NavigationChild = NavigationChildLink | NavigationCloudUpgrade;
+
+export interface NavigationCollapsible extends NavigationLabel {
+ kind: typeof NAVIGATION_ITEM_KIND.COLLAPSIBLE;
+ icon: IconComponent;
+ children: NavigationChild[];
+ defaultOpen: boolean;
+}
+
+export type NavigationItem = NavigationLink | NavigationCollapsible;
+
+export interface NavigationSection {
+ label?: string;
+ items: NavigationItem[];
+}
+
+export type AppSidebarSelectionHandler = () => HTMLElement | null;
diff --git a/ui/components/layout/index.ts b/ui/components/layout/index.ts
index 33b087bb29..bdc128d36c 100644
--- a/ui/components/layout/index.ts
+++ b/ui/components/layout/index.ts
@@ -1,4 +1,4 @@
+export * from "./app-sidebar";
export * from "./main-layout";
export * from "./nav-bar";
-export * from "./sidebar";
export * from "./user-nav";
diff --git a/ui/components/layout/main-layout/main-layout.test.tsx b/ui/components/layout/main-layout/main-layout.test.tsx
index 90c28cfa0c..9fc9ae816e 100644
--- a/ui/components/layout/main-layout/main-layout.test.tsx
+++ b/ui/components/layout/main-layout/main-layout.test.tsx
@@ -3,19 +3,8 @@ import { describe, expect, it, vi } from "vitest";
import MainLayout from "./main-layout";
-vi.mock("@/hooks/use-sidebar", () => ({
- useSidebar: vi.fn(),
-}));
-
-vi.mock("@/hooks/use-store", () => ({
- useStore: () => ({
- getOpenState: () => true,
- settings: { disabled: false },
- }),
-}));
-
-vi.mock("../sidebar/sidebar", () => ({
- Sidebar: () => ,
+vi.mock("@/components/layout/app-sidebar", () => ({
+ AppSidebar: () => ,
}));
vi.mock("@/components/shared/cloud-upgrade-modal", () => ({
@@ -31,6 +20,8 @@ describe("MainLayout", () => {
);
expect(screen.getByTestId("cloud-upgrade-modal")).toBeInTheDocument();
+ expect(screen.getByTestId("sidebar")).toBeInTheDocument();
expect(screen.getByText("Page content")).toBeVisible();
+ expect(screen.getByRole("main")).toBeVisible();
});
});
diff --git a/ui/components/layout/main-layout/main-layout.tsx b/ui/components/layout/main-layout/main-layout.tsx
index e320e0b3d2..5f12e22aba 100644
--- a/ui/components/layout/main-layout/main-layout.tsx
+++ b/ui/components/layout/main-layout/main-layout.tsx
@@ -1,49 +1,15 @@
-"use client";
+import { type ReactNode, Suspense } from "react";
+import { AppSidebar } from "@/components/layout/app-sidebar";
import { CloudUpgradeModal } from "@/components/shared/cloud-upgrade-modal";
-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;
+export default function MainLayout({ children }: { children: ReactNode }) {
return (
- {/* Top-left gradient halo */}
-
-
- {/* Bottom-right gradient halo */}
-
-
-
+
-
- {children}
+
+ {children}
-
-
-
-
+
{/* Suspense contains the useSearchParams() CSR bailout in BreadcrumbNavigation
so statically prerendered pages don't fail the build. */}
diff --git a/ui/components/layout/sidebar/collapsible-menu.tsx b/ui/components/layout/sidebar/collapsible-menu.tsx
deleted file mode 100644
index ed9ea29b2f..0000000000
--- a/ui/components/layout/sidebar/collapsible-menu.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-"use client";
-
-import { ChevronDown } from "lucide-react";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
-
-import { SubmenuItem } from "@/components/layout/sidebar/submenu-item";
-import { Button } from "@/components/shadcn/button/button";
-import {
- Collapsible,
- CollapsibleContent,
- CollapsibleTrigger,
-} from "@/components/shadcn/collapsible";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "@/components/shadcn/tooltip";
-import { cn } from "@/lib/utils";
-import {
- IconComponent,
- type MenuSelectionHandler,
- SUBMENU_KIND,
- SubmenuProps,
-} from "@/types";
-
-interface CollapsibleMenuProps {
- icon: IconComponent;
- label: string;
- submenus: SubmenuProps[];
- defaultOpen?: boolean;
- isOpen: boolean;
- onSelect?: MenuSelectionHandler;
-}
-
-export const CollapsibleMenu = ({
- icon: Icon,
- label,
- submenus,
- defaultOpen = false,
- isOpen: isSidebarOpen,
- onSelect,
-}: CollapsibleMenuProps) => {
- const pathname = usePathname();
- const isSubmenuActive = submenus.some(
- (submenu) =>
- submenu.kind !== SUBMENU_KIND.CLOUD_UPGRADE &&
- (submenu.active === undefined
- ? submenu.href === pathname
- : submenu.active),
- );
- const [isCollapsed, setIsCollapsed] = useState(
- isSubmenuActive || defaultOpen,
- );
- const isOpen = isSidebarOpen && isCollapsed;
-
- return (
-
-
-
-
-
-
-
- {!isSidebarOpen && (
- {label}
- )}
-
-
- {submenus.map((submenu, index) => (
-
- ))}
-
-
- );
-};
diff --git a/ui/components/layout/sidebar/index.ts b/ui/components/layout/sidebar/index.ts
deleted file mode 100644
index 6fe9b4c4e2..0000000000
--- a/ui/components/layout/sidebar/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./collapsible-menu";
-export * from "./menu";
-export * from "./menu-item";
-export * from "./sheet-menu";
-export * from "./sidebar";
-export * from "./sidebar-toggle";
-export * from "./submenu-item";
diff --git a/ui/components/layout/sidebar/menu-item.tsx b/ui/components/layout/sidebar/menu-item.tsx
deleted file mode 100644
index 739041ee82..0000000000
--- a/ui/components/layout/sidebar/menu-item.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-import { Badge } from "@/components/shadcn/badge/badge";
-import { Button } from "@/components/shadcn/button/button";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "@/components/shadcn/tooltip";
-import { cn } from "@/lib/utils";
-import { IconComponent, type MenuSelectionHandler } from "@/types";
-
-interface MenuItemProps {
- href: string;
- label: string;
- icon: IconComponent;
- active?: boolean;
- target?: string;
- tooltip?: string;
- isOpen: boolean;
- highlight?: boolean;
- onSelect?: MenuSelectionHandler;
-}
-
-export const MenuItem = ({
- href,
- label,
- icon: Icon,
- active,
- target,
- tooltip,
- isOpen,
- highlight,
- onSelect,
-}: MenuItemProps) => {
- const pathname = usePathname();
- // Extract only the pathname from href (without query parameters) for comparison
- const hrefPathname = href.split("?")[0];
- const isActive =
- active !== undefined ? active : pathname.startsWith(hrefPathname);
-
- // Show tooltip always for Prowler Hub, or when sidebar is collapsed
- const showTooltip = label === "Prowler Hub" ? !!tooltip : !isOpen;
-
- return (
-
-
-
-
- {showTooltip && (
- {tooltip || label}
- )}
-
- );
-};
diff --git a/ui/components/layout/sidebar/menu.test.tsx b/ui/components/layout/sidebar/menu.test.tsx
deleted file mode 100644
index 5e756ecbad..0000000000
--- a/ui/components/layout/sidebar/menu.test.tsx
+++ /dev/null
@@ -1,302 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import {
- afterEach,
- beforeAll,
- beforeEach,
- describe,
- expect,
- it,
- vi,
-} from "vitest";
-
-import { SIDEBAR_NAVIGATION_MODE } from "@/hooks/use-sidebar";
-
-const {
- openLaunchScanModalMock,
- openCloudUpgradeMock,
- pathnameValue,
- pushMock,
- navigationModeValue,
- setNavigationModeMock,
-} = vi.hoisted(() => ({
- openLaunchScanModalMock: vi.fn(),
- openCloudUpgradeMock: vi.fn(),
- pathnameValue: { current: "/findings" },
- pushMock: vi.fn(),
- navigationModeValue: { current: "browse" },
- setNavigationModeMock: vi.fn(),
-}));
-
-vi.mock("next/navigation", () => ({
- usePathname: () => pathnameValue.current,
- useRouter: () => ({
- push: pushMock,
- }),
-}));
-
-vi.mock("next-auth/react", () => ({
- useSession: () => ({
- data: { user: { permissions: {} } },
- status: "authenticated",
- }),
-}));
-
-vi.mock("@/hooks", () => ({
- useAuth: () => ({
- permissions: {},
- }),
-}));
-
-vi.mock("@/lib/menu-list", () => ({
- getMenuList: () => [],
-}));
-
-vi.mock("@/app/(prowler)/lighthouse/_components/navigation", () => ({
- LighthouseV2SidebarChat: () => ,
-}));
-
-vi.mock("@/store", () => ({
- useScansStore: (
- selector: (state: { openLaunchScanModal: () => void }) => unknown,
- ) => selector({ openLaunchScanModal: openLaunchScanModalMock }),
- useCloudUpgradeStore: (
- selector: (state: {
- openCloudUpgrade: (feature: string) => void;
- }) => unknown,
- ) => selector({ openCloudUpgrade: openCloudUpgradeMock }),
-}));
-
-vi.mock("@/hooks/use-sidebar", async (importActual) => {
- const actual = await importActual();
- return {
- ...actual,
- useSidebar: (
- selector: (state: {
- navigationMode: string;
- setNavigationMode: (mode: string) => void;
- }) => unknown,
- ) =>
- selector({
- navigationMode: navigationModeValue.current,
- setNavigationMode: setNavigationModeMock,
- }),
- };
-});
-
-let MenuComponent: typeof import("./menu").Menu;
-let SidebarNavigationModeToggleComponent: typeof import("@/components/sidebar/navigation-mode-toggle").SidebarNavigationModeToggle;
-
-const expectLastCloudUpgrade = (feature: string) => {
- expect(openCloudUpgradeMock.mock.calls.at(-1)?.[0]).toBe(feature);
-};
-
-beforeAll(async () => {
- MenuComponent = (await import("./menu")).Menu;
- SidebarNavigationModeToggleComponent = (
- await import("@/components/sidebar/navigation-mode-toggle")
- ).SidebarNavigationModeToggle;
-});
-
-afterEach(() => {
- vi.unstubAllEnvs();
- navigationModeValue.current = "browse";
- openCloudUpgradeMock.mockClear();
-});
-
-describe("Menu", () => {
- it("links scan to the scans page with the modal open", () => {
- pathnameValue.current = "/findings";
-
- render();
-
- const launchScanLink = screen.getByRole("link", { name: /launch scan/i });
- const launchScanWrapper = launchScanLink.closest("div.flex.shrink-0");
-
- expect(launchScanLink).toHaveAttribute("href", "/scans?launchScan=true");
- expect(launchScanWrapper).toHaveClass("flex", "justify-center");
- expect(launchScanLink).toHaveClass("h-14", "w-full", "p-1");
- expect(launchScanLink).not.toHaveClass("h-8", "h-9", "h-10");
- expect(screen.getByText("Scan")).toHaveClass("text-xl", "leading-8");
- expect(screen.getByText("Scan")).not.toHaveClass("text-2xl", "font-bold");
- expect(
- launchScanLink.querySelector('svg[viewBox="0 0 432.08 396.77"]'),
- ).toBeInTheDocument();
- });
-
- it("opens the launch scan modal without navigation when already on scans", async () => {
- pathnameValue.current = "/scans";
-
- render();
-
- await screen.getByRole("button", { name: /launch scan/i }).click();
-
- expect(openLaunchScanModalMock).toHaveBeenCalledTimes(1);
- expect(
- screen.queryByRole("link", { name: /launch scan/i }),
- ).not.toBeInTheDocument();
- });
-
- it("shows the Prowler icon when the menu is collapsed", () => {
- pathnameValue.current = "/findings";
-
- render();
-
- const launchScanLink = screen.getByRole("link", { name: /launch scan/i });
-
- expect(launchScanLink).toHaveClass("h-9", "w-14");
- expect(launchScanLink).not.toHaveClass("h-14");
- expect(
- launchScanLink.querySelector('svg[viewBox="0 0 432.08 396.77"]'),
- ).toBeInTheDocument();
- });
-
- it("swaps to the Lighthouse chat sidebar in cloud CHAT mode", () => {
- pathnameValue.current = "/lighthouse";
- vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
- navigationModeValue.current = SIDEBAR_NAVIGATION_MODE.CHAT;
-
- render();
-
- expect(screen.getByTestId("lighthouse-chat-sidebar")).toBeInTheDocument();
- expect(screen.getByRole("button", { name: "Chat" })).toBeInTheDocument();
- });
-
- it("keeps the navigation menu in cloud BROWSE mode", () => {
- pathnameValue.current = "/findings";
- vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "true");
- navigationModeValue.current = SIDEBAR_NAVIGATION_MODE.BROWSE;
-
- render();
-
- expect(
- screen.queryByTestId("lighthouse-chat-sidebar"),
- ).not.toBeInTheDocument();
- expect(screen.getByRole("button", { name: "Home" })).toBeInTheDocument();
- });
-
- it("opens the managed Lighthouse upgrade from Chat in Local Server", async () => {
- pathnameValue.current = "/findings";
- vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
-
- render();
-
- expect(screen.getByRole("button", { name: "Home" })).toBeInTheDocument();
- const chatButton = screen.getByRole("button", { name: "Chat" });
- expect(chatButton).not.toHaveAttribute("aria-disabled");
-
- await userEvent.click(chatButton);
-
- expectLastCloudUpgrade("lighthouse_ai");
- });
-
- it("shows a persistent Cloud upgrade action only in Local Server", async () => {
- pathnameValue.current = "/findings";
- vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
-
- render();
-
- const upgradeButton = screen.getByRole("button", {
- name: "Explore Prowler Cloud",
- });
- expect(upgradeButton).toHaveClass("bg-button-primary");
-
- await userEvent.click(upgradeButton);
-
- expectLastCloudUpgrade("general");
- });
-
- it("separates the persistent Cloud upgrade action from the navigation", () => {
- // Given
- pathnameValue.current = "/findings";
- vi.stubEnv("NEXT_PUBLIC_IS_CLOUD_ENV", "false");
-
- // When
- render();
-
- // Then
- expect(
- screen.getByRole("button", { name: "Explore Prowler Cloud" })
- .parentElement,
- ).toHaveClass("pt-4");
- });
-});
-
-describe("SidebarNavigationModeToggle", () => {
- beforeEach(() => {
- pushMock.mockClear();
- });
-
- it("navigates to Lighthouse when Chat mode is selected", async () => {
- // Given
- const user = userEvent.setup();
- const onChange = vi.fn();
-
- render(
- ,
- );
-
- // When
- await user.click(screen.getByRole("button", { name: "Chat" }));
-
- // Then
- expect(onChange).toHaveBeenCalledWith(SIDEBAR_NAVIGATION_MODE.CHAT);
- expect(pushMock).toHaveBeenCalledWith("/lighthouse");
- });
-
- it("does not navigate when Home mode is selected", async () => {
- // Given
- const user = userEvent.setup();
- const onChange = vi.fn();
-
- render(
- ,
- );
-
- // When
- await user.click(screen.getByRole("button", { name: "Home" }));
-
- // Then
- expect(onChange).toHaveBeenCalledWith(SIDEBAR_NAVIGATION_MODE.BROWSE);
- expect(pushMock).not.toHaveBeenCalled();
- });
-
- it("opens the Cloud upgrade and shows the cloud tooltip when chat is unavailable", async () => {
- // Given
- const user = userEvent.setup();
- const onChange = vi.fn();
-
- render(
- ,
- );
-
- // When
- const chatButton = screen.getByRole("button", { name: "Chat" });
- await user.hover(chatButton);
-
- // Then
- const tooltip = await screen.findByRole("tooltip");
- expect(tooltip).toHaveTextContent("Available in Prowler Cloud");
-
- // When
- await user.click(chatButton);
-
- // Then
- expect(onChange).not.toHaveBeenCalled();
- expect(pushMock).not.toHaveBeenCalled();
- expectLastCloudUpgrade("lighthouse_ai");
- });
-});
diff --git a/ui/components/layout/sidebar/menu.tsx b/ui/components/layout/sidebar/menu.tsx
deleted file mode 100644
index c64588d384..0000000000
--- a/ui/components/layout/sidebar/menu.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-"use client";
-
-import { Cloud } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-import { LighthouseV2SidebarChat } from "@/app/(prowler)/lighthouse/_components/navigation";
-import { InfoIcon, ProwlerShort } from "@/components/icons";
-import { CollapsibleMenu } from "@/components/layout/sidebar/collapsible-menu";
-import { MenuItem } from "@/components/layout/sidebar/menu-item";
-import { Separator } from "@/components/shadcn";
-import { Button } from "@/components/shadcn/button/button";
-import { ScrollArea } from "@/components/shadcn/scroll-area/scroll-area";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "@/components/shadcn/tooltip";
-import { SidebarNavigationModeToggle } from "@/components/sidebar/navigation-mode-toggle";
-import { useAuth } from "@/hooks";
-import { useRuntimeConfig } from "@/hooks/use-runtime-config";
-import { SIDEBAR_NAVIGATION_MODE, useSidebar } from "@/hooks/use-sidebar";
-import { getMenuList } from "@/lib/menu-list";
-import { LAUNCH_SCAN_HREF } from "@/lib/scans-navigation";
-import { isCloud } from "@/lib/shared/env";
-import { cn } from "@/lib/utils";
-import { useCloudUpgradeStore, useScansStore } from "@/store";
-import { GroupProps, type MenuSelectionHandler } from "@/types";
-import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
-import { RolePermissionAttributes } from "@/types/users";
-
-interface MenuHideRule {
- label: string;
- condition: (permissions: RolePermissionAttributes) => boolean;
-}
-
-const MENU_HIDE_RULES: MenuHideRule[] = [
- {
- label: "Billing",
- condition: (permissions) => permissions?.manage_billing === false,
- },
- {
- label: "Integrations",
- condition: (permissions) => permissions?.manage_integrations === false,
- },
-];
-
-const filterMenus = (menuGroups: GroupProps[], labelsToHide: string[]) => {
- return menuGroups
- .map((group) => ({
- ...group,
- menus: group.menus
- .filter((menu) => !labelsToHide.includes(menu.label))
- .map((menu) => ({
- ...menu,
- submenus: menu.submenus?.filter(
- (submenu) => !labelsToHide.includes(submenu.label),
- ),
- })),
- }))
- .filter((group) => group.menus.length > 0);
-};
-
-interface SidebarMenuProps {
- isOpen: boolean;
- onSelect?: MenuSelectionHandler;
-}
-
-export const Menu = ({ isOpen, onSelect }: SidebarMenuProps) => {
- const pathname = usePathname();
- const { permissions } = useAuth();
- const openLaunchScanModal = useScansStore(
- (state) => state.openLaunchScanModal,
- );
- const isScansPage = pathname.startsWith("/scans");
- const { apiDocsUrl } = useRuntimeConfig();
- const isCloudEnv = isCloud();
- const openCloudUpgrade = useCloudUpgradeStore(
- (state) => state.openCloudUpgrade,
- );
- const navigationMode = useSidebar((state) => state.navigationMode);
- const setNavigationMode = useSidebar((state) => state.setNavigationMode);
-
- const menuList = getMenuList({
- pathname,
- apiDocsUrl,
- });
-
- const labelsToHide = MENU_HIDE_RULES.filter((rule) =>
- rule.condition(permissions),
- ).map((rule) => rule.label);
-
- const filteredMenuList = filterMenus(menuList, labelsToHide);
-
- return (
-
- {/* Launch Scan Button — mt-1 aligns its top with the main content panel
- (navbar 72px + py-4 = 88px), matching the fixed-height logo block. */}
-
-
-
- {isScansPage ? (
-
- ) : (
-
- )}
-
- {!isOpen && Launch Scan}
-
-
-
-
-
- {/* Menu Items */}
-
- {isCloudEnv && navigationMode === SIDEBAR_NAVIGATION_MODE.CHAT ? (
-
- ) : (
-
-
-
- )}
-
-
- {!isCloudEnv && (
-
-
-
-
-
- {!isOpen && (
-
- Explore Prowler Cloud
-
- )}
-
-
- )}
-
- {/* Footer */}
-
- {isOpen ? (
- <>
- {process.env.NEXT_PUBLIC_PROWLER_RELEASE_VERSION}
- {isCloudEnv && (
- <>
-
-
-
-
- Service Status
-
-
-
- )}
-
- ) : (
- isCloudEnv && (
-
-
-
-
-
-
- Service Status
-
- )
- )}
-
-
) => (
+}: HTMLAttributes
) => (
,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
+function SheetTitle({
+ className,
+ ref,
+ ...props
+}: ComponentPropsWithRef) {
+ return (
+
+ );
+}
SheetTitle.displayName = SheetPrimitive.Title.displayName;
-const SheetDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
+function SheetDescription({
+ className,
+ ref,
+ ...props
+}: ComponentPropsWithRef) {
+ return (
+
+ );
+}
SheetDescription.displayName = SheetPrimitive.Description.displayName;
export {
diff --git a/ui/components/sidebar/navigation-mode-sync.test.tsx b/ui/components/sidebar/navigation-mode-sync.test.tsx
deleted file mode 100644
index 935c20762a..0000000000
--- a/ui/components/sidebar/navigation-mode-sync.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { render } from "@testing-library/react";
-import { beforeEach, describe, expect, it } from "vitest";
-
-import { SIDEBAR_NAVIGATION_MODE, useSidebar } from "@/hooks/use-sidebar";
-
-import { SidebarNavigationModeSync } from "./navigation-mode-sync";
-
-describe("SidebarNavigationModeSync", () => {
- beforeEach(() => {
- useSidebar.setState({
- navigationMode: SIDEBAR_NAVIGATION_MODE.CHAT,
- });
- });
-
- it("restores app navigation mode when the overview mounts", () => {
- // Given / When
- render();
-
- // Then
- expect(useSidebar.getState().navigationMode).toBe(
- SIDEBAR_NAVIGATION_MODE.BROWSE,
- );
- });
-});
diff --git a/ui/components/sidebar/navigation-mode-sync.tsx b/ui/components/sidebar/navigation-mode-sync.tsx
deleted file mode 100644
index d79a596936..0000000000
--- a/ui/components/sidebar/navigation-mode-sync.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { useMountEffect } from "@/hooks/use-mount-effect";
-import { type SidebarNavigationMode, useSidebar } from "@/hooks/use-sidebar";
-
-interface SidebarNavigationModeSyncProps {
- mode: SidebarNavigationMode;
-}
-
-export function SidebarNavigationModeSync({
- mode,
-}: SidebarNavigationModeSyncProps) {
- const setNavigationMode = useSidebar((state) => state.setNavigationMode);
-
- useMountEffect(() => {
- setNavigationMode(mode);
- });
-
- return null;
-}
diff --git a/ui/components/sidebar/navigation-mode-toggle.tsx b/ui/components/sidebar/navigation-mode-toggle.tsx
deleted file mode 100644
index 73954e48ab..0000000000
--- a/ui/components/sidebar/navigation-mode-toggle.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-"use client";
-
-import { Home } from "lucide-react";
-import { useRouter } from "next/navigation";
-
-import { LighthouseIcon } from "@/components/icons/Icons";
-import { Badge } from "@/components/shadcn/badge/badge";
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from "@/components/shadcn/tooltip";
-import {
- SIDEBAR_NAVIGATION_MODE,
- type SidebarNavigationMode,
-} from "@/hooks/use-sidebar";
-import { cn } from "@/lib/utils";
-import { useCloudUpgradeStore } from "@/store";
-import { CLOUD_UPGRADE_FEATURE } from "@/types/cloud-upgrade";
-import type { MenuSelectionHandler } from "@/types/components";
-
-export function SidebarNavigationModeToggle({
- isOpen,
- value,
- onChange,
- chatEnabled = true,
- onSelect,
-}: {
- isOpen: boolean;
- value: SidebarNavigationMode;
- onChange: (value: SidebarNavigationMode) => void;
- chatEnabled?: boolean;
- onSelect?: MenuSelectionHandler;
-}) {
- const router = useRouter();
- const openCloudUpgrade = useCloudUpgradeStore(
- (state) => state.openCloudUpgrade,
- );
- const modes = [
- {
- value: SIDEBAR_NAVIGATION_MODE.BROWSE,
- label: "Home",
- icon: Home,
- },
- {
- value: SIDEBAR_NAVIGATION_MODE.CHAT,
- label: "Chat",
- icon: LighthouseIcon,
- },
- ] as const;
-
- const handleModeChange = (mode: SidebarNavigationMode, disabled: boolean) => {
- if (disabled) {
- openCloudUpgrade(
- CLOUD_UPGRADE_FEATURE.LIGHTHOUSE_AI,
- onSelect?.() ?? undefined,
- );
- return;
- }
- onChange(mode);
- onSelect?.();
- if (mode === SIDEBAR_NAVIGATION_MODE.CHAT) {
- router.push("/lighthouse");
- }
- };
-
- return (
-
-
- {modes.map((mode) => {
- const Icon = mode.icon;
- const active = value === mode.value;
- const disabled =
- mode.value === SIDEBAR_NAVIGATION_MODE.CHAT && !chatEnabled;
- const button = (
-
- );
-
- const tooltipContent = disabled
- ? "Available in Prowler Cloud"
- : !isOpen
- ? mode.label
- : null;
-
- if (!tooltipContent) {
- return button;
- }
-
- return (
-
- {button}
- {tooltipContent}
-
- );
- })}
-
-