diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/campaign-sidebar.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/campaign-sidebar.tsx
new file mode 100644
index 000000000..d634531be
--- /dev/null
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/campaign-sidebar.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
+import {
+ GiftIcon,
+ HistoryIcon,
+ HomeIcon,
+ PaletteIcon,
+ SettingsIcon,
+ TrophyIcon,
+ UsersIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
+import { AboutGridaWestCard } from "./about-west-card";
+
+type CampaignSidebarProps = {
+ baseUrl: string;
+ campaignsUrl: string;
+ campaignTitle: string;
+};
+
+type SidebarMenuLinkProps = {
+ href: string;
+ children: ReactNode;
+ size?: "default" | "sm" | "lg";
+ matchSubpaths?: boolean;
+};
+
+function SidebarMenuLink({
+ href,
+ children,
+ size = "sm",
+ matchSubpaths = true,
+}: SidebarMenuLinkProps) {
+ const pathname = usePathname();
+ const isActive = matchSubpaths
+ ? pathname === href || pathname.startsWith(`${href}/`)
+ : pathname === href;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function CampaignSidebar({
+ baseUrl,
+ campaignsUrl,
+ campaignTitle,
+}: CampaignSidebarProps) {
+ return (
+
+
+
+
+
+
+
+
+ {campaignTitle}
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+ Participants
+
+
+
+ Quests
+
+
+
+ Rewards
+
+
+
+ Observability
+
+
+
+
+
+ Design
+
+
+
+
+ Design
+
+
+
+ Settings
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/layout.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/layout.tsx
index 593ff3216..545fd3a5f 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/layout.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/layout.tsx
@@ -1,34 +1,9 @@
-import React from "react";
import { createWestReferralClient } from "@/lib/supabase/server";
import { CampaignProvider } from "./store";
-import {
- Sidebar,
- SidebarContent,
- SidebarHeader,
- SidebarGroup,
- SidebarGroupContent,
- SidebarMenu,
- SidebarMenuButton,
- SidebarMenuItem,
- SidebarProvider,
- SidebarFooter,
- SidebarGroupLabel,
-} from "@/components/ui/sidebar";
-import Link from "next/link";
-import { ArrowLeftIcon } from "@radix-ui/react-icons";
-import {
- GiftIcon,
- HistoryIcon,
- HomeIcon,
- PaletteIcon,
- SettingsIcon,
- TrophyIcon,
- UsersIcon,
-} from "lucide-react";
-import { AboutGridaWestCard } from "./about-west-card";
+import { SidebarProvider } from "@/components/ui/sidebar";
import { notFound } from "next/navigation";
import { Metadata } from "next";
-import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
+import { CampaignSidebar } from "./campaign-sidebar";
type Params = { org: string; proj: string; campaign: string };
export const metadata: Metadata = {
@@ -55,102 +30,19 @@ export default async function CampaignLayout({
return notFound();
}
- const base_url = `/${org}/${proj}/campaigns/${campaign_id}`;
+ const campaignsUrl = `/${org}/${proj}/campaigns`;
+ const baseUrl = `${campaignsUrl}/${campaign_id}`;
return (
-
-
-
-
-
-
-
-
- {data.title}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Home
-
-
-
-
-
-
-
- Participants
-
-
-
-
-
-
-
- Quests
-
-
-
-
-
-
-
- Rewards
-
-
-
-
-
-
-
- Observability
-
-
-
-
-
-
-
- Design
-
-
-
-
-
-
- Design
-
-
-
-
-
-
-
- Settings
-
-
-
-
-
-
-
-
-
-
-
+
{children}
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/console-resources-sidebar.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/console-resources-sidebar.tsx
new file mode 100644
index 000000000..245e6e30a
--- /dev/null
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/console-resources-sidebar.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import type { ReactNode } from "react";
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { ResourceTypeIcon } from "@/components/resource-type-icon";
+import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
+import { HomeIcon, ShieldCheckIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+type ConsoleResourcesSidebarProps = {
+ org: string;
+ proj: string;
+};
+
+type SidebarMenuLinkProps = {
+ href: string;
+ children: ReactNode;
+ size?: "default" | "sm" | "lg";
+ matchSubpaths?: boolean;
+};
+
+function SidebarMenuLink({
+ href,
+ children,
+ size = "sm",
+ matchSubpaths = true,
+}: SidebarMenuLinkProps) {
+ const pathname = usePathname();
+ const isActive = matchSubpaths
+ ? pathname === href || pathname.startsWith(`${href}/`)
+ : pathname === href;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function ConsoleResourcesSidebar({
+ org,
+ proj,
+}: ConsoleResourcesSidebarProps) {
+ const basePath = `/${org}/${proj}`;
+
+ return (
+
+
+
+
+
+
+
+
+ Console
+
+
+
+
+
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+ Customer
+
+
+
+
+ Customers
+
+
+
+ Tags
+
+
+
+ CIAM
+
+
+
+
+
+ Site
+
+
+
+
+ Site Settings
+
+
+
+ Domains
+
+
+
+ Analytics
+
+
+
+
+
+ Events
+
+
+
+
+ Campaigns
+
+
+
+
+
+ Advanced
+
+
+
+
+ Connections
+
+
+
+ CIAM
+
+
+
+
+
+
+ );
+}
diff --git a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/layout.tsx b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/layout.tsx
index d2df989e1..1b54c25e6 100644
--- a/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/layout.tsx
+++ b/editor/app/(workbench)/[org]/[proj]/(console)/(resources)/layout.tsx
@@ -1,20 +1,5 @@
-import {
- Sidebar,
- SidebarContent,
- SidebarHeader,
- SidebarGroup,
- SidebarGroupContent,
- SidebarMenu,
- SidebarMenuButton,
- SidebarMenuItem,
- SidebarProvider,
- SidebarGroupLabel,
-} from "@/components/ui/sidebar";
-import { ArrowLeftIcon } from "@radix-ui/react-icons";
-import { HomeIcon, ShieldCheckIcon } from "lucide-react";
-import { ResourceTypeIcon } from "@/components/resource-type-icon";
-import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
-import Link from "next/link";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { ConsoleResourcesSidebar } from "./console-resources-sidebar";
type Params = { org: string; proj: string };
@@ -31,145 +16,7 @@ export default async function Layout({
-
-
-
-
-
-
-
-
- Console
-
-
-
-
-
-
-
-
-
-
-
-
-
- Dashboard
-
-
-
-
-
-
-
- Customer
-
-
-
-
-
-
- Customers
-
-
-
-
-
-
-
- Tags
-
-
-
-
-
-
-
- CIAM
-
-
-
-
-
-
-
- Site
-
-
-
-
-
-
- Site Settings
-
-
-
-
-
-
-
- Domains
-
-
-
-
-
-
-
- Analytics
-
-
-
-
-
-
-
- Events
-
-
-
-
-
-
- Campaigns
-
-
-
-
-
-
-
- Advanced
-
-
-
-
-
-
- Connections
-
-
-
-
-
-
-
-
-
- CIAM
-
-
-
-
-
-
-
-
+