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

add: side menu dark theme

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-12 19:48:08 +03:30
parent d11cd474ab
commit 7b0aec8d84
6 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menu/SideMenu.tsx
+11 -11
View File
@@ -99,7 +99,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
return (
<li key={index} className="mt-4 h-6">
<SideMenuItem
className={clsx(isActive && 'text-primary! border-primary!', 'border-r-4!')}
className={clsx(isActive && 'text-primary! border-primary! dark:text-neutral-200! dark:border-neutral-200!', 'border-r-4!')}
href={href ?? ''}
title={tMenu(item.title)}
onClick={
@@ -111,7 +111,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<Icon
variant={isActive ? 'Bold' : 'Linear'}
className={clsx(
isActive ? 'text-primary fill-primary ' : 'stroke-icon-deactive text-icon-deactive'
isActive ? 'text-primary fill-primary dark:text-neutral-200 dark:fill-neutral-200' : 'stroke-icon-deactive text-icon-deactive'
)}
size={20} width={20} height={20} />
}
@@ -134,7 +134,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<li key={index} className="mt-4 h-6 w-full">
<SideMenuItem
key={index}
href={item.href ?? ''}
href={href ?? ''}
className={clsx(isActive && 'text-primary! border-primary!', 'border-r-4!')}
onClick={
typeof item.href === 'string'
@@ -186,13 +186,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
data-visible={menuState}
data-isvisible={menuStateMemo}
onClick={(e) => { e.stopPropagation(); }}
className="fixed top-0 bottom-0 right-0 bg-white w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:!rounded-s-none"
className="fixed top-0 bottom-0 right-0 bg-container w-[200px] h-dvh flex flex-col z-40 overflow-clip not-xl:!rounded-s-none"
>
{renderMenu()}
</motion.nav>
</BlurredOverlayContainer>
<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"
className="hidden fixed top-4 bottom-4 right-4 bg-container xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
>
{renderMenu()}
</nav>
@@ -211,7 +211,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
onClick={toggleShareModal}
>
<h2 className="text-base font-medium">
<Share className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />
<Share className="inline-block ml-2 mb-1.5 stroke-primary dark:stroke-foreground" size={24} />
{tShareModal('Heading')}
</h2>
<p className="text-xs font-medium mt-6">
@@ -219,21 +219,21 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
</p>
<Button onClick={() => { }} className="text-sm mt-8">
<DocumentCopy className="inline-block ml-2 mb-0.5 stroke-white" size={20} />
<DocumentCopy className="inline-block ml-2 mb-0.5 stroke-container dark:stroke-foreground" size={20} />
<span className="font-light">{tShareModal('ButtonCopy')}</span>
</Button>
<div className="grid grid-cols-3 gap-5.5 mt-6 px-12">
<div className="place-items-center">
<TelegramIcon width={24} height={24} className="mb-1.5 stroke-primary" />
<TelegramIcon width={24} height={24} className="mb-1.5 text-primary dark:text-foreground" />
<span className='text-xs2 font-medium'>Telegram</span>
</div>
<div className="place-items-center">
<Whatsapp size={24} className="mb-1.5 stroke-primary" />
<Whatsapp size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
<span className='text-xs2 font-medium'>WhatsApp</span>
</div>
<div className="place-items-center">
<Instagram size={24} className="mb-1.5 stroke-primary" />
<Instagram size={24} className="mb-1.5 stroke-primary dark:stroke-foreground" />
<span className='text-xs2 font-medium'>Instagram</span>
</div>
</div>
@@ -245,7 +245,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
onClick={toggleInstallPwaModal}
>
<h2 className="text-base font-medium">
<DirectInbox className="inline-block ml-2 mb-1.5 stroke-primary" size={24} />
<DirectInbox className="inline-block ml-2 mb-1.5 stroke-primary dark:stroke-foreground" size={24} />
{tInstallPwaModal('Heading')}
</h2>
<p className="text-xs font-medium mt-6">