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

chore: change a few styles

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-11 22:18:36 +03:30
parent 09bfd832d4
commit 9a551f1518
6 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/listview/MenuItem.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
className="inline-flex w-full justify-center items-center gap-2" className="inline-flex w-full justify-center items-center gap-2"
> >
<PlusIcon /> <PlusIcon />
<div className="text-sm2 pt-0.5 font-semibold">افزودن</div> <div className="text-sm2 pt-0.5 font-medium">افزودن</div>
</button> </button>
) : ( ) : (
<> <>
src/components/menu/Menu.tsx → src/components/menu/SideMenu.tsx
+18 -18
View File
@@ -1,8 +1,8 @@
'use client'; 'use client';
import React, { useMemo } from 'react' import React, { useMemo } from 'react'
import MenuItemType from './MenuItem' import MenuItemType from './SideMenuItem'
import MenuItem from './MenuItem'; import SideMenuItem from './SideMenuItem';
import NotificationBellIcon from '../icons/NotificationBellIcon'; import NotificationBellIcon from '../icons/NotificationBellIcon';
import CupIcon from '../icons/CupIcon'; import CupIcon from '../icons/CupIcon';
import TicketDiscountIcon from '../icons/TickerDiscountIcon'; import TicketDiscountIcon from '../icons/TickerDiscountIcon';
@@ -26,40 +26,40 @@ type MenuItemType = {
const menuItems: Array<Array<MenuItemType>> = [ const menuItems: Array<Array<MenuItemType>> = [
[ [
{ {
href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon className='text-icon-deactive' /> href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'my-services', title: 'سرویس های من', icon: <CupIcon className='text-icon-deactive' /> href: 'my-services', title: 'سرویس های من', icon: <CupIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon className='text-icon-deactive' /> href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon className='text-icon-deactive' /> href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon className='text-icon-deactive' /> href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon className='text-icon-deactive' /> href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon className='text-icon-deactive' /> href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon className='text-icon-deactive' /> href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon className='text-icon-deactive' /> href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} className='text-icon-deactive' />
}, },
], ],
[], [],
[ [
{ {
href: undefined, title: 'تنظیمات', icon: <SettingIcon className='text-icon-deactive' /> href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
}, },
{ {
href: undefined, title: 'خروج', icon: <ExitIcon className='text-icon-deactive' /> href: undefined, title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
}, },
] ]
] ]
@@ -71,7 +71,7 @@ type Props = {
togglenightModeState: React.MouseEventHandler<HTMLDivElement> | undefined togglenightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
} }
function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) { function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
const menuStateMemo = useMemo(() => menuState, [menuState]); const menuStateMemo = useMemo(() => menuState, [menuState]);
return ( return (
@@ -87,16 +87,16 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
<div className='flex flex-col gap-[23px]'> <div className='flex flex-col gap-[23px]'>
<div className='pt-2 text-start px-12 text-menu-header'>منو</div> <div className='pt-2 text-start px-12 text-menu-header'>منو</div>
{menuItems[0].map((v, i) => { {menuItems[0].map((v, i) => {
return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} /> return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
})} })}
</div> </div>
</div> </div>
</li> </li>
<li className='flex flex-col gap-6 pt-16'> <li className='flex flex-col gap-6 pt-16'>
{menuItems[2].map((v, i) => { {menuItems[2].map((v, i) => {
return <MenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} /> return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
})} })}
<MenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></MenuItem> <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
</li> </li>
</ul> </ul>
</div> </div>
@@ -105,4 +105,4 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
) )
} }
export default Menu; export default SideMenu;
src/components/menu/MenuItem.tsx → src/components/menu/SideMenuItem.tsx
+2 -2
View File
@@ -6,12 +6,12 @@ type Props = {
title: string title: string
} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement> } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
export default function MenuItem({ href, title, icon, className, children, ...restProps }: Props) { export default function SideMenuItem({ href, title, icon, className, children, ...restProps }: Props) {
return ( return (
<Link <Link
{...restProps} {...restProps}
href={href} href={href}
className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-xs items-center font-light text-nowrap overflow-hidden h-6 className={`inline-flex gap-2 ps-8 border-transparent text-disabled-text text-[0.7rem] items-center font-light text-nowrap overflow-hidden h-6
data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}> data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black ${className}`}>
{children} {children}
{icon} {icon}
src/components/navigation/BottomNavBar.tsx
+7 -5
View File
@@ -36,18 +36,20 @@ function BottomNavBar() {
<div <div
className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end" className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
> >
<BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" /> <BottomNavLink href={`/${name}/orders`} icon={<BagIcon width={20} height={20} />} value="سبد خرید" />
<BottomNavLink href={`/${name}/pager`} icon={<PagerIcon />} value="پیجر" /> <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value="پیجر" />
<BottomNavHighlightLink <BottomNavHighlightLink
href={`/${name}`} href={`/${name}`}
icon={ icon={
<HomeIcon className='transition-all duration-200' <HomeIcon className='transition-all duration-200'
fill={isHomeRoute ? 'white' : 'transparent'} fill={isHomeRoute ? 'white' : 'transparent'}
stroke={isHomeRoute ? 'black' : 'white'} stroke={isHomeRoute ? 'black' : 'white'}
strokeWidth={1} />} strokeWidth={1}
width={20}
height={20} />}
value="منو" /> value="منو" />
<BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon />} value="اعلان ها" /> <BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value="اعلان ها" />
<BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" /> <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value="پسند ها" />
</div> </div>
</foreignObject> </foreignObject>
src/components/navigation/BottomNavLinkBig.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
restProps.className ?? '', restProps.className ?? '',
)}> )}>
<div className={clsx( <div className={clsx(
'bg-primary text-white p-3 rounded-full', 'bg-primary text-white p-3.5 rounded-full',
)}> )}>
{icon} {icon}
</div> </div>
src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import TopBar from '../topbar/TopBar' import TopBar from '../topbar/TopBar'
import Menu from '../menu/Menu' import SideMenu from '../menu/SideMenu'
import BottomNavBar from '../navigation/BottomNavBar' import BottomNavBar from '../navigation/BottomNavBar'
type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap> type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
@@ -49,7 +49,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
</main> </main>
<aside> <aside>
<Menu <SideMenu
nightModeState={nightMode} togglenightModeState={toggleNightMode} nightModeState={nightMode} togglenightModeState={toggleNightMode}
menuState={menuState} toggleMenuState={toggleMenuState} /> menuState={menuState} toggleMenuState={toggleMenuState} />
</aside> </aside>