Skip to content

Commit e488f12

Browse files
juandolealtjuandolealt
authored
Update navigation: add Spindl and Batches, reorganize menu items (#2758)
1 parent 397cb36 commit e488f12

File tree

2 files changed

+109
-61
lines changed

2 files changed

+109
-61
lines changed

‎apps/web/src/components/Layout/Navigation/Sidebar/Base-Sidebar.tsx‎

Lines changed: 89 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ export function BaseNavigation({ isMobile = false }: { isMobile?: boolean }) {
9191
const isBuilders = buildersRoutes.some((route) => pathname.includes(route));
9292

9393
const handleMenuItemClick = useCallback(
94-
(route: { href: string; items?: { label: string; href: string }[] }) => {
94+
(route: {
95+
href: string;
96+
items?: { label: string; href?: string; isSubheader?: boolean; isDivider?: boolean }[];
97+
}) => {
9598
if (route.items && route.items.length > 0) {
9699
setIsExiting(true);
97100
// Small delay to allow exit animation to start
@@ -227,31 +230,57 @@ export function BaseNavigation({ isMobile = false }: { isMobile?: boolean }) {
227230

228231
<div className="pt-2">
229232
{getCurrentMenuItems().map(
230-
(item: { href: string; label: string; icon?: string; newTab?: boolean }) => (
231-
<motion.div key={item.href} className="relative flex flex-col">
232-
<Link
233-
href={item.href}
234-
target={item.newTab ? '_blank' : '_self'}
235-
rel={item.newTab ? 'noopener noreferrer' : undefined}
236-
className={classNames(
237-
'flex w-full items-center rounded-lg p-2.5 leading-[114%] transition-colors duration-150',
238-
{
239-
'bg-base-gray-30 dark:bg-gray-90': isLinkActive({
240-
pathname,
241-
href: item.href,
242-
}),
243-
'text-black hover:bg-base-gray-30 dark:text-white dark:hover:bg-gray-90':
244-
!isLinkActive({
233+
(
234+
item: {
235+
href?: string;
236+
label: string;
237+
icon?: string;
238+
newTab?: boolean;
239+
isSubheader?: boolean;
240+
isDivider?: boolean;
241+
},
242+
index: number,
243+
) => (
244+
<motion.div
245+
key={item.href ?? `${item.label}-${index}`}
246+
className="relative flex flex-col"
247+
>
248+
{item.isDivider ? (
249+
<div className="my-2 border-t border-base-gray-50 dark:border-gray-80" />
250+
) : item.isSubheader ? (
251+
<div className="mb-1 mt-4 px-2.5 first:mt-0">
252+
<Text
253+
variant={TextVariant.CTALabelSm}
254+
className="text-xs font-medium uppercase tracking-wider text-base-gray-200 dark:text-gray-60"
255+
>
256+
{item.label}
257+
</Text>
258+
</div>
259+
) : item.href ? (
260+
<Link
261+
href={item.href}
262+
target={item.newTab ? '_blank' : '_self'}
263+
rel={item.newTab ? 'noopener noreferrer' : undefined}
264+
className={classNames(
265+
'flex w-full items-center rounded-lg p-2.5 leading-[114%] transition-colors duration-150',
266+
{
267+
'bg-base-gray-30 dark:bg-gray-90': isLinkActive({
245268
pathname,
246269
href: item.href,
247-
}) && !isExiting,
248-
'text-black dark:text-white': isExiting,
249-
},
250-
)}
251-
>
252-
{item.icon && <Icon name={item.icon} className="mr-2 inline-block" />}
253-
<Text variant={TextVariant.CTALabelSm}>{item.label}</Text>
254-
</Link>
270+
}),
271+
'text-black hover:bg-base-gray-30 dark:text-white dark:hover:bg-gray-90':
272+
!isLinkActive({
273+
pathname,
274+
href: item.href,
275+
}) && !isExiting,
276+
'text-black dark:text-white': isExiting,
277+
},
278+
)}
279+
>
280+
{item.icon && <Icon name={item.icon} className="mr-2 inline-block" />}
281+
<Text variant={TextVariant.CTALabelSm}>{item.label}</Text>
282+
</Link>
283+
) : null}
255284
</motion.div>
256285
),
257286
)}
@@ -260,37 +289,47 @@ export function BaseNavigation({ isMobile = false }: { isMobile?: boolean }) {
260289
{/* appendix if so */}
261290
{activeSubMenu &&
262291
routes.find((route) => route.href === activeSubMenu)?.appendix && (
263-
<div className="border-t border-base-gray-50 pt-2">
292+
<div className="mt-2 border-t border-base-gray-50 pt-2 dark:border-gray-80">
264293
{routes
265294
.find((route) => route.href === activeSubMenu)
266295
?.appendix?.map(
267-
(appendixItem: { href: string; label: string; newTab?: boolean }) => (
268-
<motion.div key={appendixItem.href} className="relative flex flex-col">
269-
<Link
270-
href={appendixItem.href}
271-
target={appendixItem.newTab ? '_blank' : '_self'}
272-
rel={appendixItem.newTab ? 'noopener noreferrer' : undefined}
273-
className={classNames(
274-
'group flex w-full items-center justify-between rounded-lg px-2.5 py-2 leading-[114%] transition-colors duration-150',
275-
{
276-
'bg-base-gray-30 dark:bg-gray-90': isLinkActive({
277-
pathname,
278-
href: appendixItem.href,
279-
}),
280-
'text-black hover:bg-base-gray-30 dark:text-white dark:hover:bg-gray-90':
281-
!isLinkActive({
296+
(
297+
appendixItem: { href?: string; label: string; newTab?: boolean },
298+
index: number,
299+
) => (
300+
<motion.div
301+
key={appendixItem.href ?? `appendix-${index}`}
302+
className="relative flex flex-col"
303+
>
304+
{appendixItem.href && (
305+
<Link
306+
href={appendixItem.href}
307+
target={appendixItem.newTab ? '_blank' : '_self'}
308+
rel={appendixItem.newTab ? 'noopener noreferrer' : undefined}
309+
className={classNames(
310+
'group flex w-full items-center justify-between rounded-lg px-2.5 py-2 leading-[114%] transition-colors duration-150',
311+
{
312+
'bg-base-gray-30 dark:bg-gray-90': isLinkActive({
282313
pathname,
283314
href: appendixItem.href,
284-
}) && !isExiting,
285-
'text-black dark:text-white': isExiting,
286-
},
287-
)}
288-
>
289-
<Text variant={TextVariant.CTALabelSm}>{appendixItem.label}</Text>
290-
<div className="text-[#B1B7C3] group-hover:text-black dark:text-[#1E2025] group-hover:dark:text-white">
291-
<ExternalLinkIcon />
292-
</div>
293-
</Link>
315+
}),
316+
'text-black hover:bg-base-gray-30 dark:text-white dark:hover:bg-gray-90':
317+
!isLinkActive({
318+
pathname,
319+
href: appendixItem.href,
320+
}) && !isExiting,
321+
'text-black dark:text-white': isExiting,
322+
},
323+
)}
324+
>
325+
<Text variant={TextVariant.CTALabelSm}>{appendixItem.label}</Text>
326+
{appendixItem.newTab && (
327+
<div className="text-[#B1B7C3] group-hover:text-black dark:text-[#1E2025] group-hover:dark:text-white">
328+
<ExternalLinkIcon />
329+
</div>
330+
)}
331+
</Link>
332+
)}
294333
</motion.div>
295334
),
296335
)}

‎apps/web/src/components/Layout/Navigation/navigation.ts‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@ type BrandRoute = {
1919
type DefaultRouteItem = {
2020
icon?: string;
2121
label: string;
22-
href: string;
22+
href?: string;
2323
newTab?: boolean;
24+
isSubheader?: boolean;
25+
isDivider?: boolean;
2426
};
2527

2628
type DefaultRoute = {
@@ -399,6 +401,12 @@ export const DEFAULT_ROUTES: DefaultRoute[] = [
399401
label: 'Base Build',
400402
href: '/build',
401403
},
404+
{
405+
icon: 'dashboard',
406+
label: 'Dashboard',
407+
href: 'https://base.dev/',
408+
newTab: true,
409+
},
402410
{
403411
icon: 'wallet',
404412
label: 'Base Account',
@@ -421,24 +429,19 @@ export const DEFAULT_ROUTES: DefaultRoute[] = [
421429
},
422430
{
423431
icon: 'docs',
424-
label: 'Base Docs',
425-
href: 'https://docs.base.org/',
426-
newTab: true,
427-
},
428-
{
429-
icon: 'dashboard',
430-
label: 'Grow your app',
431-
href: 'https://base.dev/',
432+
label: 'Spindl',
433+
href: 'https://spindl.xyz/',
432434
newTab: true,
433435
},
434436
],
435437
appendix: [
438+
{ label: 'Docs', href: 'https://docs.base.org/', newTab: true },
436439
{ label: 'Status Page', href: 'https://status.base.org/', newTab: true },
437-
{ label: 'Bug Bounty', href: 'https://hackerone.com/coinbase', newTab: true },
438440
{ label: 'Block Explorer', href: 'https://basescan.org/', newTab: true },
439441
{ label: 'GitHub', href: 'https://github.com/base', newTab: true },
440442
{ label: 'Engineering Blog', href: 'https://www.base.dev/blog', newTab: true },
441443
{ label: 'Base Stats', href: '/stats', newTab: true },
444+
{ label: 'Bug Bounty', href: 'https://hackerone.com/coinbase', newTab: true },
442445
],
443446
},
444447
{
@@ -458,6 +461,12 @@ export const DEFAULT_ROUTES: DefaultRoute[] = [
458461
label: 'Resources',
459462
href: '/resources',
460463
},
464+
{
465+
icon: 'rocket',
466+
label: 'Batches',
467+
href: 'https://www.basebatches.xyz/',
468+
newTab: true,
469+
},
461470
{
462471
icon: 'briefcase',
463472
label: 'Events',
@@ -471,7 +480,7 @@ export const DEFAULT_ROUTES: DefaultRoute[] = [
471480
href: '/about',
472481
items: [
473482
{
474-
icon: 'code',
483+
icon: 'rocket',
475484
label: 'Vision',
476485
href: '/about/vision',
477486
},

0 commit comments

Comments
 (0)