调整帮助中心移动端文档布局
This commit is contained in:
37
src/app/(home)/docs/sidebar-drawer.tsx
Normal file
37
src/app/(home)/docs/sidebar-drawer.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
'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">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user