From ad6d5e26ad11dd41eb65c4cbee5507867c1c41e7 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Fri, 15 May 2026 18:07:15 +0600
Subject: [PATCH] feat: implement sidebar notification drawer and update
 investor page padding layouts

---
 src/app/investor/dashboard/page.tsx        |  2 +-
 src/app/investor/investments/[id]/page.tsx |  2 +-
 src/app/investor/plans/page.tsx            |  2 +-
 src/app/investor/profile/page.tsx          |  2 +-
 src/app/investor/rental-history/page.tsx   |  2 +-
 src/app/investor/withdraw/page.tsx         |  2 +-
 src/components/Sidebar.tsx                 | 38 ++++++++++++++++++----
 7 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/app/investor/dashboard/page.tsx b/src/app/investor/dashboard/page.tsx
index 8dfe28a..9ff66b3 100644
--- a/src/app/investor/dashboard/page.tsx
+++ b/src/app/investor/dashboard/page.tsx
@@ -12,7 +12,7 @@ export default function InvestorDashboardPage() {
   const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.withdrawalPending;
 
   return (
-    <div className="min-h-screen ">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
diff --git a/src/app/investor/investments/[id]/page.tsx b/src/app/investor/investments/[id]/page.tsx
index 183cc7a..a71a836 100644
--- a/src/app/investor/investments/[id]/page.tsx
+++ b/src/app/investor/investments/[id]/page.tsx
@@ -50,7 +50,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
   const investmentTransactions = transactions.filter((t: any) => t.investorId === investor.id && t.type === 'investment_return');
 
   return (
-    <div className="min-h-screen ">
+    <div className="min-h-screen lg:pt-6 pt-0 ">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
diff --git a/src/app/investor/plans/page.tsx b/src/app/investor/plans/page.tsx
index dd059db..af16147 100644
--- a/src/app/investor/plans/page.tsx
+++ b/src/app/investor/plans/page.tsx
@@ -48,7 +48,7 @@ export default function MyInvestmentsPage() {
   };
 
   return (
-    <div className="min-h-screen ">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
         {/* Header */}
diff --git a/src/app/investor/profile/page.tsx b/src/app/investor/profile/page.tsx
index 7c6d616..aefb260 100644
--- a/src/app/investor/profile/page.tsx
+++ b/src/app/investor/profile/page.tsx
@@ -125,7 +125,7 @@ export default function InvestorProfilePage() {
   ];
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 sm:p-5 bg-slate-50 min-h-screen">
         <div className="max-w-8xl mx-auto">
diff --git a/src/app/investor/rental-history/page.tsx b/src/app/investor/rental-history/page.tsx
index fdcaf39..4e7d95c 100644
--- a/src/app/investor/rental-history/page.tsx
+++ b/src/app/investor/rental-history/page.tsx
@@ -65,7 +65,7 @@ export default function RentalHistoryPage() {
   };
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 sm:p-6 max-w-8xl mx-auto">
         {/* Header */}
diff --git a/src/app/investor/withdraw/page.tsx b/src/app/investor/withdraw/page.tsx
index 870eb59..392a07e 100644
--- a/src/app/investor/withdraw/page.tsx
+++ b/src/app/investor/withdraw/page.tsx
@@ -108,7 +108,7 @@ export default function InvestorWithdrawPage() {
   };
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen lg:pt-6 pt-0">
       <InvestorNotification isMobile />
       <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto">
         {/* Header */}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 57d8dd3..b2268f3 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -39,7 +39,9 @@ const ROLE_LABELS: Record<string, string> = {
   merchant: 'Merchant',
 };
 
-const adminNavItems = [
+type NavItem = { label: string; href: string; icon: any; isNotification?: boolean };
+
+const adminNavItems: NavItem[] = [
   { label: 'Dashboard', href: '/admin', icon: BarChart3 },
   { label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
   { label: 'Rentals', href: '/admin/rentals', icon: FileText },
@@ -59,13 +61,13 @@ const adminNavItems = [
 
 ];
 
-const bikerNavItems = [
+const bikerNavItems: NavItem[] = [
   { label: 'Biker Dashboard', href: '/', icon: Bike },
   { label: 'Rent Bike', href: '/rent', icon: Zap },
   { label: 'Browse EVs', href: '/bikes', icon: Battery },
 ];
 
-const investorNavItems = [
+const investorNavItems: NavItem[] = [
   { label: 'Dashboard', href: '/investor/dashboard', icon: Bike },
   { label: 'My Investments', href: '/investor/plans', icon: Target },
   { label: 'Rental History', href: '/investor/rental-history', icon: History },
@@ -74,7 +76,7 @@ const investorNavItems = [
   { label: 'My Profile', href: '/investor/profile', icon: User },
 ];
 
-const shopNavItems = [
+const shopNavItems: NavItem[] = [
   { label: 'Dashboard', href: '/shop', icon: Store },
   { label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
   { label: 'Fleet', href: '/shop/fleet', icon: Bike },
@@ -84,6 +86,7 @@ export default function Sidebar() {
   const pathname = usePathname();
   const [mobileOpen, setMobileOpen] = useState(false);
   const [expandedMenu, setExpandedMenu] = useState<string | null>(null);
+  const [notificationOpen, setNotificationOpen] = useState(false);
   const [userName, setUserName] = useState('User');
   const [userRole, setUserRole] = useState('admin');
 
@@ -155,6 +158,23 @@ export default function Sidebar() {
             const isChild = item.href !== '/' && pathname.startsWith(item.href + '/');
             const isActive = isExact || isChild;
             const Icon = item.icon;
+            
+            if (item.isNotification) {
+              return (
+                <button
+                  key={item.label}
+                  onClick={() => { setMobileOpen(false); setNotificationOpen(true); }}
+                  className="w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-all duration-200"
+                >
+                  <div className="flex items-center gap-3">
+                    <Icon className="w-5 h-5" />
+                    <span>{item.label}</span>
+                  </div>
+                  <span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">2</span>
+                </button>
+              );
+            }
+            
             return (
               <Link
                 key={item.href}
@@ -175,8 +195,14 @@ export default function Sidebar() {
           })}
         </nav>
 
-        {isInvestor && (
-          <div className="hidden lg:block p-3 border-t border-slate-100">
+        {isInvestor && notificationOpen && (
+          <div className="p-3 border-t border-slate-100">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-semibold text-slate-700">Notifications</span>
+              <button onClick={() => setNotificationOpen(false)} className="p-1 hover:bg-slate-100 rounded">
+                <X className="w-4 h-4 text-slate-400" />
+              </button>
+            </div>
             <InvestorNotification />
           </div>
         )}