Skip to content

Commit 6d0849a

Browse files
softmarshmallowsoftmarshmallow
authored
Merge pull request #527 from gridaco/chore/sidebar-route-highlighting-b9ca
Sidebar route highlighting
2 parents 4ba5fd4 + 113030e commit 6d0849a

File tree

4 files changed

+297
-273
lines changed

4 files changed

+297
-273
lines changed

‎editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/campaign-sidebar.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
"use client";
2+
3+
import type { ReactNode } from "react";
4+
import {
5+
Sidebar,
6+
SidebarContent,
7+
SidebarFooter,
8+
SidebarGroup,
9+
SidebarGroupContent,
10+
SidebarGroupLabel,
11+
SidebarHeader,
12+
SidebarMenu,
13+
SidebarMenuButton,
14+
SidebarMenuItem,
15+
} from "@/components/ui/sidebar";
16+
import { ArrowLeftIcon } from "@radix-ui/react-icons";
17+
import {
18+
GiftIcon,
19+
HistoryIcon,
20+
HomeIcon,
21+
PaletteIcon,
22+
SettingsIcon,
23+
TrophyIcon,
24+
UsersIcon,
25+
} from "lucide-react";
26+
import Link from "next/link";
27+
import { usePathname } from "next/navigation";
28+
import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
29+
import { AboutGridaWestCard } from "./about-west-card";
30+
31+
type CampaignSidebarProps = {
32+
baseUrl: string;
33+
campaignsUrl: string;
34+
campaignTitle: string;
35+
};
36+
37+
type SidebarMenuLinkProps = {
38+
href: string;
39+
children: ReactNode;
40+
size?: "default" | "sm" | "lg";
41+
matchSubpaths?: boolean;
42+
};
43+
44+
function SidebarMenuLink({
45+
href,
46+
children,
47+
size = "sm",
48+
matchSubpaths = true,
49+
}: SidebarMenuLinkProps) {
50+
const pathname = usePathname();
51+
const isActive = matchSubpaths
52+
? pathname === href || pathname.startsWith(`${href}/`)
53+
: pathname === href;
54+
55+
return (
56+
<SidebarMenuItem>
57+
<SidebarMenuButton asChild size={size} isActive={isActive}>
58+
<Link href={href}>{children}</Link>
59+
</SidebarMenuButton>
60+
</SidebarMenuItem>
61+
);
62+
}
63+
64+
export function CampaignSidebar({
65+
baseUrl,
66+
campaignsUrl,
67+
campaignTitle,
68+
}: CampaignSidebarProps) {
69+
return (
70+
<Sidebar>
71+
<DarwinSidebarHeaderDragArea />
72+
<SidebarHeader className="desktop-drag-area">
73+
<SidebarMenu>
74+
<SidebarMenuItem>
75+
<SidebarMenuButton asChild>
76+
<Link href={campaignsUrl}>
77+
<ArrowLeftIcon />
78+
<span className="truncate">{campaignTitle}</span>
79+
</Link>
80+
</SidebarMenuButton>
81+
</SidebarMenuItem>
82+
</SidebarMenu>
83+
</SidebarHeader>
84+
<SidebarContent>
85+
<SidebarGroup>
86+
<SidebarGroupContent>
87+
<SidebarMenu>
88+
<SidebarMenuLink href={baseUrl} matchSubpaths={false}>
89+
<HomeIcon className="size-3" />
90+
Home
91+
</SidebarMenuLink>
92+
<SidebarMenuLink href={`${baseUrl}/participants`}>
93+
<UsersIcon className="size-3" />
94+
Participants
95+
</SidebarMenuLink>
96+
<SidebarMenuLink href={`${baseUrl}/quests`}>
97+
<TrophyIcon className="size-3" />
98+
Quests
99+
</SidebarMenuLink>
100+
<SidebarMenuLink href={`${baseUrl}/rewards`}>
101+
<GiftIcon className="size-3" />
102+
Rewards
103+
</SidebarMenuLink>
104+
<SidebarMenuLink href={`${baseUrl}/observability`}>
105+
<HistoryIcon className="size-3" />
106+
Observability
107+
</SidebarMenuLink>
108+
</SidebarMenu>
109+
</SidebarGroupContent>
110+
</SidebarGroup>
111+
<SidebarGroup>
112+
<SidebarGroupLabel>Design</SidebarGroupLabel>
113+
<SidebarGroupContent>
114+
<SidebarMenu>
115+
<SidebarMenuLink href={`${baseUrl}/design`}>
116+
<PaletteIcon className="size-3" />
117+
Design
118+
</SidebarMenuLink>
119+
<SidebarMenuLink href={`${baseUrl}/settings`}>
120+
<SettingsIcon className="size-3" />
121+
Settings
122+
</SidebarMenuLink>
123+
</SidebarMenu>
124+
</SidebarGroupContent>
125+
</SidebarGroup>
126+
</SidebarContent>
127+
<SidebarFooter>
128+
<AboutGridaWestCard />
129+
</SidebarFooter>
130+
</Sidebar>
131+
);
132+
}

‎editor/app/(workbench)/[org]/[proj]/(console)/(campaign)/campaigns/[campaign]/layout.tsx‎

Lines changed: 9 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
1-
import React from "react";
21
import { createWestReferralClient } from "@/lib/supabase/server";
32
import { CampaignProvider } from "./store";
4-
import {
5-
Sidebar,
6-
SidebarContent,
7-
SidebarHeader,
8-
SidebarGroup,
9-
SidebarGroupContent,
10-
SidebarMenu,
11-
SidebarMenuButton,
12-
SidebarMenuItem,
13-
SidebarProvider,
14-
SidebarFooter,
15-
SidebarGroupLabel,
16-
} from "@/components/ui/sidebar";
17-
import Link from "next/link";
18-
import { ArrowLeftIcon } from "@radix-ui/react-icons";
19-
import {
20-
GiftIcon,
21-
HistoryIcon,
22-
HomeIcon,
23-
PaletteIcon,
24-
SettingsIcon,
25-
TrophyIcon,
26-
UsersIcon,
27-
} from "lucide-react";
28-
import { AboutGridaWestCard } from "./about-west-card";
3+
import { SidebarProvider } from "@/components/ui/sidebar";
294
import { notFound } from "next/navigation";
305
import { Metadata } from "next";
31-
import { DarwinSidebarHeaderDragArea } from "@/host/desktop";
6+
import { CampaignSidebar } from "./campaign-sidebar";
327
type Params = { org: string; proj: string; campaign: string };
338

349
export const metadata: Metadata = {
@@ -55,102 +30,19 @@ export default async function CampaignLayout({
5530
return notFound();
5631
}
5732

58-
const base_url = `/${org}/${proj}/campaigns/${campaign_id}`;
33+
const campaignsUrl = `/${org}/${proj}/campaigns`;
34+
const baseUrl = `${campaignsUrl}/${campaign_id}`;
5935

6036
return (
6137
<CampaignProvider campaign={data}>
6238
<SidebarProvider>
6339
<div className="flex flex-1 h-full overflow-hidden">
6440
<div className="h-full flex flex-1 w-full">
65-
<Sidebar>
66-
<DarwinSidebarHeaderDragArea />
67-
<SidebarHeader className="desktop-drag-area">
68-
<SidebarMenu>
69-
<Link href={`/${org}/${proj}/campaigns`}>
70-
<SidebarMenuItem>
71-
<SidebarMenuButton>
72-
<ArrowLeftIcon />
73-
<span className="truncate">{data.title}</span>
74-
</SidebarMenuButton>
75-
</SidebarMenuItem>
76-
</Link>
77-
</SidebarMenu>
78-
</SidebarHeader>
79-
<SidebarContent>
80-
<SidebarGroup>
81-
<SidebarGroupContent>
82-
<SidebarMenu>
83-
<Link href={`${base_url}`}>
84-
<SidebarMenuItem>
85-
<SidebarMenuButton size="sm">
86-
<HomeIcon className="size-3" />
87-
Home
88-
</SidebarMenuButton>
89-
</SidebarMenuItem>
90-
</Link>
91-
<Link href={`${base_url}/participants`}>
92-
<SidebarMenuItem>
93-
<SidebarMenuButton size="sm">
94-
<UsersIcon className="size-3" />
95-
Participants
96-
</SidebarMenuButton>
97-
</SidebarMenuItem>
98-
</Link>
99-
<Link href={`${base_url}/quests`}>
100-
<SidebarMenuItem>
101-
<SidebarMenuButton size="sm">
102-
<TrophyIcon className="size-3" />
103-
Quests
104-
</SidebarMenuButton>
105-
</SidebarMenuItem>
106-
</Link>
107-
<Link href={`${base_url}/rewards`}>
108-
<SidebarMenuItem>
109-
<SidebarMenuButton size="sm">
110-
<GiftIcon className="size-3" />
111-
Rewards
112-
</SidebarMenuButton>
113-
</SidebarMenuItem>
114-
</Link>
115-
<Link href={`${base_url}/observability`}>
116-
<SidebarMenuItem>
117-
<SidebarMenuButton size="sm">
118-
<HistoryIcon className="size-3" />
119-
Observability
120-
</SidebarMenuButton>
121-
</SidebarMenuItem>
122-
</Link>
123-
</SidebarMenu>
124-
</SidebarGroupContent>
125-
</SidebarGroup>
126-
<SidebarGroup>
127-
<SidebarGroupLabel>Design</SidebarGroupLabel>
128-
<SidebarGroupContent>
129-
<SidebarMenu>
130-
<Link href={`${base_url}/design`}>
131-
<SidebarMenuItem>
132-
<SidebarMenuButton size="sm">
133-
<PaletteIcon className="size-3" />
134-
Design
135-
</SidebarMenuButton>
136-
</SidebarMenuItem>
137-
</Link>
138-
<Link href={`${base_url}/settings`}>
139-
<SidebarMenuItem>
140-
<SidebarMenuButton size="sm">
141-
<SettingsIcon className="size-3" />
142-
Settings
143-
</SidebarMenuButton>
144-
</SidebarMenuItem>
145-
</Link>
146-
</SidebarMenu>
147-
</SidebarGroupContent>
148-
</SidebarGroup>
149-
</SidebarContent>
150-
<SidebarFooter>
151-
<AboutGridaWestCard />
152-
</SidebarFooter>
153-
</Sidebar>
41+
<CampaignSidebar
42+
baseUrl={baseUrl}
43+
campaignsUrl={campaignsUrl}
44+
campaignTitle={data.title}
45+
/>
15446
<div className="flex flex-col h-full w-full">{children}</div>
15547
</div>
15648
</div>

0 commit comments

Comments
 (0)