fix: night switch style
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user