src/app/dashboard/(overview)/loading.tsx

@@ -1,5 +0,0 @@
-import DashboardSkeleton from "@/app/dashboard/components/skeletons/skeletons";
-
-export default function Loading() {
-  return <DashboardSkeleton />;
-}

src/app/dashboard/components/client/nav-links/nav-link-controller.ts

@@ -0,0 +1,29 @@
+
+import { DocumentIcon } from '@/app/components/icons/document';
+import HomeIcon from '@/app/components/icons/home';
+import { UserIcon } from '@/app/components/icons/user';
+import { usePathname } from 'next/navigation';
+
+type LinkItem = {
+    name: string; 
+    href: string;
+    icon: (props: {className?: string}) => JSX.Element
+}
+export default function navLinkPersonalVM() {
+    const pathname = usePathname()
+    // Map of links to display in the side navigation.
+    // Depending on the size of the application, this would be stored in a database.
+    const links: LinkItem[] = [
+        { name: 'Home', href: '/dashboard', icon: HomeIcon },
+        {
+            name: 'Invoices',
+            href: '/dashboard/invoices',
+            icon: DocumentIcon,
+        },
+        { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
+    ];
+    return {
+        links,
+        isLinkActive: (link: LinkItem) => pathname === link.href
+    }
+}

src/app/dashboard/components/client/nav-links/nav-links.tsx

@@ -1,25 +1,10 @@
 'use client'
-import { DocumentIcon } from '@/app/components/icons/document';
-import HomeIcon from '@/app/components/icons/home';
-import { UserIcon } from '@/app/components/icons/user';
+import navLinkPersonalVM from '@/app/dashboard/components/client/nav-links/nav-link-controller';
 import clsx from 'clsx';
 import Link from 'next/link'
-import { usePathname } from 'next/navigation';
-
-// Map of links to display in the side navigation.
-// Depending on the size of the application, this would be stored in a database.
-const links = [
-  { name: 'Home', href: '/dashboard', icon: HomeIcon },
-  {
-    name: 'Invoices',
-    href: '/dashboard/invoices',
-    icon: DocumentIcon,
-  },
-  { name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
-];
 
 export default function NavLinks() {
-  const pathname = usePathname()
+  const { links, isLinkActive  } = navLinkPersonalVM()
   return (
     <>
       {links.map((link) => {
@@ -31,7 +16,7 @@ export default function NavLinks() {
             className={clsx(
               'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
               {
-                'bg-sky-100 text-blue-600': pathname === link.href,
+                'bg-sky-100 text-blue-600': isLinkActive(link),
               },
             )}
           >

src/app/dashboard/components/server/card/card.tsx

@@ -1,4 +1,4 @@
-import cardController from "@/app/dashboard/components/card/card-controller";
+import cardController from "@/app/dashboard/components/server/card/card-controller";
 
 
 

src/app/dashboard/components/server/cards/cards.tsx

@@ -1,5 +1,5 @@
-import { Card } from '@/app/dashboard/components/card/card';
-import cardsController from '@/app/dashboard/components/cards/cards-controller';
+import { Card } from '@/app/dashboard/components/server/card/card';
+import cardsController from '@/app/dashboard/components/server/cards/cards-controller';
 
 
 export default async function CardWrapper() {

src/app/dashboard/components/server/latest-invoices/latest-invoices.tsx

@@ -1,4 +1,4 @@
-import latestInvoicesController from '@/app/dashboard/components/latest-invoices/latest-invoices-controller';
+import latestInvoicesController from '@/app/dashboard/components/server/latest-invoices/latest-invoices-controller';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Image from 'next/image';

src/app/dashboard/components/server/revenue-chart/revenue-chart.tsx

@@ -1,4 +1,4 @@
-import revenueChartController from '@/app/dashboard/components/revenue-chart/revenue-chart-controller';
+import revenueChartController from '@/app/dashboard/components/server/revenue-chart/revenue-chart-controller';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 
 export default async function RevenueChart() {

src/app/dashboard/components/server/sidenav.tsx

@@ -1,4 +1,4 @@
-import NavLinks from '@/app/dashboard/components/nav-links';
+import NavLinks from '@/app/dashboard/components/client/nav-links/nav-links';
 import Link from 'next/link';
 
 export default function SideNav() {

src/app/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-import SideNav from "@/app/dashboard/components/sidenav";
+import SideNav from "@/app/dashboard/components/server/sidenav";
 
  
 export default function Layout({ children }: { children: React.ReactNode }) {

src/app/dashboard/loading.tsx

@@ -0,0 +1,5 @@
+import DashboardSkeleton from "@/app/dashboard/components/server/skeletons/skeletons";
+
+export default function Loading() {
+  return <DashboardSkeleton />;
+}

src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
-import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/skeletons/skeletons";
-import CardWrapper from "@/app/dashboard/components/cards/cards";
-import LatestInvoices from "@/app/dashboard/components/latest-invoices/latest-invoices";
-import RevenueChart from "@/app/dashboard/components/revenue-chart/revenue-chart";
+import { LatestInvoicesSkeleton, RevenueChartSkeleton } from "@/app/dashboard/components/server/skeletons/skeletons";
+import CardWrapper from "@/app/dashboard/components/server/cards/cards";
+import LatestInvoices from "@/app/dashboard/components/server/latest-invoices/latest-invoices";
+import RevenueChart from "@/app/dashboard/components/server/revenue-chart/revenue-chart";
 import { Suspense } from "react";
 
 export default async function Dashboard() {