diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index 1c43f79..15678e0 100644 --- a/src/app/admin/layout.tsx +++ b/src/app/admin/layout.tsx @@ -24,13 +24,15 @@ export default function Layout({ children }: { children: React.ReactNode }) {
-

- { - sidebarItems - .flat() - .find((item) => item.href === pathName)?.title - } -

+
+

+ { + sidebarItems + .flat() + .find((item) => item.href === pathName)?.title + } +

+
diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx index 1dc5448..40a8510 100644 --- a/src/app/components/Sidebar/index.tsx +++ b/src/app/components/Sidebar/index.tsx @@ -2,6 +2,8 @@ import { Divider, Link } from "@nextui-org/react"; import { usePathname, useRouter } from "next/navigation"; +import { useEffect, useRef, useState } from "react"; +import { BsChevronDoubleRight } from "react-icons/bs"; import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher"; import { SidebarItem } from "./item"; @@ -16,13 +18,102 @@ export const Sidebar = ({ }) => { const router = useRouter(); const pathName = usePathname(); + const sidebarRef = useRef(null); + + // State to manage menu openness + const [open, setOpen] = useState(false); + const [startX, setStartX] = useState(0); + const [isSwiping, setIsSwiping] = useState(false); + + // Effect to manage responsiveness + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 1024) { + setOpen(true); // Menu always open on larger screens + } else { + setOpen(false); // Menu closed by default on smaller screens + } + }; + + handleResize(); // Set initial state based on current window size + window.addEventListener("resize", handleResize); + + return () => window.removeEventListener("resize", handleResize); + }, []); + + // Effect to close the menu when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) { + setOpen(false); // Close the menu if clicked outside + } + }; + + document.addEventListener("click", handleClickOutside); + + // Cleanup the event listener when component unmounts + return () => { + document.removeEventListener("click", handleClickOutside); + }; + }, []); + + // Handle swipe start (touchstart event) + const handleTouchStart = (e: React.TouchEvent) => { + const touchStart = e.touches[0].clientX; + setStartX(touchStart); + setIsSwiping(true); + }; + + // Handle swipe move (touchmove event) + const handleTouchMove = (e: React.TouchEvent) => { + if (!isSwiping) return; + const touchMove = e.touches[0].clientX; + const distance = touchMove - startX; + + if (distance > 50 && !open) { + setOpen(true); // Open the menu if swiping right + } else if (distance < -50 && open) { + setOpen(false); // Close the menu if swiping left + } + }; + + // Handle swipe end (touchend event) + const handleTouchEnd = () => { + setIsSwiping(false); + }; return ( -