cleanup sidebar, add standalone items

Author: izadoesdev

apps/dashboard/components/layout/navigation/navigation-config.tsx

@@ -21,6 +21,7 @@ import {
 	GlobeIcon,
 	GlobeSimpleIcon,
 	HeartbeatIcon,
+	HouseIcon,
 	IdentificationCardIcon,
 	KeyIcon,
 	LightningIcon,
@@ -41,7 +42,7 @@ import {
 	UsersThreeIcon,
 	WarningIcon,
 } from "@phosphor-icons/react";
-import type { Category, NavigationSection } from "./types";
+import type { Category, NavigationEntry, NavigationSection } from "./types";
 
 const createNavItem = (
 	name: string,
@@ -114,8 +115,11 @@ const createDynamicNavigation = <T extends { id: string; name: string | null }>(
 
 export const createWebsitesNavigation = (
 	websites: Array<{ id: string; name: string | null; domain: string }>
-): NavigationSection[] =>
-	createDynamicNavigation(
+): NavigationEntry[] => [
+	createNavItem("Home", HouseIcon, "/home", {
+		highlight: true,
+	}),
+	...createDynamicNavigation(
 		websites,
 		"Websites",
 		GlobeSimpleIcon,
@@ -125,7 +129,8 @@ export const createWebsitesNavigation = (
 		"/websites",
 		"Add Your First Website",
 		(website) => ({ domain: website.domain })
-	);
+	),
+];
 
 export const personalNavigation: NavigationSection[] = [
 	createNavSection("Personal", UserGearIcon, [
@@ -315,7 +320,7 @@ export const websiteSettingsNavigation: NavigationSection[] = [
 const createCategoryConfig = (
 	categories: Category[],
 	defaultCategory: string,
-	navigationMap: Record<string, NavigationSection[]>
+	navigationMap: Record<string, NavigationEntry[]>
 ) => ({ categories, defaultCategory, navigationMap });
 
 export const categoryConfig = {
@@ -433,12 +438,16 @@ const createLoadingNavigation = (
 	]),
 ];
 
-export const createLoadingWebsitesNavigation = (): NavigationSection[] =>
-	createLoadingNavigation(
+export const createLoadingWebsitesNavigation = (): NavigationEntry[] => [
+	createNavItem("Home", HouseIcon, "/home", {
+		highlight: true,
+	}),
+	...createLoadingNavigation(
 		"Websites",
 		GlobeSimpleIcon,
 		"Website Overview",
 		"/websites",
 		"Loading websites...",
 		GlobeIcon
-	);
+	),
+];

apps/dashboard/components/layout/navigation/navigation-item.tsx

@@ -65,7 +65,7 @@ export function NavigationItem({
 					size={20}
 				/>
 			) : (
-				<Icon aria-hidden className="size-4 shrink-0" />
+				<Icon aria-hidden className="size-4 shrink-0" weight="duotone" />
 			)}
 			<span className="flex-1">{name}</span>
 		</>

apps/dashboard/components/layout/navigation/types.ts

@@ -34,6 +34,8 @@ export interface NavigationSection {
 	flag?: string;
 }
 
+export type NavigationEntry = NavigationSection | NavigationItem;
+
 export interface Category {
 	id: string;
 	name: string;

apps/dashboard/components/layout/sidebar.tsx

@@ -20,13 +20,18 @@ import {
 	getContextConfig,
 	getDefaultCategory,
 } from "./navigation/navigation-config";
+import { NavigationItem } from "./navigation/navigation-item";
 import { NavigationSection } from "./navigation/navigation-section";
-import type { NavigationSection as NavigationSectionType } from "./navigation/types";
+import type {
+	NavigationEntry,
+	NavigationItem as NavigationItemType,
+	NavigationSection as NavigationSectionType,
+} from "./navigation/types";
 import { WebsiteHeader } from "./navigation/website-header";
 import { OrganizationSelector } from "./organization-selector";
 
 interface NavigationConfig {
-	navigation: NavigationSectionType[];
+	navigation: NavigationEntry[];
 	header: React.ReactNode;
 	currentWebsiteId?: string | null;
 }
@@ -41,6 +46,44 @@ interface SidebarProps {
 	user: User | null;
 }
 
+const isNavigationSection = (
+	entry: NavigationEntry
+): entry is NavigationSectionType => {
+	return "items" in entry;
+};
+
+const isNavigationItem = (
+	entry: NavigationEntry
+): entry is NavigationItemType => {
+	return "href" in entry && !("items" in entry);
+};
+
+const isItemActive = (
+	item: NavigationItemType,
+	pathname: string,
+	currentWebsiteId?: string | null
+): boolean => {
+	if (item.rootLevel) {
+		return pathname === item.href;
+	}
+
+	const buildFullPath = (basePath: string, itemHref: string) =>
+		itemHref === "" ? basePath : `${basePath}${itemHref}`;
+
+	const fullPath = (() => {
+		if (pathname.startsWith("/demo")) {
+			return buildFullPath(`/demo/${currentWebsiteId}`, item.href);
+		}
+		return buildFullPath(`/websites/${currentWebsiteId}`, item.href);
+	})();
+
+	if (item.href === "") {
+		return pathname === fullPath;
+	}
+
+	return pathname === fullPath || pathname.startsWith(`${fullPath}/`);
+};
+
 export function Sidebar({ user = null }: SidebarProps) {
 	const pathname = usePathname();
 	const [isMobileOpen, setIsMobileOpen] = useState(false);
@@ -287,27 +330,65 @@ export function Sidebar({ user = null }: SidebarProps) {
 						/>
 
 						<nav aria-label="Main navigation" className="flex flex-col">
-							{navigation.map((section, idx) => (
-								<NavigationSection
-									accordionStates={accordionStates}
-									className={cn(
-										navigation.length > 1 && idx === navigation.length - 1
-											? "border-t"
-											: idx === 0 && navigation.length < 2
-												? "box-content border-b"
-												: idx !== 0 && navigation.length > 1
+							{navigation.map((entry, idx) => {
+								if (isNavigationSection(entry)) {
+									return (
+										<NavigationSection
+											accordionStates={accordionStates}
+											className={cn(
+												navigation.length > 1 && idx === navigation.length - 1
 													? "border-t"
-													: "border-transparent"
-									)}
-									currentWebsiteId={currentWebsiteId}
-									flag={section.flag}
-									icon={section.icon}
-									items={section.items}
-									key={section.title}
-									pathname={pathname}
-									title={section.title}
-								/>
-							))}
+													: idx === 0 && navigation.length < 2
+														? "box-content border-b"
+														: idx !== 0 && navigation.length > 1
+															? "border-t"
+															: "border-transparent"
+											)}
+											currentWebsiteId={currentWebsiteId}
+											flag={entry.flag}
+											icon={entry.icon}
+											items={entry.items}
+											key={entry.title}
+											pathname={pathname}
+											title={entry.title}
+										/>
+									);
+								}
+
+								if (isNavigationItem(entry)) {
+									return (
+										<div
+											className={cn(idx !== 0 && "border-t")}
+											key={entry.name}
+										>
+											<NavigationItem
+												alpha={entry.alpha}
+												badge={entry.badge}
+												currentWebsiteId={currentWebsiteId}
+												disabled={entry.disabled}
+												domain={entry.domain}
+												href={entry.href}
+												icon={entry.icon}
+												isActive={isItemActive(
+													entry,
+													pathname,
+													currentWebsiteId
+												)}
+												isExternal={entry.external}
+												isLocked={false}
+												isRootLevel={!!entry.rootLevel}
+												lockedPlanName={null}
+												name={entry.name}
+												production={entry.production}
+												sectionName="main"
+												tag={entry.tag}
+											/>
+										</div>
+									);
+								}
+
+								return null;
+							})}
 						</nav>
 					</div>
 				</ScrollArea>

apps/dashboard/components/ui/command-search.tsx

@@ -19,7 +19,11 @@ import {
 	websiteNavigation,
 	websiteSettingsNavigation,
 } from "@/components/layout/navigation/navigation-config";
-import type { NavigationItem, NavigationSection } from "@/components/layout/navigation/types";
+import type {
+	NavigationEntry,
+	NavigationItem,
+	NavigationSection,
+} from "@/components/layout/navigation/types";
 import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
@@ -68,13 +72,34 @@ function toSearchItem(item: NavigationItem, pathPrefix = ""): SearchItem {
 	};
 }
 
-function toSearchGroups(sections: NavigationSection[], pathPrefix = ""): SearchGroup[] {
-	return sections.map((section) => ({
-		category: section.title,
-		items: section.items
-			.filter((item) => !item.hideFromDemo)
-			.map((item) => toSearchItem(item, pathPrefix)),
-	}));
+const isSection = (entry: NavigationEntry): entry is NavigationSection =>
+	"items" in entry;
+
+function toSearchGroups(entries: NavigationEntry[], pathPrefix = ""): SearchGroup[] {
+	const groups: SearchGroup[] = [];
+	const standaloneItems: SearchItem[] = [];
+
+	for (const entry of entries) {
+		if (isSection(entry)) {
+			groups.push({
+				category: entry.title,
+				items: entry.items
+					.filter((item) => !item.hideFromDemo)
+					.map((item) => toSearchItem(item, pathPrefix)),
+			});
+		} else if (!entry.hideFromDemo) {
+			standaloneItems.push(toSearchItem(entry, pathPrefix));
+		}
+	}
+
+	if (standaloneItems.length > 0) {
+		groups.unshift({
+			category: "Quick Access",
+			items: standaloneItems,
+		});
+	}
+
+	return groups;
 }
 
 function mergeGroups(groups: SearchGroup[]): SearchGroup[] {