thomasabishop/eolas-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: partition AppSidebar subcomponents

Browse source
This commit is contained in:
Thomas Bishop 2025-07-18 15:30:31 +01:00
parent a2775060c7
commit d6e17e2352
3 changed files with 134 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/EntriesListSidebar.tsx Normal file
View 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
View 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>
)
}

76
src/containers/AppSidebar.tsx
View file

@ -1,12 +1,4 @@
import { import { FileText, Waypoints, SquareLibrary, Settings, ChevronRight } from "lucide-react"
FileText,
Waypoints,
SquareLibrary,
Settings,
Tags,
Info,
ChevronRight,
} from "lucide-react"
import { import {
Sidebar, Sidebar,
@ -18,20 +10,11 @@ import {
SidebarMenuItem, SidebarMenuItem,
SidebarHeader, SidebarHeader,
SidebarFooter, SidebarFooter,
SidebarMenuSub,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import { Collapsible, CollapsibleTrigger } from "@radix-ui/react-collapsible" import TagListSidebar from "@/components/TagListSidebar"
import { CollapsibleContent } from "../components/ui/collapsible" import EntriesListSidebar from "@/components/EntriesListSidebar"
import { mockEntries } from "@/mock-data/mock-entries"
import { mockTags } from "@/mock-data/mock-tags"
const footerMenu = [ const footerMenu = [
{
title: "About",
url: "#",
icon: Info,
},
{ {
title: "Settings", title: "Settings",
url: "#", url: "#",
@ -58,6 +41,7 @@ export function AppSidebar() {
<SidebarGroup> <SidebarGroup>
<SidebarGroupContent> <SidebarGroupContent>
<SidebarMenu> <SidebarMenu>
{/*
<SidebarMenuItem key="graph"> <SidebarMenuItem key="graph">
<SidebarMenuButton asChild> <SidebarMenuButton asChild>
<a href="#"> <a href="#">
@ -66,54 +50,10 @@ export function AppSidebar() {
</a> </a>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
<Collapsible className="group/collapsible">
<SidebarMenuItem key="entries"> */}
<CollapsibleTrigger asChild> <EntriesListSidebar />
<SidebarMenuButton asChild> <TagListSidebar />
<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> </SidebarMenu>
</SidebarGroupContent> </SidebarGroupContent>
</SidebarGroup> </SidebarGroup>