rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: make the menu responsive

Browse source
This commit is contained in:
swve 2024-10-16 00:53:03 +02:00
parent 19cc3ea0d7
commit 0f6b3c0000
1 changed files with 57 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

95
apps/web/components/Objects/Menu/Menu.tsx
View file

@ -14,54 +14,73 @@ export const Menu = (props: any) => {
const access_token = session?.data?.tokens?.access_token; const access_token = session?.data?.tokens?.access_token;
const [feedbackModal, setFeedbackModal] = React.useState(false) const [feedbackModal, setFeedbackModal] = React.useState(false)
const org = useOrg() as any; const org = useOrg() as any;
const [isMenuOpen, setIsMenuOpen] = React.useState(false)
function closeFeedbackModal() { function closeFeedbackModal() {
setFeedbackModal(false) setFeedbackModal(false)
} }
function toggleMenu() {
setIsMenuOpen(!isMenuOpen)
}
return ( return (
<> <>
<div className="backdrop-blur-lg h-[60px] blur-3xl -z-10" style={{}}> <div className="backdrop-blur-lg h-[60px] blur-3xl -z-10"></div>
<div className="backdrop-blur-lg bg-white/90 fixed top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
</div> <div className="flex items-center justify-between w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-16 h-full">
<div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50"> <div className="flex items-center space-x-5 md:w-auto w-full">
<div className="flex items-center space-x-5 w-full max-w-screen-2xl mx-auto px-16"> <div className="logo flex md:w-auto w-full justify-center">
<div className="logo flex "> <Link href={getUriWithOrg(orgslug, '/')}>
<Link href={getUriWithOrg(orgslug, '/')}> <div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center">
<div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center"> {org?.logo_image ? (
{org?.logo_image ? ( <img
<img src={`${getOrgLogoMediaDirectory(org.org_uuid, org?.logo_image)}`}
src={`${getOrgLogoMediaDirectory( alt="Learnhouse"
org.org_uuid, style={{ width: 'auto', height: '100%' }}
org?.logo_image className="rounded-md"
)}`} />
alt="Learnhouse" ) : (
style={{ width: 'auto', height: '100%' }} <LearnHouseLogo />
className="rounded-md" )}
/> </div>
) : ( </Link>
<LearnHouseLogo></LearnHouseLogo> </div>
)} <div className="hidden md:flex">
</div> <MenuLinks orgslug={orgslug} />
</Link> </div>
</div> </div>
<div className="links flex grow"> <div className="flex items-center space-x-4">
<div className="hidden md:flex">
<HeaderProfileBox />
</div>
<button
className="md:hidden text-gray-600 focus:outline-none"
onClick={toggleMenu}
>
{isMenuOpen ? (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
</button>
</div>
</div>
</div>
<div
className={`fixed inset-x-0 z-40 bg-white/80 backdrop-blur-lg md:hidden shadow-lg transition-all duration-300 ease-in-out ${
isMenuOpen ? 'top-[60px] opacity-100' : '-top-full opacity-0'
}`}
>
<div className="flex flex-col px-4 py-3 space-y-4 justify-center items-center">
<div className='py-4'>
<MenuLinks orgslug={orgslug} /> <MenuLinks orgslug={orgslug} />
</div> </div>
<div className="profile flex items-center"> <div className="border-t border-gray-200">
{/* <Modal
isDialogOpen={feedbackModal}
onOpenChange={setFeedbackModal}
minHeight="sm"
dialogContent={<FeedbackModal></FeedbackModal>}
dialogTitle="Feedback"
dialogDescription="An issue? A suggestion? a bug ? Let us know!"
dialogTrigger={
<div className="feedback cursor-pointer block items-center h-fit p-2 rounded-2xl bg-orange-800 hover:bg-orange-900 text-orange-300 shadow">
<MessageSquareIcon size={12} />
</div>
}
/> */}
<HeaderProfileBox /> <HeaderProfileBox />
</div> </div>
</div> </div>