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

chore: restyle topbar and side menu based on dmail

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-02 23:11:19 +03:30
parent 9a39c84116
commit 97307090ab
5 changed files with 104 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/topbar/TopBar.tsx
+11 -9
View File
@@ -8,6 +8,7 @@ import NotificationBellIcon from '../icons/NotificationBellIcon'
import WalletIcon from '../icons/WalletIcon'
import GridIcon from '../icons/GridIcon'
import Image from 'next/image'
import { ArrowDown2 } from 'iconsax-react'
type Props = {
profileDropState: boolean,
@@ -22,10 +23,10 @@ type Props = {
function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
return (
<div className="fixed top-0 left-0 w-full p-4 pb-0 z-40">
<div className='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:px-6 xl:gap-8 items-center'>
<div className="w-full">
<div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
<div className='inline-flex justify-between items-center'>
<button className='inline-block' onClick={toggleMenuState}>
<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' >
@@ -53,18 +54,19 @@ function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMen
<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' />
<GridIcon className='size-4.5 text-icon-active' />
<WalletIcon className='size-4.5 text-icon-active' />
<NotificationBellIcon className='size-4.5 text-icon-active' />
<button className='flex items-center justify-between' onClick={toggleProfileDropState}>
<Image
width={32}
height={32}
width={24}
height={24}
alt='Profile avatar'
className='rounded-full'
src={'/assets/images/user-avatar.png'} />
<div className='pe-6 hidden xl:inline-flex' >
<div className='pe-0 hidden xl:inline-flex items-end' >
<div className='ps-2 pe-1 text-xs text-nowrap'>مهرداد مظفری</div>
<ArrowDown2 className='stroke-disabled-text' size={14} />
{/* <img src={arrow} /> */}
</div>
</button>