refactor: partition AppSidebar subcomponents
This commit is contained in:
parent
a2775060c7
commit
d6e17e2352
3 changed files with 134 additions and 124 deletions
35
src/components/EntriesListSidebar.tsx
Normal file
35
src/components/EntriesListSidebar.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { FileText, ChevronRight } from "lucide-react"
|
||||
|
||||
import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
|
||||
import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
|
||||
import { CollapsibleContent } from "../components/ui/collapsible"
|
||||
|
||||
import { mockEntries } from "@/mock-data/mock-entries"
|
||||
export default function EntriesListSidebar() {
|
||||
return (
|
||||
<Collapsible className="group/collapsible">
|
||||
<SidebarMenuItem key="entries">
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="#">
|
||||
<FileText />
|
||||
<span>Entries</span>
|
||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{mockEntries.map((item) => (
|
||||
<SidebarMenuItem>
|
||||
<a href={item.url}>
|
||||
<span className="text-xs">{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
35
src/components/TagListSidebar.tsx
Normal file
35
src/components/TagListSidebar.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Tags, ChevronRight } from "lucide-react"
|
||||
|
||||
import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "@/components/ui/sidebar"
|
||||
import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
|
||||
import { CollapsibleContent } from "../components/ui/collapsible"
|
||||
import { mockTags } from "@/mock-data/mock-tags"
|
||||
|
||||
export default function TagListSidebar() {
|
||||
return (
|
||||
<Collapsible className="group/collapsible">
|
||||
<SidebarMenuItem key="tags">
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="#">
|
||||
<Tags />
|
||||
<span>Tags</span>
|
||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{mockTags.map((item) => (
|
||||
<SidebarMenuItem>
|
||||
<a href={item.url}>
|
||||
<span className="text-xs">{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,63 +1,47 @@
|
|||
import {
|
||||
FileText,
|
||||
Waypoints,
|
||||
SquareLibrary,
|
||||
Settings,
|
||||
Tags,
|
||||
Info,
|
||||
ChevronRight,
|
||||
} from "lucide-react"
|
||||
import { FileText, Waypoints, SquareLibrary, Settings, ChevronRight } from "lucide-react"
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarHeader,
|
||||
SidebarFooter,
|
||||
SidebarMenuSub,
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarHeader,
|
||||
SidebarFooter,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible"
|
||||
import { CollapsibleContent } from "../components/ui/collapsible"
|
||||
import { mockEntries } from "@/mock-data/mock-entries"
|
||||
import { mockTags } from "@/mock-data/mock-tags"
|
||||
import TagListSidebar from "@/components/TagListSidebar"
|
||||
import EntriesListSidebar from "@/components/EntriesListSidebar"
|
||||
|
||||
const footerMenu = [
|
||||
{
|
||||
title: "About",
|
||||
url: "#",
|
||||
icon: Info,
|
||||
},
|
||||
|
||||
{
|
||||
title: "Settings",
|
||||
url: "#",
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "#",
|
||||
icon: Settings,
|
||||
},
|
||||
]
|
||||
|
||||
export function AppSidebar() {
|
||||
return (
|
||||
<Sidebar>
|
||||
<SidebarHeader className="border-b h-12">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
|
||||
<a href="#">
|
||||
<SquareLibrary className="h-5 w-5" />
|
||||
<span className="text-base font-semibold">Eólas</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
return (
|
||||
<Sidebar>
|
||||
<SidebarHeader className="border-b h-12">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild className="data-[slot=sidebar-menu-button]:!p-1.5">
|
||||
<a href="#">
|
||||
<SquareLibrary className="h-5 w-5" />
|
||||
<span className="text-base font-semibold">Eólas</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{/*
|
||||
<SidebarMenuItem key="graph">
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="#">
|
||||
|
|
@ -66,76 +50,32 @@ export function AppSidebar() {
|
|||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<Collapsible className="group/collapsible">
|
||||
<SidebarMenuItem key="entries">
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="#">
|
||||
<FileText />
|
||||
<span>Entries</span>
|
||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{mockEntries.map((item) => (
|
||||
<SidebarMenuItem>
|
||||
<a href={item.url}>
|
||||
<span className="text-xs">{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
<Collapsible className="group/collapsible">
|
||||
<SidebarMenuItem key="entries">
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href="#">
|
||||
<Tags />
|
||||
<span>Tags</span>
|
||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{mockTags.map((item) => (
|
||||
<SidebarMenuItem>
|
||||
<a href={item.url}>
|
||||
<span className="text-xs">{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{footerMenu.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
)
|
||||
|
||||
*/}
|
||||
<EntriesListSidebar />
|
||||
<TagListSidebar />
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{footerMenu.map((item) => (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton asChild>
|
||||
<a href={item.url}>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue