Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: sidebar 추가 #17

Merged
merged 1 commit into from
Jan 7, 2025
Merged

feat: sidebar 추가 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,19 @@
"dependencies": {
"@loadable/component": "^5.15.3",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.4",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-menubar": "^1.1.2",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-toggle": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.3",
"@radix-ui/react-tooltip": "^1.1.6",
"@supabase/supabase-js": "^2.45.4",
"@tanstack/react-query": "^4.29.3",
"@toss/react": "^1.7.0",
Expand Down
27 changes: 20 additions & 7 deletions src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import ReactGA from "react-ga4";
import Home from "./pages/home";
import GalleryPage from "./pages/gallery";
import ErrorPage from "./components/error-page";
import { Layout } from "./components/layout";

export default function App() {
const queryClient = useMemo(() => new QueryClient({}), []);
Expand All @@ -25,13 +26,25 @@ export default function App() {
<QueryClientProvider client={queryClient}>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<Router>
<div className="h-min-screen mx-auto flex h-[900px] min-h-screen w-fit w-full items-center justify-center bg-[#1D2027] p-6">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/gallery" element={<GalleryPage />} />
<Route path="*" element={<ErrorPage />} />
</Routes>
</div>
<Routes>
<Route
path="/"
element={
<Layout>
<Home />
</Layout>
}
/>
<Route
path="/gallery"
element={
<Layout>
<GalleryPage />
</Layout>
}
/>
<Route path="*" element={<ErrorPage />} />
</Routes>
</Router>
<Toaster
toastOptions={{
Expand Down
75 changes: 75 additions & 0 deletions src/components/SideBar/NavMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
"use client";

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

import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "src/components/ui/collapsible";
import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
} from "src/components/ui/sidebar";

export function NavMain({
items,
}: {
items: {
title: string;
url: string;
icon?: LucideIcon;
isActive?: boolean;
items?: {
title: string;
url: string;
}[];
}[];
}) {
return (
<SidebarGroup>
<SidebarGroupLabel>Services</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 className="overflow-hidden text-ellipsis whitespace-nowrap">
{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>
);
}
43 changes: 43 additions & 0 deletions src/components/SideBar/NavProjects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
"use client";

import { type LucideIcon } from "lucide-react";

import {
SidebarGroup,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "src/components/ui/sidebar";

export function NavProjects({
projects,
}: {
projects: {
name: string;
url: string;
icon: LucideIcon;
}[];
}) {
const { isMobile } = useSidebar();

return (
<SidebarGroup className="group-data-[collapsible=icon]:hidden">
<SidebarGroupLabel>Others</SidebarGroupLabel>
<SidebarMenu>
{projects.map((item) => (
<SidebarMenuItem key={item.name}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.name}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroup>
);
}
79 changes: 79 additions & 0 deletions src/components/SideBar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
"use client";

import * as React from "react";

import { GalleryVerticalEnd, ImageIcon, SmileIcon } from "lucide-react";

import { NavMain } from "./NavMain";
import { NavProjects } from "./NavProjects";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarRail,
SidebarTrigger,
useSidebar,
} from "src/components/ui/sidebar";
import { cn } from "src/lib/utils";

// This is sample data.
const data = {
user: {
name: "shadcn",
email: "marcexample.com",
avatar: "/avatars/shadcn.jpg",
},
teams: [
{
name: "space",
logo: GalleryVerticalEnd,
},
],
navMain: [
{
title: "Thumbnail Maker",
url: "https://thumbnail.ssumi.space/",
icon: ImageIcon,
isActive: true,
items: [
{
title: "Home",
url: "/",
},
{
title: "Gallery",
url: "/gallery",
},
{
title: "Github",
url: "https://github.com/sumi-0011/Thumbnail-Maker",
},
],
},
],
projects: [
{
name: "Maker Contact",
url: "https://various.ssumi.space/maker",
icon: SmileIcon,
},
],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const { open } = useSidebar();
return (
<Sidebar collapsible="icon" {...props}>
<SidebarContent>
<SidebarGroup className="flex items-end justify-end pt-4">
<SidebarTrigger
className={cn("relative", open ? "left-[-5px]" : "left-[3px]")}
/>
</SidebarGroup>
<NavMain items={data.navMain} />
<NavProjects projects={data.projects} />
</SidebarContent>
<SidebarRail />
</Sidebar>
);
}
53 changes: 49 additions & 4 deletions src/components/layout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,59 @@
import React from "react";
import { Header } from "../header";
import Contact from "../contact/Contact";
import { Separator } from "@radix-ui/react-select";
import { AppSidebar } from "../SideBar/Sidebar";
import { SidebarProvider, SidebarInset, SidebarTrigger } from "../ui/sidebar";
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
BreadcrumbPage,
} from "src/components/ui/breadcrumb";

export const getNoneLayout = (page: React.ReactElement) => page;

export const getDefaultLayout = (page: React.ReactElement) => {
return (
<div className="h-min-screen mx-auto flex min-h-screen w-fit items-center justify-center bg-[#1D2027] p-6">
{page}
<Contact />
</div>
<SidebarProvider defaultOpen={false}>
<AppSidebar />
<SidebarInset>
<header className="group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear">
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator className="mr-2 h-4" />
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem className="hidden md:block">
<BreadcrumbLink href="#">
Building Your Application
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator className="hidden md:block" />
<BreadcrumbItem>
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
</header>
{page}
</SidebarInset>
</SidebarProvider>
);
};

export function Layout({ children }: { children: React.ReactNode }) {
return (
<SidebarProvider defaultOpen={false}>
<AppSidebar />
<SidebarInset>
<div className="flex min-h-screen items-center justify-center bg-[#1D2027]">
{children}
</div>
</SidebarInset>
</SidebarProvider>
);
}
Loading