fix(web): remove the mobile bottom navigation bar
The fixed bottom tab bar (MobileTabBar) was rendered app-wide on screens <768px, duplicating navigation that already exists in the header/hamburger menus. - unmount <MobileTabBar /> in App.tsx and drop its import - delete components/layout/MobileTabBar.tsx (no remaining references) - drop the max-md:pb-24 clearance in PageLayout (Header.tsx) that only existed to keep page content above the removed fixed bar Desktop and header-menu navigation are unaffected; mobile pages keep a full-height viewport without dead bottom padding.
This commit is contained in:
@@ -1,7 +1,6 @@
|
|||||||
import { lazy, Suspense } from "react";
|
import { lazy, Suspense } from "react";
|
||||||
import { Navigate, Route, Routes } from "react-router-dom";
|
import { Navigate, Route, Routes } from "react-router-dom";
|
||||||
import { useAuthStore } from "./store/auth";
|
import { useAuthStore } from "./store/auth";
|
||||||
import { MobileTabBar } from "./components/layout/MobileTabBar";
|
|
||||||
import { ErrorBoundary } from "./components/ErrorBoundary";
|
import { ErrorBoundary } from "./components/ErrorBoundary";
|
||||||
|
|
||||||
// هر صفحه با React.lazy لود میشود (code splitting)
|
// هر صفحه با React.lazy لود میشود (code splitting)
|
||||||
@@ -197,7 +196,6 @@ export default function App() {
|
|||||||
<Route path="*" element={<Navigate to="/" replace />} />
|
<Route path="*" element={<Navigate to="/" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
<MobileTabBar />
|
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -64,6 +64,6 @@ export function PageLayout({
|
|||||||
className?: string;
|
className?: string;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4 max-md:pb-24", className)}>{children}</div>
|
<div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4", className)}>{children}</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,100 +0,0 @@
|
|||||||
import { NavLink, useLocation } from "react-router-dom";
|
|
||||||
import {
|
|
||||||
ArrowLeftRight,
|
|
||||||
Boxes,
|
|
||||||
Building2,
|
|
||||||
CalendarDays,
|
|
||||||
LayoutDashboard,
|
|
||||||
PackageSearch,
|
|
||||||
Scale,
|
|
||||||
Truck,
|
|
||||||
UsersRound,
|
|
||||||
type LucideIcon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { cn } from "../../lib/utils";
|
|
||||||
import { useAuthStore } from "../../store/auth";
|
|
||||||
|
|
||||||
interface TabDef {
|
|
||||||
to: string;
|
|
||||||
label: string;
|
|
||||||
icon: LucideIcon;
|
|
||||||
end?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
// تبهای دفتر تدارکات (ادمین / مدیر تدارکات)
|
|
||||||
const PROC_TABS: TabDef[] = [
|
|
||||||
{ to: "/", label: "داشبورد", icon: LayoutDashboard, end: true },
|
|
||||||
{ to: "/suppliers", label: "تأمینکنندهها", icon: Truck },
|
|
||||||
{ to: "/projects", label: "پروژهها", icon: Building2 },
|
|
||||||
{ to: "/units", label: "ضرایب", icon: Scale },
|
|
||||||
];
|
|
||||||
|
|
||||||
// تبهای پنل انبار برای مدیر پروژه
|
|
||||||
const PM_INV_TABS: TabDef[] = [
|
|
||||||
{ to: "/inventory", label: "انبار", icon: Boxes, end: true },
|
|
||||||
{ to: "/inventory/change", label: "تغییر موجودی", icon: ArrowLeftRight },
|
|
||||||
{ to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
|
|
||||||
{ to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
|
|
||||||
];
|
|
||||||
|
|
||||||
// تبهای پنل انبار برای ادمین / مدیر تدارکات (آینهی ناوبری بالای دسکتاپ)
|
|
||||||
const ADMIN_INV_TABS: TabDef[] = [
|
|
||||||
{ to: "/inventory", label: "انبار", icon: Boxes, end: true },
|
|
||||||
{ to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
|
|
||||||
{ to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
|
|
||||||
{ to: "/inventory/org", label: "سازماندهی", icon: UsersRound },
|
|
||||||
];
|
|
||||||
|
|
||||||
function TabBar({ tabs }: { tabs: TabDef[] }) {
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
className="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-panel md:hidden"
|
|
||||||
style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
|
|
||||||
>
|
|
||||||
<div className="grid grid-cols-4">
|
|
||||||
{tabs.map((t) => (
|
|
||||||
<NavLink
|
|
||||||
key={t.to}
|
|
||||||
to={t.to}
|
|
||||||
end={t.end}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
cn(
|
|
||||||
"flex min-h-[56px] flex-col items-center justify-center gap-0.5 whitespace-nowrap px-1 text-[10.5px] font-medium transition-colors",
|
|
||||||
isActive ? "text-accent" : "text-muted",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<t.icon className="h-5 w-5" strokeWidth={1.8} />
|
|
||||||
<span>{t.label}</span>
|
|
||||||
</NavLink>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// نوار تب پایینِ موبایل — فقط زیر 768px (md:hidden) و فقط در صفحاتِ نقش کاربر:
|
|
||||||
// مدیر پروژه → تبهای انبار؛ ادمین/مدیر تدارکات → تبهای دفتر یا انبار (بر اساس مسیر).
|
|
||||||
// در ویزارد نمایش داده نمیشود تا با جابهجایی تصادفی، کارِ کاربر از بین نرود.
|
|
||||||
export function MobileTabBar() {
|
|
||||||
const role = useAuthStore((s) => s.user?.role);
|
|
||||||
const { pathname } = useLocation();
|
|
||||||
|
|
||||||
if (pathname === "/login" || pathname === "/admin") return null;
|
|
||||||
const isPM = role === "pm";
|
|
||||||
const isOffice = role === "admin" || role === "procurement_manager";
|
|
||||||
|
|
||||||
if (pathname.startsWith("/inventory")) {
|
|
||||||
if (isPM) return <TabBar tabs={PM_INV_TABS} />;
|
|
||||||
if (isOffice) return <TabBar tabs={ADMIN_INV_TABS} />;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (pathname === "/wizard") return null;
|
|
||||||
const onOfficePage =
|
|
||||||
pathname === "/" ||
|
|
||||||
pathname === "/projects" ||
|
|
||||||
pathname === "/units" ||
|
|
||||||
pathname.startsWith("/suppliers");
|
|
||||||
if (onOfficePage && isOffice) return <TabBar tabs={PROC_TABS} />;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user