fix: night switch style

This commit is contained in:
Mahyar Khanbolooki
2025-08-12 16:51:25 +03:30
parent 18ac033cde
commit c5efa495a2
2 changed files with 28 additions and 8 deletions
+22 -6
View File
@@ -1,5 +1,6 @@
'use client'; 'use client';
import { Moon, Sun1 } from 'iconsax-react';
import React from 'react' import React from 'react'
type Props = { type Props = {
@@ -10,15 +11,30 @@ export default function NightModeSwitch({ checked, onClick }: Props) {
return ( return (
<div <div
onClick={onClick} onClick={onClick}
className={`visual-switch relative inline-flex justify-between px-1.5 h-6 w-10.5 items-center rounded-full transition-colors duration-300 ${checked ? "bg-gray-800" : "bg-gray-300" data-nightmode={checked}
}`} className={
`visual-switch relative inline-flex justify-between
px-1.5 h-6 w-10.5 items-center rounded-full transition-colors
duration-300 bg-gray-300 data-[nightmode=true]:bg-gray-800
`}
> >
A
<span <span
className={`absolute inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300 ${checked ? "translate-x-1" : "-translate-x-3.5" data-nightmode={checked}
}`} className={`
absolute inline-block h-5 w-5 transform rounded-full
transition-transform duration-300
bg-white data-[nightmode=true]:bg-gray-600
-translate-x-3.5 data-[nightmode=true]:translate-x-1
`}
/> />
B <Moon
data-nightmode={checked}
size={12}
className='stroke-primary z-0 data-[nightmode=true]:stroke-white' />
<Sun1
data-nightmode={checked}
size={12}
className='stroke-[#FFA800] z-0' />
</div> </div>
) )
} }
+5 -1
View File
@@ -156,7 +156,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
) )
})} })}
<li className="mt-4 h-6"> <li className="mt-4 h-6">
<SideMenuItem href={''} title={''} icon={<></>}> <SideMenuItem
className='pr-7'
href={''}
title={''}
icon={<></>}>
<NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /> <NightModeSwitch checked={nightModeState} onClick={togglenightModeState} />
</SideMenuItem> </SideMenuItem>
</li> </li>