fix: styling updates

This commit is contained in:
Mythie
2023-08-21 19:56:18 +10:00
parent 2f2d5dfc0b
commit 6d360e581d
5 changed files with 98 additions and 157 deletions

View File

@ -1,34 +1,18 @@
'use client';
import { useEffect } from 'react';
import { Menu, X } from 'lucide-react';
import { Button } from '@documenso/ui/primitives/button';
import { useWindowSize } from '~/hooks/use-window-size';
export interface HamburgerMenuProps {
isMenuOpen: boolean;
menuToggle: () => void;
onToggleMenuOpen?: () => void;
}
export const HamburgerMenu = ({ isMenuOpen, menuToggle }: HamburgerMenuProps) => {
const { width } = useWindowSize();
useEffect(() => {
// Update document.body.style.overflow based on the menu state
// If the window width is less than 768px, we want to prevent scrolling when the menu is open
if (width < 768 && isMenuOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}, [isMenuOpen, width]);
export const HamburgerMenu = ({ isMenuOpen, onToggleMenuOpen }: HamburgerMenuProps) => {
return (
<div className="flex md:hidden">
<Button variant="default" className="z-20 w-10 p-0" onClick={menuToggle}>
<Button variant="outline" className="z-20 w-10 p-0" onClick={onToggleMenuOpen}>
{isMenuOpen ? <X /> : <Menu />}
</Button>
</div>