Skip to content

Commit

Permalink
sidebar init and basic layout added
Browse files Browse the repository at this point in the history
  • Loading branch information
Smnthjm08 committed Nov 15, 2024
1 parent 88bff90 commit 2ac45b6
Show file tree
Hide file tree
Showing 14 changed files with 1,560 additions and 10 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"@prisma/client": "^5.18.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-collapsible": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
Expand Down
15 changes: 15 additions & 0 deletions src/app/(new)/new/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
import { AppSidebar } from '@/components/new/app-sidebar';
import React from 'react';

export default function Layout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider>
<AppSidebar />
<main>
<SidebarTrigger />
{children}
</main>
</SidebarProvider>
);
}
6 changes: 6 additions & 0 deletions src/app/(new)/new/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default function Page() {
return (
<div>
</div>
);
}
26 changes: 25 additions & 1 deletion src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -355,4 +355,28 @@
to {
mask-size: 350vmax;
}
}
}

@layer base {
:root {
--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%;
}

.dark {
--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%;
}
}
4 changes: 2 additions & 2 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Providers } from './providers';
import { GoogleAnalytics } from '@/components/analytics/GoogleAnalytics';
import { siteConfig } from '@/config/site-config';
import { Toaster } from 'sonner';
import { Navbar } from '@/components/Navbar';
// import { Navbar } from '@/components/Navbar';
import NextTopLoader from 'nextjs-toploader';
import OfflineNotification from '@/components/OfflineNavigator';

Expand Down Expand Up @@ -38,7 +38,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
showSpinner={false}
/>
<Providers>
<Navbar />
{/* <Navbar /> */}
<OfflineNotification />
{children}
<Toaster richColors />
Expand Down
229 changes: 229 additions & 0 deletions src/components/new/app-sidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
'use client';

import * as React from 'react';

import {
Sidebar,
SidebarContent,
SidebarFooter,
// SidebarGroup,
SidebarHeader,
SidebarMenu,
// SidebarMenuButton,
SidebarMenuItem,
// SidebarMenuSub,
// SidebarMenuSubButton,
// SidebarMenuSubItem,
SidebarRail,
} from '@/components/ui/sidebar';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import { Button } from '../ui/button';
import { usePathname, useRouter } from 'next/navigation';
import {
ArrowLeft,
AudioWaveform,
BookOpen,
Bot,
Command,
CommandIcon,
Frame,
GalleryVerticalEnd,
PieChart,
Settings2,
} from 'lucide-react';
import { NavMain } from './nav-main';
import { NavUser } from './nav-user';
// import { NavProjects } from './nav-projects';

// This is sample data.
const data = {
user: {
name: 'shadcn',
email: '[email protected]',
avatar: '/avatars/shadcn.jpg',
},
teams: [
{
name: 'Acme Inc',
logo: GalleryVerticalEnd,
plan: 'Enterprise',
},
{
name: 'Acme Corp.',
logo: AudioWaveform,
plan: 'Startup',
},
{
name: 'Evil Corp.',
logo: Command,
plan: 'Free',
},
],
navMain: [
{
title: 'Week 0',
url: '#',
icon: CommandIcon,
isActive: true,
items: [
{
title: 'Intro, Setting Up Your IDE',
url: '#',
},
{
title: 'HTML Basics',
url: '#',
},
{
title: 'Css Basics',
url: '#',
},
],
},
{
title: 'Models',
url: '#',
icon: Bot,
items: [
{
title: 'Genesis',
url: '#',
},
{
title: 'Explorer',
url: '#',
},
{
title: 'Quantum',
url: '#',
},
],
},
{
title: 'Documentation',
url: '#',
icon: BookOpen,
items: [
{
title: 'Introduction',
url: '#',
},
{
title: 'Get Started',
url: '#',
},
{
title: 'Tutorials',
url: '#',
},
{
title: 'Changelog',
url: '#',
},
],
},
{
title: 'Settings',
url: '#',
icon: Settings2,
items: [
{
title: 'General',
url: '#',
},
{
title: 'Team',
url: '#',
},
{
title: 'Billing',
url: '#',
},
{
title: 'Limits',
url: '#',
},
],
},
],
projects: [
{
name: 'Design Engineering',
url: '#',
icon: Frame,
},
{
name: 'Sales & Marketing',
url: '#',
icon: PieChart,
},
{
name: 'Travel',
url: '#',
icon: Map,
},
],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const { data: session } = useSession();
const router = useRouter();
const pathname = usePathname();

return (
<Sidebar {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
{/* <SidebarMenuButton size="lg" asChild> */}
<div className="flex items-center justify-center gap-2">
<a href="#">
<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
{session?.user && pathname !== '/home' && (
<Button
onClick={() => router.back()}
variant={'ghost'}
size={'icon'}
className="flex items-center gap-2"
>
<ArrowLeft className="size-4" />
</Button>
)}
</div>
</a>

<div className="flex flex-col gap-0.5 leading-none">
{/* <span className="font-semibold">Documentation</span> */}
{/* <span className="">v1.0.0</span> */}
<Link href={'/'} className="flex items-center gap-2">
<img
src={
'https://appx-wsb-gcp.akamai.net.in/subject/2023-01-17-0.17044360120951185.jpg'
}
alt="100xDevs Logo"
className="size-8 rounded-full"
/>
<p
className={`hidden bg-gradient-to-b from-blue-400 to-blue-700 bg-clip-text text-2xl font-black tracking-tighter text-transparent min-[375px]:block`}
>
100xDevs
</p>
</Link>
</div>
</div>
{/* </SidebarMenuButton> */}
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain items={data?.navMain} />
{/* <NavProjects projects={data?.projects} /> */}
</SidebarContent>
<SidebarRail />
<SidebarFooter>
<NavUser user={data.user} />
</SidebarFooter>
</Sidebar>
);
}
74 changes: 74 additions & 0 deletions src/components/new/nav-main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
'use client';

import { ChevronRight, type LucideIcon } from 'lucide-react';

import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger
} from "@/components/ui/collapsible";

import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from '@/components/ui/sidebar';

export function NavMain({
items,
}: {
items: {
title: string;
url: string;
icon?: LucideIcon;
isActive?: boolean;
items?: {
title: string;
url: string;
}[];
}[];
}) {
return (
<SidebarGroup>
<SidebarGroupLabel>Platform</SidebarGroupLabel>
<SidebarMenu>
{items.map((item) => (
<Collapsible
key={item.title}
asChild
defaultOpen={item.isActive}
className="group/collapsible"
>
<SidebarMenuItem>
<CollapsibleTrigger asChild>
<SidebarMenuButton tooltip={item.title}>
{item.icon && <item.icon />}
<span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</SidebarMenuButton>
</CollapsibleTrigger>
<CollapsibleContent>
<SidebarMenuSub>
{item.items?.map((subItem) => (
<SidebarMenuSubItem key={subItem.title}>
<SidebarMenuSubButton asChild>
<a href={subItem.url}>
<span>{subItem.title}</span>
</a>
</SidebarMenuSubButton>
</SidebarMenuSubItem>
))}
</SidebarMenuSub>
</CollapsibleContent>
</SidebarMenuItem>
</Collapsible>
))}
</SidebarMenu>
</SidebarGroup>
);
}
Loading

0 comments on commit 2ac45b6

Please sign in to comment.