shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement PWA support with manifest and icons and add mobile-optimized bottom navigation

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-06 16:38:57 +06:00
parent 849c6e56ba
commit 502e576fc1
10 changed files with 3408 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/layout.tsx
View File

@@ -1,4 +1,4 @@
import type { Metadata } from "next";
import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Sidebar from "@/components/Sidebar";
@@ -12,6 +12,20 @@ const inter = Inter({
export const metadata: Metadata = {
title: "JAIBEN Mobility - EV Rental Platform",
description: "JAIBEN Mobility Ltd - EV Rental, Rent-to-Own, Share EV, FOCO Investor",
manifest: "/manifest.json",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "JAIBEN",
},
};
export const viewport: Viewport = {
themeColor: "#ffffff",
width: "device-width",
initialScale: 1,
maximumScale: 1,
userScalable: false,
};
export default function RootLayout({
@@ -20,10 +34,10 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" className={inter.variable}>
<body className="min-h-screen bg-slate-50 antialiased">
<html lang="en" className={inter.variable} suppressHydrationWarning>
<body className="min-h-screen bg-slate-50 antialiased" suppressHydrationWarning>
<Sidebar />
<main className="lg:ml-64 min-h-screen">
<main className="lg:ml-64 min-h-screen pb-20 lg:pb-0">
{children}
</main>
<Toaster position="top-right" />

73
src/components/Sidebar.tsx
View File

@@ -76,21 +76,28 @@ export default function Sidebar() {
isInvestor ? investorNavItems :
isShop ? shopNavItems : bikerNavItems;
const toggleMenu = (label: string) => {
setExpandedMenu(expandedMenu === label ? null : label);
};
const bottomNavItems = isAdmin ? [
{ label: 'Home', href: '/admin', icon: BarChart3 },
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
{ label: 'Users', href: '/admin/users', icon: Users },
] : isInvestor ? [
{ label: 'Home', href: '/investor', icon: Wallet },
{ label: 'Portfolio', href: '/investor/portfolio', icon: BarChart3 },
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
] : isShop ? [
{ label: 'Home', href: '/shop', icon: Store },
{ label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
{ label: 'Fleet', href: '/shop/fleet', icon: Bike },
] : [
{ label: 'Home', href: '/', icon: Bike },
{ label: 'Rent', href: '/rent', icon: Zap },
{ label: 'EVs', href: '/bikes', icon: Battery },
];
return (
<>
<button
onClick={() => setMobileOpen(!mobileOpen)}
className="lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-md"
>
{mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
</button>
<aside className={`
fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-40
fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-50
transform transition-transform duration-300 ease-in-out
${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
`}>
@@ -100,13 +107,21 @@ export default function Sidebar() {
<h1 className="text-xl font-extrabold text-accent">JAIBEN</h1>
<p className="text-xs text-slate-500">Mobility Ltd</p>
</div>
<div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
{isAdmin ? 'Admin' : isInvestor ? 'Investor' : isShop ? 'Shop' : 'Biker'}
<div className="flex items-center gap-2">
<div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
{isAdmin ? 'Admin' : isInvestor ? 'Investor' : isShop ? 'Shop' : 'Biker'}
</div>
<button
onClick={() => setMobileOpen(false)}
className="lg:hidden p-1 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100"
>
<X className="w-5 h-5" />
</button>
</div>
</div>
</div>
<nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)]">
<nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)] pb-24 lg:pb-3">
{navItems.map((item) => {
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
const Icon = item.icon;
@@ -150,9 +165,37 @@ export default function Sidebar() {
</div>
</aside>
{/* Bottom Navigation for Mobile */}
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex justify-around items-center h-16 z-30 pb-safe shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
{bottomNavItems.map((item) => {
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
className={`
flex flex-col items-center justify-center w-full h-full gap-1 transition-colors
${isActive ? 'text-accent' : 'text-slate-500 hover:text-slate-900'}
`}
>
<Icon className={`w-5 h-5 ${isActive ? 'text-accent' : ''}`} />
<span className="text-[10px] font-medium">{item.label}</span>
</Link>
);
})}
<button
onClick={() => setMobileOpen(true)}
className="flex flex-col items-center justify-center w-full h-full gap-1 text-slate-500 hover:text-slate-900 transition-colors"
>
<Menu className="w-5 h-5" />
<span className="text-[10px] font-medium">Menu</span>
</button>
</nav>
{mobileOpen && (
<div
className="lg:hidden fixed inset-0 bg-black/30 z-30"
className="lg:hidden fixed inset-0 bg-black/40 backdrop-blur-sm z-40 transition-opacity"
onClick={() => setMobileOpen(false)}
/>
)}