38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
'use client'
|
|
import {useState} from 'react'
|
|
import {Menu} from 'lucide-react'
|
|
import {
|
|
Drawer,
|
|
DrawerContent,
|
|
DrawerTrigger,
|
|
} from '@/components/ui/drawer'
|
|
import Sidebar from './sidebar'
|
|
|
|
export default function SidebarDrawer() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="md:hidden flex items-center justify-between bg-white rounded-lg p-3">
|
|
<span className="font-medium text-slate-900">帮助中心</span>
|
|
<Drawer open={open} onOpenChange={setOpen}>
|
|
<DrawerTrigger asChild>
|
|
<button className="flex items-center gap-2 text-slate-600 hover:text-slate-900 p-1 cursor-pointer">
|
|
<Menu size={20}/>
|
|
<span className="text-sm">目录</span>
|
|
</button>
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<div className="mx-auto w-full max-w-sm">
|
|
<div className="px-4 py-3 border-b">
|
|
<h3 className="text-lg font-semibold text-slate-900">帮助中心</h3>
|
|
</div>
|
|
<div className="px-2 py-2 max-h-[70vh] overflow-y-auto">
|
|
<Sidebar onClose={() => setOpen(false)}/>
|
|
</div>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
)
|
|
}
|