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
+23 -7
View File
@@ -1,24 +1,40 @@
'use client';
import { Moon, Sun1 } from 'iconsax-react';
import React from 'react'
type Props = {
} & React.InputHTMLAttributes<HTMLDivElement>;
export default function NightModeSwitch({ checked, onClick }: Props) {
return (
<div
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
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>
)
}
+5 -1
View File
@@ -156,7 +156,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
)
})}
<li className="mt-4 h-6">
<SideMenuItem href={''} title={''} icon={<></>}>
<SideMenuItem
className='pr-7'
href={''}
title={''}
icon={<></>}>
<NightModeSwitch checked={nightModeState} onClick={togglenightModeState} />
</SideMenuItem>
</li>