refactored and added drawer for mobile navigation

mikezamayias · Jan 14, 2022 · 9da0b9d · 9da0b9d
1 parent 0515add
commit 9da0b9d
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 32 deletions.
diff --git a/lib/widgets/custom_navigation_bar/navigation_actions.dart b/lib/widgets/custom_navigation_bar/navigation_actions.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+List<TextButton> navigationActions = [
+// home
+  TextButton.icon(
+    onPressed: () {},
+    icon: const Icon(Icons.home_rounded),
+    label: const Text('Home'),
+  ),
+  // register
+  TextButton.icon(
+    onPressed: () {},
+    icon: const Icon(Icons.person_add_rounded),
+    label: const Text('Register'),
+  ),
+  // login
+  TextButton.icon(
+    onPressed: () {},
+    icon: const Icon(Icons.login_rounded),
+    label: const Text('Login'),
+  ),
+  // cart
+  TextButton.icon(
+    onPressed: () {},
+    icon: const Icon(Icons.shopping_cart_rounded),
+    label: const Text('Cart'),
+  ),
+  // contact
+  TextButton.icon(
+    onPressed: () {},
+    icon: const Icon(Icons.contact_page_rounded),
+    label: const Text('Contact'),
+  ),
+];
diff --git a/lib/widgets/custom_navigation_bar/tasktop/custom_navigation_bar_tasktop.dart b/lib/widgets/custom_navigation_bar/tasktop/custom_navigation_bar_tasktop.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_ecommerce_website_demo/widgets/custom_navigation_bar/navigation_actions.dart';
 import 'package:flutter_ecommerce_website_demo/widgets/custom_navigation_bar/navigation_bar_logo.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
@@ -18,38 +19,7 @@ class CustomNavigationBarTasktop extends StatelessWidget {
           const NavigationBarLogo(),
           Row(
             mainAxisSize: MainAxisSize.min,
-            children: [
-              // home
-              TextButton.icon(
-                onPressed: () {},
-                icon: const Icon(Icons.home_rounded),
-                label: const Text('Home'),
-              ),
-              // register
-              TextButton.icon(
-                onPressed: () {},
-                icon: const Icon(Icons.person_add_rounded),
-                label: const Text('Register'),
-              ),
-              // login
-              TextButton.icon(
-                onPressed: () {},
-                icon: const Icon(Icons.login_rounded),
-                label: const Text('Login'),
-              ),
-              // cart
-              TextButton.icon(
-                onPressed: () {},
-                icon: const Icon(Icons.shopping_cart_rounded),
-                label: const Text('Cart'),
-              ),
-              // contact
-              TextButton.icon(
-                onPressed: () {},
-                icon: const Icon(Icons.contact_page_rounded),
-                label: const Text('Contact'),
-              ),
-            ],
+            children: navigationActions,
           )
         ],
       ),

diff --git a/lib/widgets/custom_navigation_drawer/custom_navigation_drawer.dart b/lib/widgets/custom_navigation_drawer/custom_navigation_drawer.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import '../custom_navigation_bar/navigation_actions.dart';
+import '../custom_navigation_bar/navigation_bar_logo.dart';
+
+class CustomNavigationDrawer extends StatelessWidget {
+  const CustomNavigationDrawer({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 210,
+      height: MediaQuery.of(context).size.height,
+      child: Container(
+        decoration: const BoxDecoration(
+          color: Colors.white,
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black12,
+              blurRadius: 18,
+            ),
+          ],
+        ),
+        padding: const EdgeInsets.symmetric(horizontal: 18),
+        child: Column(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Padding(
+              padding: EdgeInsets.symmetric(vertical: 30),
+              child: NavigationBarLogo(),
+            ),
+            ...navigationActions
+                .map(
+                  (action) => Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 10),
+                    child: action,
+                  ),
+                )
+                .toList(),
+          ],
+        ),
+      ),
+    );
+  }
+}