add: side menu transition

2025-07-04 16:50:55 +03:30
parent 424373bc3f
commit 43cf76bec2
9 changed files with 255 additions and 56 deletions
@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+'use client'
+
+import React from 'react'
+import NightModeSwitch from '../button/NightModeSwitch'
+import BurgerMenuIcon from '../icons/BurgerMenuIcon'
+
+type Props = {
+    profileDropState: boolean,
+    toggleProfileDropState: React.MouseEventHandler<HTMLButtonElement> | undefined
+    menuState: boolean,
+    toggleMenuState: React.MouseEventHandler<HTMLButtonElement> | undefined
+    searchModalState: boolean,
+    toggleSearchModalState: React.MouseEventHandler<HTMLDivElement> | undefined
+    nightModeState: boolean,
+    toggleNightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
+}
+
+function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
+    return (
+        <div className="p-4">
+            <div className='bg-white rounded-[15px] w-full h-12 lg:h-24 px-4 sm:p-6 xl:gap-8 items-center flex justify-between overflow-auto'>
+            <div className='inline-flex justify-between items-center'>
+                <button className='inline-block xl:hidden' onClick={toggleMenuState}>
+                    <BurgerMenuIcon />
+                </button>
+                <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >
+                    S
+                </div>
+                <div
+                    className={`z-50 top-0 left-0 w-full h-full px-5 py-15 md:px-15 xl:p-0 fixed xl:relative bg-[#00000044] xl:bg-transparent backdrop-blur-sm xl:backdrop-blur-none justify-center xl:block ${searchModalState ? 'flex' : 'hidden'}`}>
+                    <div
+                        className={`w-full h-full absolute`}
+                        onClick={toggleSearchModalState}>
+                    </div>
+                    <div className='z-55 bg-white w-full md:w-min xl:bg-transparent p-5 xl:p-0 items-center flex xl:block rounded-lg h-max'>
+                        X
+                    </div>
+                </div>
+            </div>
+            <div className='flex items-center justify-between gap-6'>
+                {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
+                {/* <img className='hidden sm:block' src={rectangles} /> */}
+                <div className='bg-[#EEF0F7] items-center inline-flex min-w-fit p-0.5 rounded-xl'>
+                    <div className='text-[12px] px-2.5 text-nowrap hidden xl:block'>
+                        ۲,۰۰۰,۰۰۰ تومان
+                    </div>
+                    {/* <img className='bg-white rounded-[11px]' src={wallet} /> */}
+                </div>
+                {/* <img src={bell} /> */}
+                <button className='flex items-center justify-between' onClick={toggleProfileDropState}>
+                    {/* <img className='rounded-full min-w-8 w-8' src={avatar} /> */}
+                    <div className='pe-6 hidden xl:inline-flex' >
+                        <div className='ps-2 pe-1 text-xs text-nowrap'>مهرداد مظفری</div>
+                        {/* <img src={arrow} /> */}
+                    </div>
+                </button>
+            </div>
+            {/* <Dropdown state={profileDrop} toggle={setProfileDrop} /> */}
+        </div>
+        </div>
+    )
+}
+
+export default TopBar;