matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: sidebar menu backdrop blur

Browse Source 
Signed-off-by: mkljczk <git@mkljczk.pl>
This commit is contained in:
mkljczk
2025-02-02 20:33:26 +01:00
parent 7b34cc6527
commit cc5de29194
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/pl-fe/src/components/sidebar-menu.tsx
View File

@ -62,7 +62,7 @@ interface ISidebarLink {
const SidebarLink: React.FC<ISidebarLink> = React.memo(({ href, to, icon, text, onClick }) => {
const body = (
<HStack space={2} alignItems='center'>
<div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
<div className='relative inline-flex rounded-md bg-primary-100 p-2 dark:bg-gray-800'>
<Icon src={icon} className='size-5 text-primary-500' />
</div>
@ -189,7 +189,7 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
<div
className={clsx('fixed inset-0 cursor-default bg-gray-500 black:bg-gray-900 no-reduce-motion:transition-opacity dark:bg-gray-700', {
'no-reduce-motion:opacity-0': !(sidebarVisible && isSidebarOpen),
'opacity-40': (sidebarVisible && isSidebarOpen),
'opacity-20': (sidebarVisible && isSidebarOpen),
})}
role='button'
onClick={handleClose}
@ -197,7 +197,7 @@ const SidebarMenu: React.FC = React.memo((): JSX.Element | null => {
<div
className={
clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white shadow-lg ease-in-out black:bg-black no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
clsx('fixed bottom-[60px] left-2 z-[1000] flex max-h-[calc(100dvh-68px)] w-full max-w-xs flex-1 origin-bottom-left flex-col overflow-hidden rounded-xl bg-white/90 shadow-lg backdrop-blur-md ease-in-out black:bg-black/90 no-reduce-motion:transition-transform dark:border dark:border-gray-800 dark:bg-primary-900/90 dark:shadow-none rtl:right-2 rtl:origin-bottom-right', {
'scale-100': sidebarVisible && isSidebarOpen,
'no-reduce-motion:scale-0': !(sidebarVisible && isSidebarOpen),
})