Mahyar Khanbolooki
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react'
|
|
import TopBar from '../topbar/TopBar'
|
|
import SideMenu from '../menu/SideMenu'
|
|
import BottomNavBar from '../navigation/BottomNavBar'
|
|
|
|
type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
|
|
|
|
function ClientMenuRouteWrapper({ children }: Props) {
|
|
const [profileDrop, setProfileDrop] = useState(false);
|
|
const [nightMode, setNightMode] = useState(false);
|
|
const [menuState, setMenuState] = useState(false);
|
|
const [searchModal, setSearchModal] = useState(false);
|
|
|
|
const toggleProfileDrop = () => {
|
|
setProfileDrop((state) => !state);
|
|
}
|
|
|
|
const toggleNightMode = () => {
|
|
setNightMode((state) => !state);
|
|
}
|
|
|
|
const toggleMenuState = () => {
|
|
setMenuState((state) => !state);
|
|
}
|
|
|
|
const toggleSearchModal = () => {
|
|
setSearchModal((state) => !state);
|
|
}
|
|
|
|
// const location = useRouter();
|
|
|
|
// useEffect(() => {
|
|
// setMenuState(false)
|
|
// }, [location])
|
|
|
|
return (
|
|
<div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
|
|
|
|
<div className="z-50 fixed right-4 left-4 md:right-[188px] xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]">
|
|
<TopBar
|
|
profileDropState={profileDrop}
|
|
toggleProfileDropState={toggleProfileDrop}
|
|
menuState={menuState}
|
|
toggleMenuState={toggleMenuState}
|
|
searchModalState={searchModal}
|
|
toggleSearchModalState={toggleSearchModal}
|
|
nightModeState={nightMode}
|
|
toggleNightModeState={toggleNightMode}
|
|
/>
|
|
</div>
|
|
|
|
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 px-4">
|
|
<BottomNavBar />
|
|
</div>
|
|
|
|
|
|
<SideMenu
|
|
nightModeState={nightMode}
|
|
togglenightModeState={toggleNightMode}
|
|
menuState={menuState}
|
|
toggleMenuState={toggleMenuState}
|
|
/>
|
|
|
|
|
|
<main
|
|
className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full md:w-[calc(100%-175px)] xl:w-[calc(100%-285px)] md:self-end"
|
|
>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
|
|
)
|
|
}
|
|
|
|
export default ClientMenuRouteWrapper |