Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-07-14 03:46:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update DocSidebar.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-17 17:23:56 +01:00 committed by GitHub
parent 9d5a6428a7
commit af2102774f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/components/DocSidebar.tsx
View File

@ -2,8 +2,8 @@
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname } from "next/navigation"
import { useState } from "react" import { useState, useEffect } from "react"
import { ChevronDown, ChevronRight } from "lucide-react" import { ChevronDown, ChevronRight, Menu, X } from "lucide-react"
interface SubMenuItem { interface SubMenuItem {
title: string title: string
@ -55,11 +55,27 @@ const sidebarItems: MenuItem[] = [
export default function DocSidebar() { export default function DocSidebar() {
const pathname = usePathname() const pathname = usePathname()
const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({}) const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({})
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const toggleSection = (title: string) => { const toggleSection = (title: string) => {
setOpenSections((prev) => ({ ...prev, [title]: !prev[title] })) setOpenSections((prev) => ({ ...prev, [title]: !prev[title] }))
} }
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen)
}
useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 768) {
setIsMobileMenuOpen(false)
}
}
window.addEventListener("resize", handleResize)
return () => window.removeEventListener("resize", handleResize)
}, [])
const renderMenuItem = (item: MenuItem) => { const renderMenuItem = (item: MenuItem) => {
if (item.submenu) { if (item.submenu) {
const isOpen = openSections[item.title] || false const isOpen = openSections[item.title] || false
@ -83,6 +99,7 @@ export default function DocSidebar() {
? "bg-blue-500 text-white" ? "bg-blue-500 text-white"
: "text-gray-700 hover:bg-gray-200 hover:text-gray-900" : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
}`} }`}
onClick={() => setIsMobileMenuOpen(false)}
> >
{subItem.title} {subItem.title}
</Link> </Link>
@ -100,6 +117,7 @@ export default function DocSidebar() {
className={`block p-2 rounded ${ className={`block p-2 rounded ${
pathname === item.href ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200 hover:text-gray-900" pathname === item.href ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
}`} }`}
onClick={() => setIsMobileMenuOpen(false)}
> >
{item.title} {item.title}
</Link> </Link>
@ -109,9 +127,23 @@ export default function DocSidebar() {
} }
return ( return (
<nav className="w-full md:w-64 bg-gray-100 p-4 md:p-6"> <>
<h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2> <button
<ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul> className="md:hidden fixed top-4 left-4 z-50 p-2 bg-gray-100 rounded-md"
</nav> onClick={toggleMobileMenu}
aria-label="Toggle menu"
>
{isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
<nav
className={`fixed md:static top-0 left-0 w-full h-full md:h-auto md:w-64 bg-gray-100 p-4 md:p-6 transform ${
isMobileMenuOpen ? "translate-x-0" : "-translate-x-full"
} md:translate-x-0 transition-transform duration-300 ease-in-out overflow-y-auto z-40`}
>
<h2 className="text-lg font-semibold mb-4 text-gray-900 mt-12 md:mt-0">Documentation</h2>
<ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul>
</nav>
</>
) )
} }