feat: nav_added

lib/main.dart

@@ -17,12 +17,17 @@ class MyApp extends StatelessWidget {
         useMaterial3: true,
       ),
       home: const MyHomePage(),
+      // Named routes for clean navigation
+      routes: {
+        '/shop': (context) => const ShopLandingPage(),
+        '/shop/grid-right': (context) => const ShopGridRightSidebarPage(),
+      },
     );
   }
 }
 
 
-// REUSABLE HEADER WIDGET — USED IN BOTH HOME PAGE & SHOP PAGE
+// REUSABLE HEADER WIDGET
 class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   final String title;
 
@@ -51,28 +56,18 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
       ),
       title: Row(
         children: [
-          SizedBox(
+          Container(
-            width: 40,
+            width: 120,
+            height: 40,
+            padding: const EdgeInsets.all(4),
             child: SvgPicture.network(
               'https://nest-frontend-v6.vercel.app/assets/imgs/theme/logo.svg',
-              placeholderBuilder: (context) => const CircularProgressIndicator(),
+              placeholderBuilder: (context) => const Icon(
-            ),
+                Icons.shopping_bag,
-          ),
+                color: Colors.green,
-          const SizedBox(width: 8),
+                size: 42,
-          Text(
+              ),
-            'Nest',
+              fit: BoxFit.contain,
-            style: const TextStyle(
-              fontSize: 24,
-              fontWeight: FontWeight.bold,
-              color: Colors.green,
-            ),
-          ),
-          const SizedBox(width: 4),
-          const Text(
-            'MART & GROCERY',
-            style: TextStyle(
-              fontSize: 10,
-              color: Colors.grey,
             ),
           ),
         ],
@@ -134,9 +129,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
     );
   }
 }
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // REUSABLE DRAWER WIDGET
 class AppDrawer extends StatefulWidget {
   const AppDrawer({super.key});
@@ -202,13 +195,26 @@ class _AppDrawerState extends State<AppDrawer> {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                SvgPicture.network(
+                Container(
-                  logoUrl,
                   height: 40,
-                  placeholderBuilder: (context) => const SizedBox(
+                  padding: const EdgeInsets.all(4),
-                    width: 160,
+                  child: SvgPicture.network(
-                    height: 40,
+                    logoUrl,
-                    child: Center(child: Text('Nest')),
+                    placeholderBuilder: (context) => const Row(
+                      children: [
+                        Icon(Icons.shopping_bag, color: Colors.green, size: 32),
+                        SizedBox(width: 8),
+                        Text(
+                          'Nest',
+                          style: TextStyle(
+                            fontSize: 24,
+                            fontWeight: FontWeight.bold,
+                            color: Colors.green,
+                          ),
+                        ),
+                      ],
+                    ),
+                    fit: BoxFit.contain,
                   ),
                 ),
                 IconButton(
@@ -271,12 +277,7 @@ class _AppDrawerState extends State<AppDrawer> {
                 'Shop Grid - Right Sidebar',
                 onTap: () {
                   Navigator.pop(context);
-                  Navigator.push(
+                  Navigator.pushNamed(context, '/shop/grid-right');
-                    context,
-                    MaterialPageRoute(
-                      builder: (context) => const ShopGridRightSidebarPage(),
-                    ),
-                  );
                 },
               ),
               _buildSubItem('Shop Grid - Left Sidebar'),
@@ -320,6 +321,10 @@ class _AppDrawerState extends State<AppDrawer> {
             children: [
               _buildSubItem('Vendors Grid'),
               _buildSubItem('Vendore List'),
+              _buildSubItem('Vendore Details 01'),
+              _buildSubItem('Vendors Details 02'),
+              _buildSubItem('Vendors Dashboard'),
+              _buildSubItem('Vendors Guide')
             ],
           ),
 
@@ -557,27 +562,132 @@ class _AppDrawerState extends State<AppDrawer> {
   }
 }
 
-// NEW PAGE: Shop Grid - Right Sidebar
+// DECORATIVE ICONS FOR BREADCRUMB BAR
-class ShopGridRightSidebarPage extends StatelessWidget {
+class DecorativeIcons extends StatelessWidget {
-  const ShopGridRightSidebarPage({super.key});
+  const DecorativeIcons({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return Positioned.fill(
-      appBar: const CustomAppBar(title: 'Shop Grid - Right Sidebar'),
+      child: IgnorePointer(
-      drawer: const AppDrawer(), // ✅ Drawer attached → hamburger works!
+        child: Opacity(
-      body: const Center(
+          opacity: 0.1,
-        child: Text(
+          child: Row(
-          'Hello',
+            mainAxisAlignment: MainAxisAlignment.end,
-          style: TextStyle(fontSize: 24),
+            children: [
+              Transform.rotate(
+                angle: -0.3,
+                child: Icon(Icons.straighten, size: 40, color: Colors.green),
+              ),
+              const SizedBox(width: 16),
+              Transform.scale(
+                scale: 0.8,
+                child: Icon(Icons.inventory_2, size: 32, color: Colors.red),
+              ),
+              const SizedBox(width: 24),
+            ],
+          ),
         ),
       ),
     );
   }
 }
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+// BREADCRUMB ITEM
+Widget _buildBreadcrumbItem(String label, {VoidCallback? onPressed}) {
+  return MouseRegion(
+    cursor: SystemMouseCursors.click,
+    child: InkWell(
+      onTap: onPressed,
+      borderRadius: BorderRadius.circular(4),
+      hoverColor: Colors.green[100],
+      splashColor: Colors.transparent,
+      highlightColor: Colors.transparent,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 2),
+        child: Text(
+          label,
+          style: const TextStyle(
+            fontSize: 14,
+            fontWeight: FontWeight.w500,
+            color: Colors.green,
+          ),
+        ),
+      ),
+    ),
+  );
+}
+
+// BREADCRUMBS BAR WIDGET
+class BreadcrumbsBar extends StatelessWidget {
+  final String currentPage;
+
+  const BreadcrumbsBar({
+    super.key,
+    required this.currentPage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+      margin: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.green[50],
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Stack(
+        children: [
+          const DecorativeIcons(),
+          Row(
+            children: [
+              Expanded(
+                child: Text(
+                  currentPage,
+                  style: const TextStyle(
+                    fontSize: 32,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.black87,
+                  ),
+                ),
+              ),
+              Row(
+                children: [
+                  _buildBreadcrumbItem('Home', onPressed: () {
+                    Navigator.popUntil(context, (route) => route.isFirst);
+                  }),
+                  const SizedBox(width: 8),
+                  const Icon(Icons.chevron_right, size: 16, color: Colors.grey),
+                  const SizedBox(width: 8),
+                  _buildBreadcrumbItem('Shop', onPressed: () {
+                    Navigator.pushNamedAndRemoveUntil(
+                      context,
+                      '/shop',
+                          (route) => route.isFirst,
+                    );
+                  }),
+                  const SizedBox(width: 8),
+                  const Icon(Icons.chevron_right, size: 16, color: Colors.grey),
+                  const SizedBox(width: 8),
+                  Text(
+                    currentPage,
+                    style: const TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                      color: Colors.black54,
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+
 // MAIN HOME PAGE
 class MyHomePage extends StatelessWidget {
   const MyHomePage({super.key});
@@ -586,12 +696,12 @@ class MyHomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: const CustomAppBar(title: 'Home'),
-      drawer: const AppDrawer(), // ✅ Same drawer
+      drawer: const AppDrawer(),
       body: const Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            Text('Hello'),
+            Text('Hello from Home!'),
             Text(
               '0',
               style: TextStyle(fontSize: 48),
@@ -601,4 +711,49 @@ class MyHomePage extends StatelessWidget {
       ),
     );
   }
+}
+
+// SHOP LANDING PAGE (e.g., /shop)
+class ShopLandingPage extends StatelessWidget {
+  const ShopLandingPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(title: 'Shop'),
+      drawer: const AppDrawer(),
+      body: const Center(
+        child: Text(
+          'Welcome to the Shop!',
+          style: TextStyle(fontSize: 24),
+        ),
+      ),
+    );
+  }
+}
+
+// SHOP GRID - RIGHT SIDEBAR PAGE
+class ShopGridRightSidebarPage extends StatelessWidget {
+  const ShopGridRightSidebarPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: const CustomAppBar(title: 'Shop Grid - Right Sidebar'),
+      drawer: const AppDrawer(),
+      body: Column(
+        children: [
+          BreadcrumbsBar(currentPage: 'Snack'),
+          Expanded(
+            child: Center(
+              child: Text(
+                'Hello from Shop Grid - Right Sidebar!',
+                style: const TextStyle(fontSize: 24),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 }