diff --git a/public/assets/images/danak-logo.png b/public/assets/images/danak-logo.png new file mode 100644 index 0000000..e220053 Binary files /dev/null and b/public/assets/images/danak-logo.png differ diff --git a/public/assets/images/user-avatar.png b/public/assets/images/user-avatar.png new file mode 100644 index 0000000..726e8f5 Binary files /dev/null and b/public/assets/images/user-avatar.png differ diff --git a/src/app/globals.css b/src/app/globals.css index 3edc26d..3e86ccd 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -15,6 +15,7 @@ --color-disabled-text: #8C90A3; --color-menu-header: #C3C7DD; --color-icon-deactive: #A8ABBF; + --color-icon-active: #292D32; --radius-normal: 10px; --text-sm2: 13px; --text-xs2: 10px; diff --git a/src/components/button/NightModeSwitch.tsx b/src/components/button/NightModeSwitch.tsx index 093bb18..79f73d5 100644 --- a/src/components/button/NightModeSwitch.tsx +++ b/src/components/button/NightModeSwitch.tsx @@ -2,13 +2,13 @@ import React from 'react' type Props = { -} & React.InputHTMLAttributes; +} & React.InputHTMLAttributes; export default function NightModeSwitch({ checked, onClick }: Props) { return ( - A @@ -17,6 +17,6 @@ export default function NightModeSwitch({ checked, onClick }: Props) { }`} /> B - + ) } diff --git a/src/components/icons/GridIcon.tsx b/src/components/icons/GridIcon.tsx new file mode 100644 index 0000000..027a9aa --- /dev/null +++ b/src/components/icons/GridIcon.tsx @@ -0,0 +1,39 @@ +import React from 'react'; + +const GridIcon = (props: React.SVGProps) => ( + + + + + + +); + +export default GridIcon; diff --git a/src/components/icons/NotificationBellIcon.tsx b/src/components/icons/NotificationBellIcon.tsx index b5440c7..a046d40 100644 --- a/src/components/icons/NotificationBellIcon.tsx +++ b/src/components/icons/NotificationBellIcon.tsx @@ -13,14 +13,14 @@ const NotificationBellIcon = (props: Props) => ( > ( /> diff --git a/src/components/icons/WalletIcon.tsx b/src/components/icons/WalletIcon.tsx new file mode 100644 index 0000000..1caf08e --- /dev/null +++ b/src/components/icons/WalletIcon.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +const WalletIcon = (props: React.SVGProps) => ( + + + + + +); + +export default WalletIcon; diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 25d0854..3e6ece3 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -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> = [ type Props = { menuState: boolean, toggleMenuState: React.MouseEventHandler | undefined + nightModeState: boolean, + togglenightModeState: React.MouseEventHandler | 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) {
  • -
    منو
    +
    منو
    {menuItems[0].map((v, i) => { return })} @@ -93,6 +96,7 @@ function Menu({ menuState, toggleMenuState }: Props) { {menuItems[2].map((v, i) => { return })} + }>
    • diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx index c421a06..52e1f73 100644 --- a/src/components/menu/MenuItem.tsx +++ b/src/components/menu/MenuItem.tsx @@ -6,13 +6,14 @@ type Props = { title: string } & LinkProps & React.AnchorHTMLAttributes -export default function MenuItem({ href, title, icon, className, ...restProps }: Props) { +export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) { return ( + 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}
    {title}
    diff --git a/src/components/overlays/BlurredOverlayContainer.tsx b/src/components/overlays/BlurredOverlayContainer.tsx index 8228287..173ea0a 100644 --- a/src/components/overlays/BlurredOverlayContainer.tsx +++ b/src/components/overlays/BlurredOverlayContainer.tsx @@ -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} diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx index 2360167..6a51fa6 100644 --- a/src/components/topbar/TopBar.tsx +++ b/src/components/topbar/TopBar.tsx @@ -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 (
    -
    -
    - -
    - S -
    -
    +
    +
    + + {/*
    + S +
    */}
    -
    -
    - 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'}`}> +
    +
    +
    + X +
    -
    -
    - {/* */} - {/* */} -
    -
    - ۲,۰۰۰,۰۰۰ تومان -
    - {/* */} +
    + Profile avatar
    - {/* */} - +
    + {/* */} + {/* */} + + + + +
    + {/* */}
    - {/* */} -
    ) } diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx index 510b658..38fa134 100644 --- a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx +++ b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx @@ -49,7 +49,9 @@ function ClientMenuRouteWrapper({ children }: Props) {