add: top bar icons, menu styling

2025-07-04 17:55:00 +03:30
parent 904f98e202
commit 5d29e42176
12 changed files with 142 additions and 48 deletions
@@ -2,13 +2,13 @@ import React from 'react'

 type Props = {
    
-} & React.InputHTMLAttributes<HTMLInputElement>;
+} & React.InputHTMLAttributes<HTMLDivElement>;

 export default function NightModeSwitch({ checked, onClick }: Props) {
    return (
-        <input
+        <div
            onClick={onClick}
-            className={`visual-switch relative inline-flex justify-between px-1.5 h-6 w-11 items-center rounded-full transition-colors duration-300 ${checked ? "bg-green-500" : "bg-gray-300"
+            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"
                }`}
        >
            A
@@ -17,6 +17,6 @@ export default function NightModeSwitch({ checked, onClick }: Props) {
                    }`}
            />
            B
-        </input>
+        </div>
    )
 }
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const GridIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.6667 5.67992V2.65325C14.6667 1.71325 14.24 1.33325 13.18 1.33325H10.4867C9.42667 1.33325 9 1.71325 9 2.65325V5.67325C9 6.61992 9.42667 6.99325 10.4867 6.99325H13.18C14.24 6.99992 14.6667 6.61992 14.6667 5.67992Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.6667 13.18V10.4867C14.6667 9.42667 14.24 9 13.18 9H10.4867C9.42667 9 9 9.42667 9 10.4867V13.18C9 14.24 9.42667 14.6667 10.4867 14.6667H13.18C14.24 14.6667 14.6667 14.24 14.6667 13.18Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.00016 5.67992V2.65325C7.00016 1.71325 6.5735 1.33325 5.5135 1.33325H2.82016C1.76016 1.33325 1.3335 1.71325 1.3335 2.65325V5.67325C1.3335 6.61992 1.76016 6.99325 2.82016 6.99325H5.5135C6.5735 6.99992 7.00016 6.61992 7.00016 5.67992Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7.00016 13.18V10.4867C7.00016 9.42667 6.5735 9 5.5135 9H2.82016C1.76016 9 1.3335 9.42667 1.3335 10.4867V13.18C1.3335 14.24 1.76016 14.6667 2.82016 14.6667H5.5135C6.5735 14.6667 7.00016 14.24 7.00016 13.18Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default GridIcon;
@@ -13,14 +13,14 @@ const NotificationBellIcon = (props: Props) => (
  >
    <path
      d="M12.0196 2.9104C8.7096 2.9104 6.0196 5.6004 6.0196 8.9104V11.8004C6.0196 12.4104 5.7596 13.3404 5.4496 13.8604L4.2996 15.7704C3.5896 16.9504 4.0796 18.2604 5.3796 18.7004C9.6896 20.1404 14.3396 20.1404 18.6496 18.7004C19.8596 18.3004 20.3896 16.8704 19.7296 15.7704L18.5796 13.8604C18.2796 13.3404 18.0196 12.4104 18.0196 11.8004V8.9104C18.0196 5.6104 15.3196 2.9104 12.0196 2.9104Z"
-      stroke="#A8ABBF"
+      stroke="currentColor"
      strokeWidth="1.5"
      strokeMiterlimit="10"
      strokeLinecap="round"
    />
    <path
      d="M13.8704 3.19994C13.5604 3.10994 13.2404 3.03994 12.9104 2.99994C11.9504 2.87994 11.0304 2.94994 10.1704 3.19994C10.4604 2.45994 11.1804 1.93994 12.0204 1.93994C12.8604 1.93994 13.5804 2.45994 13.8704 3.19994Z"
-      stroke="#A8ABBF"
+      stroke="currentColor"
      strokeWidth="1.5"
      strokeMiterlimit="10"
      strokeLinecap="round"
@@ -28,7 +28,7 @@ const NotificationBellIcon = (props: Props) => (
    />
    <path
      d="M15.0205 19.0601C15.0205 20.7101 13.6705 22.0601 12.0205 22.0601C11.2005 22.0601 10.4405 21.7201 9.90051 21.1801C9.36051 20.6401 9.02051 19.8801 9.02051 19.0601"
-      stroke="#A8ABBF"
+      stroke="currentColor"
      strokeWidth="1.5"
      strokeMiterlimit="10"
    />
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const WalletIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.6668 8.00008V11.3334C14.6668 13.3334 13.3335 14.6667 11.3335 14.6667H4.66683C2.66683 14.6667 1.3335 13.3334 1.3335 11.3334V8.00008C1.3335 6.18675 2.42683 4.92008 4.12683 4.70675C4.30016 4.68008 4.48016 4.66675 4.66683 4.66675H11.3335C11.5068 4.66675 11.6735 4.67341 11.8335 4.70007C13.5535 4.90007 14.6668 6.17341 14.6668 8.00008Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.8341 4.69992C11.6741 4.67325 11.5074 4.66659 11.3341 4.66659H4.66744C4.48077 4.66659 4.30077 4.67992 4.12744 4.70659C4.22077 4.51992 4.35411 4.34659 4.51411 4.18659L6.68078 2.01325C7.59411 1.10659 9.07411 1.10659 9.98744 2.01325L11.1541 3.19326C11.5808 3.61326 11.8074 4.14658 11.8341 4.69992Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M14.6668 8.33325H12.6668C11.9335 8.33325 11.3335 8.93325 11.3335 9.66659C11.3335 10.3999 11.9335 10.9999 12.6668 10.9999H14.6668"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default WalletIcon;
@@ -15,6 +15,7 @@ import DirectboxReceiveIcon from '../icons/DirectboxReceiveIcon';
 import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
 import SettingIcon from '../icons/SettingsIcon';
 import ExitIcon from '../icons/ExitIcon';
+import NightModeSwitch from '../button/NightModeSwitch';

 type MenuItemType = {
    href: string | undefined;
@@ -66,9 +67,11 @@ const menuItems: Array<Array<MenuItemType>> = [
 type Props = {
    menuState: boolean,
    toggleMenuState: React.MouseEventHandler<HTMLDivElement> | undefined
+    nightModeState: boolean,
+    togglenightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
 }

-function Menu({ menuState, toggleMenuState }: Props) {
+function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
    const menuStateMemo = useMemo(() => menuState, [menuState]);

    return (
@@ -82,7 +85,7 @@ function Menu({ menuState, toggleMenuState }: Props) {
                    <li>
                        <div className='flex flex-col gap-[60px]'>
                            <div className='flex flex-col gap-[23px]'>
-                                <div className='pt-2 pr-10 text-menu-header'>منو</div>
+                                <div className='pt-2 text-start px-12 text-menu-header'>منو</div>
                                {menuItems[0].map((v, i) => {
                                    return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
                                })}
@@ -93,6 +96,7 @@ function Menu({ menuState, toggleMenuState }: Props) {
                        {menuItems[2].map((v, i) => {
                            return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
                        })}
+                            <MenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState}/></MenuItem>
                    </li>
                </ul>
            </div>
@@ -6,13 +6,14 @@ type Props = {
    title: string
 } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>

-export default function MenuItem({ href, title, icon, className, ...restProps }: Props) {
+export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) {
    return (
        <Link
            {...restProps}
            href={href}
-            className={`inline-flex gap-2 px-9 border-s-6 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6
-            data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}>
+            className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6
+                data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}>
+            {children}
            {icon}
            <div>{title}</div>
        </Link>
@@ -39,10 +39,11 @@ const BlurredOverlayContainer = ({
      data-visible={visible}
      data-loaded={loaded}
      className={`absolute inset-0 flex items-center justify-center
-        backdrop-blur-sm bg-black/${bgOpacity}
+        backdrop-blur-sm 
        opacity-0 transition-opacity duration-300 ease-in-out delay-${effectdelay}
        ${zClass}
        ${visible ? 'opacity-100' : 'opacity-0'}`}
+        style={{ backgroundColor: `rgba(0, 0, 0, ${+bgOpacity / 100})` }}
      {...props}
    >
      {children}
@@ -4,6 +4,10 @@
 import React from 'react'
 import NightModeSwitch from '../button/NightModeSwitch'
 import BurgerMenuIcon from '../icons/BurgerMenuIcon'
+import NotificationBellIcon from '../icons/NotificationBellIcon'
+import WalletIcon from '../icons/WalletIcon'
+import GridIcon from '../icons/GridIcon'
+import Image from 'next/image'

 type Props = {
    profileDropState: boolean,
@@ -19,45 +23,54 @@ type Props = {
 function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
    return (
        <div className="p-4">
-            <div className='bg-white overflow-hidden rounded-2xl 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='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:p-6 xl:gap-8 items-center'>
+                <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={`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
+                        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>
-            <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 className='flex justify-center'>
+                    <Image 
+                        width={73} 
+                        height={25} 
+                        alt='Profile avatar' 
+                        className='rounded-full' 
+                        src={'/assets/images/danak-logo.png'} />
                </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 className='flex items-center justify-end gap-3'>
+                    {/* <NightModeSwitch checked={nightMode} onClick={toggleNightMode} /> */}
+                    {/* <img className='hidden sm:block' src={rectangles} /> */}
+                    <GridIcon className='w-4 h-4 text-icon-active' />
+                    <WalletIcon className='w-4 h-4 text-icon-active' />
+                    <NotificationBellIcon className='w-4 h-4 text-icon-active' />
+                    <button className='flex items-center justify-between' onClick={toggleProfileDropState}>
+                        <Image 
+                        width={32} 
+                        height={32} 
+                        alt='Profile avatar' 
+                        className='rounded-full' 
+                        src={'/assets/images/user-avatar.png'} />
+                        <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>
-            {/* <Dropdown state={profileDrop} toggle={setProfileDrop} /> */}
-        </div>
        </div>
    )
 }
@@ -49,7 +49,9 @@ function ClientMenuRouteWrapper({ children }: Props) {
      </main>
      <aside>

-        <Menu menuState={menuState} toggleMenuState={toggleMenuState} />
+        <Menu 
+          nightModeState={nightMode} togglenightModeState={toggleNightMode}
+          menuState={menuState} toggleMenuState={toggleMenuState} />
      </aside>
      <footer>
        <BottomNavBar />