feat: Add pages/components for authenticated flow

app/(authenticated)/(app)/DesktopSidebar.tsx

@@ -0,0 +1,84 @@
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { BarChart, Database, FileKey, Filter, FormInput, Home } from "lucide-react";
+import { ChannelLink } from "./channelLink";
+import { TeamSwitcher } from "./TeamSwitcher";
+import Link from "next/link";
+type Props = {
+  navigation: {
+    href: string;
+    external?: boolean;
+    label: string;
+  }[];
+
+  channels: {
+    name: string;
+  }[];
+};
+
+export const DesktopSidebar: React.FC<Props> = ({ navigation, channels }) => {
+  return (
+    <aside className="relative hidden min-h-screen pb-12 border-r lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col border-white/10">
+      <Link
+        href="/overview"
+        className="flex items-center gap-2 px-8 py-6 text-2xl font-semibold tracking-tight duration-200 stroke-zinc-800 dark:text-zinc-200 dark:stroke-zinc-500 dark:hover:stroke-white hover:stroke-zinc-700 hover:text-zinc-700 dark:hover:text-white"
+      >
+        <Logo className="w-8 h-8 duration-200 " />
+        Omnidash
+      </Link>
+      <div className="space-y-4">
+        <div className="px-6 py-2">
+          <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">{/* Events */}</h2>
+          <div className="space-y-1">
+            <Link href="/overview">
+              <Button variant="ghost" size="sm" className="justify-start w-full">
+                <Home className="w-4 h-4 mr-2" />
+                Overview
+              </Button>
+            </Link>
+            <Link href="/keys">
+              <Button variant="ghost" size="sm" className="justify-start w-full">
+                <FileKey className="w-4 h-4 mr-2" />
+                API Keys
+              </Button>
+            </Link>
+            <Link href="/channels">
+              <Button variant="ghost" size="sm" className="justify-start w-full">
+                <Database className="w-4 h-4 mr-2" />
+                Channels
+              </Button>
+            </Link>
+            <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+              <Filter className="w-4 h-4 mr-2" />
+              Filter
+            </Button>
+            <Button variant="ghost" disabled size="sm" className="justify-start w-full">
+              <BarChart className="w-4 h-4 mr-2" />
+              Analytics
+            </Button>
+          </div>
+        </div>
+        <div className="py-2">
+          <h2 className="relative px-8 text-lg font-semibold tracking-tight">Channels</h2>
+          <ScrollArea className="h-[230px] px-4">
+            <div className="p-2 space-y-1">
+              {channels
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map((channel) => (
+                  <ChannelLink
+                    key={channel.name}
+                    href={`/channels/${channel.name}`}
+                    channelName={channel.name}
+                  />
+                ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+      <div className="absolute inset-x-0 mx-6 bottom-8">
+        <TeamSwitcher />
+      </div>
+    </aside>
+  );
+};