create sidebar, design logo and change theme

faisalbhuiyan3038 · Nov 27, 2024 · b379d21 · b379d21
1 parent 3186721
commit b379d21
Show file tree

Hide file tree

Showing 16 changed files with 8,944 additions and 13 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "@trpc/react-query": "^11.0.0-rc.446",
     "@trpc/server": "^11.0.0-rc.446",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.1",
@@ -75,6 +76,8 @@
     "shadcn-ui": "^0.9.3",
     "sonner": "^1.7.0",
     "superjson": "^2.2.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",
     "zod": "^3.23.8"
   },
@@ -91,7 +94,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "prisma": "^5.14.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.5.3"
   },
   "ct3aMetadata": {

diff --git a/public/another_logo/color/logo_color.png b/public/another_logo/color/logo_color.png
diff --git a/public/another_logo/color/logo_transparent.png b/public/another_logo/color/logo_transparent.png
diff --git a/public/another_logo/logo.png b/public/another_logo/logo.png
diff --git a/public/another_logo/logo_only_image.png b/public/another_logo/logo_only_image.png
diff --git a/public/another_logo/logo_transparent.png b/public/another_logo/logo_transparent.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/logo_transparent.png b/public/logo_transparent.png
diff --git a/src/app/(protected)/app-sidebar.tsx b/src/app/(protected)/app-sidebar.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
+import { Bot, CreditCard, LayoutDashboard, Plus, Presentation } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+const items = [
+    {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: LayoutDashboard
+    },
+    {
+        title: "Q&A",
+        url: "/qa",
+        icon: Bot
+    },
+    {
+        title: "Meetings",
+        url: "/meetings",
+        icon: Presentation
+    },
+    {
+        title: "Billing",
+        url: "/billing",
+        icon: CreditCard
+    }
+]
+
+const projects = [
+    {
+        name: "Project 1"
+    },
+    {
+        name: "Project 2"
+    }
+]
+
+export function AppSidebar() {
+    const pathname = usePathname();
+    const {open} = useSidebar();
+    return (
+        <Sidebar collapsible="icon" variant="floating">
+            <SidebarHeader>
+                <div className="flex items-center gap-2">
+                    <Image src="/logo_transparent.png" width={200} height={150} alt="logo" />
+                </div>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupLabel>
+                        Application
+                        </SidebarGroupLabel>
+                        <SidebarGroupContent>
+                            <SidebarMenu>
+                            {items.map((item) => {
+                                return (
+                                    <SidebarMenuItem key={item.title} >
+                                        <SidebarMenuButton asChild>
+                                            <Link href={item.url} className={cn({'!bg-primary !text-white': pathname === item.url}, 'list-none')}>
+                                            <item.icon />
+                                            <span>{item.title}</span>
+                                            </Link>
+                                        </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                )
+                            })}
+                            </SidebarMenu>
+                        </SidebarGroupContent>
+                </SidebarGroup>
+
+                <SidebarGroup>
+                    <SidebarGroupLabel>
+                        Your Projects
+                    </SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {projects.map(project => {
+                                return (
+                                    <SidebarMenuItem key={project.name}>
+                                        <SidebarMenuButton asChild>
+                                            <div>
+                                                <div className={cn('rounded-sm border size-6 flex items-center justify-center text-sm bg-white text-primary', {'bg-primary text-white': true})}>
+                                                    {project.name[0]}
+                                                </div>
+                                                <span>{project.name}</span>
+                                            </div>
+                                        </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                )
+                            })}
+                            <div className="h-2" />
+                            {open && (
+                            <SidebarMenuItem>
+                                <SidebarMenuButton asChild>
+                                    <Link href="/create">
+                                    <Button size="sm" variant="outline" className="w-fit">
+                                        <Plus />
+                                        Create Project
+                                    </Button>
+                                    </Link>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                            )}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+
+            </SidebarContent>
+        </Sidebar>
+    );
+}
diff --git a/src/app/dashboard/page.tsx → src/app/(protected)/dashboard/page.tsx b/src/app/dashboard/page.tsx → src/app/(protected)/dashboard/page.tsx
diff --git a/src/app/(protected)/layout.tsx b/src/app/(protected)/layout.tsx
@@ -0,0 +1,30 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { UserButton } from "@clerk/nextjs";
+import React from "react";
+import { AppSidebar } from "./app-sidebar";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const SidebarLayout = ({ children }: Props) => {
+    return (
+        <SidebarProvider>
+            <AppSidebar />
+            <main className="w-full m-2">
+                <div className="flex items-center gap-2 border-sidebar-border bg-sidebar border shadow rounded-md p-2 px-4">
+                    {/* <SearchBar /> */}
+                    <div className="ml-auto"></div>
+                    <UserButton />
+                </div>
+                <div className="h-4"></div>
+                {/* Main content */}
+                <div className="border-sidebar-border bg-sidebar border shadow rounded-md overflow-y-scroll h=[calc(100vh-8rem)] p-4">
+                    {children}
+                </div>
+            </main>
+        </SidebarProvider>
+    );
+};
+
+export default SidebarLayout;
diff --git a/src/app/(protected)/qa/page.tsx b/src/app/(protected)/qa/page.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const QAPage = () => {
+    return (
+        <div>QAPage</div>
+    )
+}
+
+export default QAPage
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -9,8 +9,8 @@
     --card-foreground: 0 0% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
     --secondary: 0 0% 96.1%;
     --secondary-foreground: 0 0% 9%;
     --muted: 0 0% 96.1%;
@@ -21,31 +21,31 @@
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 89.8%;
     --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
+    --ring: 0 72.2% 50.6%;
+    --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
-  ;
     --sidebar-background: 0 0% 98%;
     --sidebar-foreground: 240 5.3% 26.1%;
     --sidebar-primary: 240 5.9% 10%;
     --sidebar-primary-foreground: 0 0% 98%;
     --sidebar-accent: 240 4.8% 95.9%;
     --sidebar-accent-foreground: 240 5.9% 10%;
     --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%}
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 85.7% 97.3%;
     --secondary: 0 0% 14.9%;
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
@@ -56,21 +56,21 @@
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
     --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --ring: 0 72.2% 50.6%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
-  ;
+    --chart-5: 340 75% 55%;
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: 240 3.7% 15.9%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
     --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%}
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
 }
 @layer base {
   * {