Feat(finalize for triggering build for more enhanced and advanced functionality dashboard with dedicated section for viewing , displaying and replying important stuffs like mails right from dashboard ) 🚀: Implemented comprehensive updates: refactor data fetching, revamp DataTable component for improved usability, and introduce StickyDynamicNav with resizable panels for enhanced mail client functionality with all the changes realtime updated from backend and populate on dashboard as state changes and status on table changes as stripe payment occurs in realtime like successfull for paid and processing for unpaid , everything is from db and updation in realtime including stripe payments.

Author: lalitdotdev

app/(dashboard)/[storeId]/layout.tsx

@@ -1,8 +1,13 @@
-import { redirect } from "next/navigation";
-import { auth } from "@clerk/nextjs";
+import { redirect } from 'next/navigation';
+import { auth } from '@clerk/nextjs';
 
-import Navbar from "@/components/navbar";
-import prismadb from "@/lib/prismadb";
+import Navbar from '@/components/navbar';
+import prismadb from '@/lib/prismadb';
+
+import { accounts, mails } from '@/lib/data';
+import { cookies } from 'next/headers';
+
+import { StickyDynamicNav } from '@/components/dynamic-sticky-nav';
 
 export default async function DashboardLayout({
   children,
@@ -12,9 +17,14 @@ export default async function DashboardLayout({
   params: { storeId: string };
 }) {
   const { userId } = auth();
+  const layout = cookies().get('react-resizable-panels:layout');
+  const collapsed = cookies().get('react-resizable-panels:collapsed');
+
+  const defaultLayout = layout ? JSON.parse(layout.value) : undefined;
+  const defaultCollapsed = collapsed ? JSON.parse(collapsed.value) : undefined;
 
   if (!userId) {
-    redirect("/sign-in");
+    redirect('/sign-in');
   }
 
   // Checking if the store exists and belongs to the user before rendering the page
@@ -26,13 +36,23 @@ export default async function DashboardLayout({
   });
 
   if (!store) {
-    redirect("/");
+    redirect('/');
   }
 
   return (
     <>
       <Navbar />
+
       {children}
+      <div className="hidden flex-col md:flex">
+        <StickyDynamicNav
+          accounts={accounts}
+          mails={mails}
+          defaultLayout={defaultLayout}
+          defaultCollapsed={defaultCollapsed}
+          navCollapsedSize={4}
+        />
+      </div>
     </>
   );
 }

components/navbar.tsx

@@ -1,18 +1,18 @@
-import { UserButton, auth } from "@clerk/nextjs";
-import { redirect } from "next/navigation";
+import { UserButton, auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
 
-import StoreSwitcher from "@/components/store-switcher";
+import StoreSwitcher from '@/components/store-switcher';
 
-import prismadb from "@/lib/prismadb";
+import prismadb from '@/lib/prismadb';
 
-import { MainNav } from "./main-nav";
-import { ThemeToggle } from "./theme-toggle";
+import { MainNav } from './main-nav';
+import { ThemeToggle } from './theme-toggle';
 
 const Navbar = async () => {
   const { userId } = auth();
 
   if (!userId) {
-    redirect("/sign-in");
+    redirect('/sign-in');
   }
 
   const stores = await prismadb.store.findMany({