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/app/[name]/(Main)/layout.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx";
import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper";
import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
export const metadata = {
src/components/icons/TelegramIcon.tsx
+3 -2
View File
@@ -6,19 +6,20 @@ const TelegramIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
height="24"
viewBox="0 0 24 24"
fill="none"
stroke='currentcolor'
xmlns="http://www.w3.org/2000/svg"
{...props} // This allows passing additional props like className, style, etc.
>
<path
d="M16.1502 12.8299L14.4202 13.4099C13.9402 13.5699 13.5702 13.9399 13.4102 14.4199L12.8302 16.1499C12.3402 17.6399 10.2402 17.6099 9.78018 16.1199L7.83019 9.83988C7.45019 8.58988 8.60019 7.43989 9.83019 7.81989L16.1202 9.76987C17.6102 10.2399 17.6302 12.3399 16.1502 12.8299Z"
stroke="#333333"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
stroke="#333333"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
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">
src/components/menu/SideMenuItem.tsx
+2 -1
View File
@@ -17,12 +17,13 @@ export default function SideMenuItem({ href, title, icon, className, children, .
inline-flex gap-3 ps-6 xl:ps-9 h-full w-full items-center overflow-hidden text-nowrap
text-xs font-light text-disabled-text border-transparent
data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black
dark:data-[active]:border-foreground dark:data-[active]:text-foreground
${className}
`}
>
{children}
<span className="flex-shrink-0">{icon}</span>
<span>{title}</span>
<span className='mt-0.5'>{title}</span>
</Link>
)
}
src/components/utils/Modal.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ function Modal({ visible, onClick, children, ...rest }: Props) {
<motion.div
animate={{ y: visible ? [10, 0] : [0, 10] }}
transition={{ duration: 0.1, ease: 'easeInOut' }}
className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-white/63 rounded-4xl"
className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-container/63 dark:bg-container/93 rounded-4xl"
>
{children}
</motion.div>
src/components/utils/Prompt.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ function Prompt({ title, description, textConfirm, textCancel, onConfirm, onCanc
<Button onClick={onConfirm} className="text-sm h-11 font-normal cursor-pointer">
{textConfirm ?? t('ButtonOk')}
</Button>
<Button onClick={onCancel} className="bg-disabled! h-11 cursor-pointer text-disabled2! active:brightness-95 hover:brightness-105 text-sm font-normal">
<Button onClick={onCancel} className="bg-disabled! h-11 cursor-pointer text-disabled2! dark:text-disabled-text! active:brightness-95 hover:brightness-105 text-sm font-normal">
{textCancel ?? t('ButtonCancel')}
</Button>
</div>