fix: sidebar type issues

Author: izadoesdev

apps/dashboard/components/layout/category-sidebar.tsx

@@ -16,9 +16,13 @@ import { useDbConnections } from '@/hooks/use-db-connections';
 import { useWebsites } from '@/hooks/use-websites';
 import { cn } from '@/lib/utils';
 import {
+	categoryConfig,
+	createDatabasesNavigation,
+	createLoadingDatabasesNavigation,
+	createLoadingWebsitesNavigation,
+	createWebsitesNavigation,
+	getContextConfig,
 	getDefaultCategory,
-	getNavigationWithDatabases,
-	getNavigationWithWebsites,
 } from './navigation/navigation-config';
 import { SignOutButton } from './sign-out-button';
 import { ThemeToggle } from './theme-toggle';
@@ -47,17 +51,22 @@ export function CategorySidebar({
 	const [helpOpen, setHelpOpen] = useState(false);
 
 	const { categories, defaultCategory } = useMemo(() => {
-		let config = getNavigationWithWebsites(
-			pathname,
-			websites,
-			isLoadingWebsites
-		);
-
-		config = getNavigationWithDatabases(
-			pathname,
-			databases,
-			isLoadingDatabases
-		);
+		const baseConfig = getContextConfig(pathname);
+		const config =
+			baseConfig === categoryConfig.main
+				? {
+						...baseConfig,
+						navigationMap: {
+							...baseConfig.navigationMap,
+							websites: isLoadingWebsites
+								? createLoadingWebsitesNavigation()
+								: createWebsitesNavigation(websites),
+							observability: isLoadingDatabases
+								? createLoadingDatabasesNavigation()
+								: createDatabasesNavigation(databases),
+						},
+					}
+				: baseConfig;
 
 		const defaultCat = getDefaultCategory(pathname);
 

apps/dashboard/components/layout/navigation/mobile-category-selector.tsx

@@ -14,9 +14,13 @@ import { useDbConnections } from '@/hooks/use-db-connections';
 import { useWebsites } from '@/hooks/use-websites';
 import { cn } from '@/lib/utils';
 import {
+	categoryConfig,
+	createDatabasesNavigation,
+	createLoadingDatabasesNavigation,
+	createLoadingWebsitesNavigation,
+	createWebsitesNavigation,
+	getContextConfig,
 	getDefaultCategory,
-	getNavigationWithDatabases,
-	getNavigationWithWebsites,
 } from './navigation-config';
 
 interface MobileCategorySelectorProps {
@@ -34,17 +38,22 @@ export function MobileCategorySelector({
 		useDbConnections();
 
 	const { categories, defaultCategory } = useMemo(() => {
-		let config = getNavigationWithWebsites(
-			pathname,
-			websites,
-			isLoadingWebsites
-		);
-
-		config = getNavigationWithDatabases(
-			pathname,
-			databases,
-			isLoadingDatabases
-		);
+		const baseConfig = getContextConfig(pathname);
+		const config =
+			baseConfig === categoryConfig.main
+				? {
+						...baseConfig,
+						navigationMap: {
+							...baseConfig.navigationMap,
+							websites: isLoadingWebsites
+								? createLoadingWebsitesNavigation()
+								: createWebsitesNavigation(websites),
+							observability: isLoadingDatabases
+								? createLoadingDatabasesNavigation()
+								: createDatabasesNavigation(databases),
+						},
+					}
+				: baseConfig;
 
 		const defaultCat = getDefaultCategory(pathname);
 		return { categories: config.categories, defaultCategory: defaultCat };

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

@@ -35,7 +35,6 @@ import {
 } from '@phosphor-icons/react';
 import type { NavigationSection } from './types';
 
-// Function to create dynamic websites navigation
 export const createWebsitesNavigation = (
 	websites: Array<{ id: string; name: string | null; domain: string }>
 ): NavigationSection[] => [
@@ -73,7 +72,6 @@ export const createWebsitesNavigation = (
 	},
 ];
 
-// Personal settings and preferences
 export const personalNavigation: NavigationSection[] = [
 	{
 		title: 'Personal Settings',
@@ -238,7 +236,6 @@ export const billingNavigation: NavigationSection[] = [
 	},
 ];
 
-// Function to create dynamic databases navigation
 export const createDatabasesNavigation = (
 	databases: Array<{ id: string; name: string; type: string }>
 ): NavigationSection[] => [
@@ -365,7 +362,6 @@ export const websiteNavigation: NavigationSection[] = [
 	},
 ];
 
-// Generate demo navigation from website navigation (filtered for demo purposes)
 export const createDemoNavigation = (): NavigationSection[] => [
 	{
 		title: 'Demo Analytics',
@@ -494,7 +490,6 @@ export const getDefaultCategory = (pathname: string) => {
 	return config.defaultCategory;
 };
 
-// Function to create loading navigation for websites
 export const createLoadingWebsitesNavigation = (): NavigationSection[] => [
 	{
 		title: 'Websites',
@@ -519,7 +514,6 @@ export const createLoadingWebsitesNavigation = (): NavigationSection[] => [
 	},
 ];
 
-// Function to create loading navigation for databases
 export const createLoadingDatabasesNavigation = (): NavigationSection[] => [
 	{
 		title: 'Database Monitoring',
@@ -543,47 +537,3 @@ export const createLoadingDatabasesNavigation = (): NavigationSection[] => [
 		],
 	},
 ];
-
-export const getNavigationWithWebsites = (
-	pathname: string,
-	websites: Array<{ id: string; name: string | null; domain: string }> = [],
-	isLoading = false
-) => {
-	const config = getContextConfig(pathname);
-
-	if (config === categoryConfig.main) {
-		return {
-			...config,
-			navigationMap: {
-				...config.navigationMap,
-				websites: isLoading
-					? createLoadingWebsitesNavigation()
-					: createWebsitesNavigation(websites),
-			},
-		};
-	}
-
-	return config;
-};
-
-export const getNavigationWithDatabases = (
-	pathname: string,
-	databases: Array<{ id: string; name: string; type: string }> = [],
-	isLoading = false
-) => {
-	const config = getContextConfig(pathname);
-
-	if (config === categoryConfig.main) {
-		return {
-			...config,
-			navigationMap: {
-				...config.navigationMap,
-				observability: isLoading
-					? createLoadingDatabasesNavigation()
-					: createDatabasesNavigation(databases),
-			},
-		};
-	}
-
-	return config;
-};

apps/dashboard/components/layout/sidebar.tsx

@@ -15,9 +15,13 @@ import { CategorySidebar } from './category-sidebar';
 import { DatabaseHeader } from './navigation/database-header';
 import { MobileCategorySelector } from './navigation/mobile-category-selector';
 import {
+	categoryConfig,
+	createDatabasesNavigation,
+	createLoadingDatabasesNavigation,
+	createLoadingWebsitesNavigation,
+	createWebsitesNavigation,
+	getContextConfig,
 	getDefaultCategory,
-	getNavigationWithDatabases,
-	getNavigationWithWebsites,
 } from './navigation/navigation-config';
 import { NavigationSection } from './navigation/navigation-section';
 import { SandboxHeader } from './navigation/sandbox-header';
@@ -84,33 +88,35 @@ export function Sidebar() {
 	}, [isMobileOpen, closeSidebar, openSidebar]);
 
 	const getNavigationConfig = useMemo((): NavigationConfig => {
-		// First apply websites navigation if applicable
-		let contextConfig = getNavigationWithWebsites(
-			pathname,
-			websites,
-			isLoadingWebsites
-		);
+		const baseConfig = getContextConfig(pathname);
 
-		// Then apply databases navigation if applicable
-		contextConfig = getNavigationWithDatabases(
-			pathname,
-			databases,
-			isLoadingDatabases
-		);
+		const populatedConfig =
+			baseConfig === categoryConfig.main
+				? {
+						...baseConfig,
+						navigationMap: {
+							...baseConfig.navigationMap,
+							websites: isLoadingWebsites
+								? createLoadingWebsitesNavigation()
+								: createWebsitesNavigation(websites),
+							observability: isLoadingDatabases
+								? createLoadingDatabasesNavigation()
+								: createDatabasesNavigation(databases),
+						},
+					}
+				: baseConfig;
 
 		const defaultCat = getDefaultCategory(pathname);
 		const activeCat = selectedCategory || defaultCat;
 
-		// Get navigation from centralized config
 		const navSections =
-			contextConfig.navigationMap[
-				activeCat as keyof typeof contextConfig.navigationMap
+			populatedConfig.navigationMap[
+				activeCat as keyof typeof populatedConfig.navigationMap
 			] ||
-			contextConfig.navigationMap[
-				contextConfig.defaultCategory as keyof typeof contextConfig.navigationMap
+			populatedConfig.navigationMap[
+				populatedConfig.defaultCategory as keyof typeof populatedConfig.navigationMap
 			];
 
-		// Determine header based on context
 		let headerComponent: React.ReactNode;
 		let currentId: string | null | undefined;