feat: cleanup sidebar

Author: izadoesdev

apps/dashboard/app/demo/layout.tsx

@@ -2,27 +2,34 @@
 
 import {
 	BugIcon,
-	ClockIcon,
 	FunnelIcon,
 	GlobeIcon,
 	HouseIcon,
 	InfoIcon,
 	ListIcon,
 	MapPinIcon,
 	TargetIcon,
+	UserIcon,
 	UsersIcon,
 	XIcon,
 } from '@phosphor-icons/react';
+import { useAtom } from 'jotai';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import { Logo } from '@/components/layout/logo';
 import { ThemeToggle } from '@/components/layout/theme-toggle';
 import { UserMenu } from '@/components/layout/user-menu';
 import { NotificationsPopover } from '@/components/notifications/notifications-popover';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
+import {
+	dynamicQueryFiltersAtom,
+	isAnalyticsRefreshingAtom,
+} from '@/stores/jotai/filterAtoms';
+import { AnalyticsToolbar } from '@/app/(main)/websites/[id]/_components/analytics-toolbar';
 
 const DEMO_WEBSITE_ID = 'OXmNQsViBT-FOS_wZCTHc';
 const DEMO_WEBSITE_URL = 'https://www.databuddy.cc';
@@ -39,7 +46,7 @@ const demoNavigation = [
 			},
 			{
 				name: 'Sessions',
-				icon: ClockIcon,
+				icon: UserIcon,
 				href: `/demo/${DEMO_WEBSITE_ID}/sessions`,
 				highlight: true,
 			},
@@ -234,11 +241,39 @@ interface MainLayoutProps {
 }
 
 export default function MainLayout({ children }: MainLayoutProps) {
+	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const [selectedFilters, setSelectedFilters] = useAtom(dynamicQueryFiltersAtom);
+
+	const handleRefresh = async () => {
+		setIsRefreshing(true);
+		try {
+			// Simulate refresh for demo
+			await new Promise(resolve => setTimeout(resolve, 1000));
+			toast.success('Demo data refreshed');
+		} catch {
+			toast.error('Failed to refresh data');
+		} finally {
+			setIsRefreshing(false);
+		}
+	};
+
 	return (
 		<div className="h-screen overflow-hidden bg-gradient-to-br from-background to-muted/20 text-foreground">
 			<Sidebar />
 			<main className="relative h-screen pt-16 md:pl-64">
-				<div className="h-[calc(100vh-4rem)] overflow-y-scroll">{children}</div>
+				<div className="h-[calc(100vh-4rem)] overflow-y-scroll">
+					<div className="mx-auto max-w-[1600px] p-3 sm:p-4 lg:p-6">
+						{/* Analytics toolbar for demo */}
+						<AnalyticsToolbar
+							isRefreshing={isRefreshing}
+							onFiltersChange={setSelectedFilters}
+							onRefresh={handleRefresh}
+							selectedFilters={selectedFilters}
+						/>
+						
+						{children}
+					</div>
+				</div>
 			</main>
 		</div>
 	);

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

@@ -69,12 +69,11 @@ export function NavigationItem({
 				<Icon
 					aria-hidden="true"
 					className={cn(
-						'h-5 w-5 transition-colors duration-200',
+						'h-4 w-4 transition-colors duration-200',
 						isActive
 							? 'text-primary'
 							: 'not-dark:text-primary group-hover:text-primary'
 					)}
-					size={32}
 					weight="duotone"
 				/>
 			</span>