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 {
FileText,
Waypoints,
SquareLibrary,
Settings,
Tags,
Info,
ChevronRight,
} from "lucide-react"
import { FileText, Waypoints, SquareLibrary, Settings, ChevronRight } from "lucide-react"
import {
Sidebar,
@ -18,20 +10,11 @@ import {
SidebarMenuItem,
SidebarHeader,
SidebarFooter,
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"
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: "#",
@ -58,6 +41,7 @@ export function AppSidebar() {
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
{/*
<SidebarMenuItem key="graph">
<SidebarMenuButton asChild>
<a href="#">
@ -66,54 +50,10 @@ 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>
*/}
<EntriesListSidebar />
<TagListSidebar />
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>