fix this //layout.tsx
import AdminPanelLayout from "@/components/admin-panel/admin-panel-layout";

export default async function Layout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <AdminPanelLayout>{children}</AdminPanelLayout>;
}

//page.tsx
import { ContentLayout } from "@/components/admin-panel/content-layout";

export default function Page() {
  return (
    <ContentLayout title="Test">
      <div>Test</div>
    </ContentLayout>
  );
}
use that sidebar for this 
"use client"; // Mark as a Client Component

import { signOut, useSession } from "next-auth/react";
import { useState } from "react";
import Link from "next/link"; // Assuming you're using Next.js
import { Button } from "@/components/ui/button"; // Shadcn UI Button
import {
  Card,
  CardHeader,
  CardContent,
} from "@/components/ui/card"; // Shadcn UI Card
import {
  Table,
  TableCaption,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table"; // Shadcn UI Table
import {
  HomeIcon,
  CogIcon,
  UsersIcon,
  LogOutIcon,
} from "lucide-react"; // Example icons from lucide-react

// Import Shadcn UI's NavigationMenu components
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent,
} from "@/components/ui/navigation-menu";

export default function Dashboard() {
  const [discordServers, setDiscordServers] = useState([
    { id: 1, name: "My Discord Bot", status: "Running" },
    { id: 2, name: "Gaming Bot", status: "Stopped" },
  ]);

  return (
    <div className="flex h-screen">
      {/* Sidebar */}
      <aside className="w-64 bg-gray-800 text-white flex-shrink-0">
        <div className="p-6 text-2xl font-bold border-b border-gray-700">
          MyApp
        </div>
        <nav className="mt-10">
          {/* Using Shadcn UI's NavigationMenu */}
          <NavigationMenu>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuLink asChild>
                  <Link href="/dashboard" className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
                    <HomeIcon className="w-5 h-5 mr-3" />
                    Dashboard
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>

              <NavigationMenuItem>
                <NavigationMenuLink asChild>
                  <Link href="/servers" className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
                    <UsersIcon className="w-5 h-5 mr-3" />
                    Servers
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>

              <NavigationMenuItem>
                <NavigationMenuLink asChild>
                  <Link href="/settings" className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors">
                    <CogIcon className="w-5 h-5 mr-3" />
                    Settings
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>

              {/* Sign Out Button */}
              <NavigationMenuItem>
                <button
                  className="flex items-center py-2.5 px-4 rounded-lg hover:bg-gray-700 transition-colors border border-solid border-black"
                  onClick={() => {
                    signOut({ redirect: true });
                  }}
                >
                  <LogOutIcon className="w-5 h-5 mr-3" />
                  Sign Out
                </button>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 bg-gray-100 p-8 overflow-auto">
        <h1 className="text-3xl font-bold mb-8">Dashboard</h1>

        {/* Discord Bot Servers */}
        <Card className="mb-6">
          <CardHeader>
            <h2 className="text-xl font-semibold">Discord Bot Servers</h2>
          </CardHeader>
          <CardContent>
            <Table>
              <TableCaption>A list of your Discord bot servers.</TableCaption>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[100px]">Server Name</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {discordServers.map((server) => (
                  <TableRow key={server.id}>
                    <TableCell>{server.name}</TableCell>
                    <TableCell>{server.status}</TableCell>
                    <TableCell>
                      <Button variant="outline" className="mr-2">
                        Start
                      </Button>
                      <Button variant="destructive">Stop</Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>

        {/* Billing Section */}
        <Card className="mb-6">
          <CardHeader>
            <h2 className="text-xl font-semibold">Billing</h2>
          </CardHeader>
          <CardContent>
            <p>Current Plan: Premium</p>
            <p>Next Payment: $15.99 on 2024-11-01</p>
            <Button variant="default" className="mt-4">
              Manage Billing
            </Button>
          </CardContent>
        </Card>
      </main>
    </div>
  );
}