danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: side menu responsive style

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-10 15:12:55 +03:30
parent 21ba415a4e
commit 29363c1a15
5 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menu/SideMenu.tsx
+7 -5
View File
@@ -28,7 +28,7 @@ const menuItems: Array<Array<MenuItemType>> = [
{ href: 'services', title: 'Discounts', icon: TicketDiscount },
{ href: 'order/history', title: 'Orders', icon: CalendarSearch },
{ href: 'transactions', title: 'Transactions', icon: Receipt1 },
{ href: '/', title: 'Games', icon: Game },
{ href: 'game', title: 'Games', icon: Game },
{ href: '?share', title: 'ShareWithFriends', icon: Like1 },
{ href: 'report', title: 'ReportProblem', icon: NoteBoardIcon },
{ href: 'invoices', title: 'InstallApp', icon: DirectboxReceive }
@@ -108,7 +108,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
return (
<section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
<div className=''>
<header className="px-12 pt-6 mt-3 md:px-6 xl:px-12">
<header className="px-8 pt-6 mt-3 md:px-6 xl:px-12">
<h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px]">منو</h6>
</header>
@@ -193,7 +193,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<>
<div className='w-full' ref={closeRef} onClick={toggleMenuState}>
<aside aria-label={tMenu('AriaLabel')}>
<BlurredOverlayContainer className='md:hidden!' bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
<BlurredOverlayContainer className='xl:hidden!' bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
<motion.nav
drag='x'
dragConstraints={{ left: 0, right: 20 }}
@@ -212,9 +212,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
{renderMenu()}
</motion.nav>
</BlurredOverlayContainer>
<div className="hidden fixed top-4 bottom-4 right-4 bg-white xl:w-[250px] md:flex flex-col z-40 overflow-clip md:rounded-4xl">
<nav
className="hidden fixed top-4 bottom-4 right-4 bg-white xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
>
{renderMenu()}
</div>
</nav>
</aside>
</div>