danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 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"
>
<PlusIcon />
<div className="text-sm2 pt-0.5 font-semibold">افزودن</div>
<div className="text-sm2 pt-0.5 font-medium">افزودن</div>
</button>
) : (
<>
src/components/menu/Menu.tsx → src/components/menu/SideMenu.tsx
+18 -18
View File
@@ -1,8 +1,8 @@
'use client';
import React, { useMemo } from 'react'
import MenuItemType from './MenuItem'
import MenuItem from './MenuItem';
import MenuItemType from './SideMenuItem'
import SideMenuItem from './SideMenuItem';
import NotificationBellIcon from '../icons/NotificationBellIcon';
import CupIcon from '../icons/CupIcon';
import TicketDiscountIcon from '../icons/TickerDiscountIcon';
@@ -26,40 +26,40 @@ type 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
}
function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
const menuStateMemo = useMemo(() => menuState, [menuState]);
return (
@@ -87,16 +87,16 @@ function Menu({ menuState, toggleMenuState, nightModeState, togglenightModeState
<div className='flex flex-col gap-[23px]'>
<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} />
return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
})}
</div>
</div>
</li>
<li className='flex flex-col gap-6 pt-16'>
{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>
</ul>
</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
} & 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 (
<Link
{...restProps}
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}`}>
{children}
{icon}
src/components/navigation/BottomNavBar.tsx
+7 -5
View File
@@ -36,18 +36,20 @@ function BottomNavBar() {
<div
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}/pager`} icon={<PagerIcon />} value="پیجر" />
<BottomNavLink href={`/${name}/orders`} icon={<BagIcon width={20} height={20} />} value="سبد خرید" />
<BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value="پیجر" />
<BottomNavHighlightLink
href={`/${name}`}
icon={
<HomeIcon className='transition-all duration-200'
fill={isHomeRoute ? 'white' : 'transparent'}
stroke={isHomeRoute ? 'black' : 'white'}
strokeWidth={1} />}
strokeWidth={1}
width={20}
height={20} />}
value="منو" />
<BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon />} value="اعلان ها" />
<BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
<BottomNavLink href={`/${name}/notifications`} icon={<NotifiBoardIcon width={20} height={20} />} value="اعلان ها" />
<BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value="پسند ها" />
</div>
</foreignObject>
src/components/navigation/BottomNavLinkBig.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
restProps.className ?? '',
)}>
<div className={clsx(
'bg-primary text-white p-3 rounded-full',
'bg-primary text-white p-3.5 rounded-full',
)}>
{icon}
</div>
src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import React, { useState } from 'react'
import TopBar from '../topbar/TopBar'
import Menu from '../menu/Menu'
import SideMenu from '../menu/SideMenu'
import BottomNavBar from '../navigation/BottomNavBar'
type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
@@ -49,7 +49,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
</main>
<aside>
<Menu
<SideMenu
nightModeState={nightMode} togglenightModeState={toggleNightMode}
menuState={menuState} toggleMenuState={toggleMenuState} />
</aside>