danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: top bar icons, menu styling

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-04 17:55:00 +03:30
parent 904f98e202
commit 5d29e42176
12 changed files with 142 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/topbar/TopBar.tsx
+47 -34
View File
@@ -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>
)
}