Create Hamburger Menu Button

Codelessly · Feb 24, 2024 · f4debc9 · f4debc9
1 parent 569b539
commit f4debc9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 42 deletions.
diff --git a/lib/components/blog.dart b/lib/components/blog.dart
@@ -4,8 +4,8 @@ import 'package:minimal/components/color.dart';
 import 'package:minimal/components/spacing.dart';
 import 'package:minimal/components/text.dart';
 import 'package:minimal/components/typography.dart';
-import 'package:minimal/pages/page_post.dart';
-import 'package:minimal/pages/page_typography.dart';
+import 'package:minimal/pages/pages.dart';
+import 'package:responsive_framework/responsive_framework.dart';
 
 class ImageWrapper extends StatelessWidget {
   final String image;
@@ -355,52 +355,62 @@ class MinimalMenuBar extends StatelessWidget {
                         letterSpacing: 3,
                         fontWeight: FontWeight.w500)),
               ),
-              Flexible(
-                child: Container(
-                  alignment: Alignment.centerRight,
-                  child: Wrap(
-                    children: <Widget>[
-                      TextButton(
-                        onPressed: () => Navigator.popUntil(context,
-                            ModalRoute.withName(Navigator.defaultRouteName)),
-                        style: menuButtonStyle,
-                        child: const Text(
-                          "HOME",
+              if (ResponsiveBreakpoints.of(context).isMobile) ...[
+                const Spacer(),
+                Transform.translate(
+                  offset: const Offset(16, 0),
+                  child: IconButton(
+                    icon: const Icon(Icons.menu),
+                    onPressed: () {},
+                  ),
+                )
+              ] else
+                Flexible(
+                  child: Container(
+                    alignment: Alignment.centerRight,
+                    child: Wrap(
+                      children: <Widget>[
+                        TextButton(
+                          onPressed: () => Navigator.popUntil(context,
+                              ModalRoute.withName(Navigator.defaultRouteName)),
+                          style: menuButtonStyle,
+                          child: const Text(
+                            "HOME",
+                          ),
                         ),
-                      ),
-                      TextButton(
-                        onPressed: () {},
-                        style: menuButtonStyle,
-                        child: const Text(
-                          "PORTFOLIO",
+                        TextButton(
+                          onPressed: () {},
+                          style: menuButtonStyle,
+                          child: const Text(
+                            "PORTFOLIO",
+                          ),
                         ),
-                      ),
-                      TextButton(
-                        onPressed: () =>
-                            Navigator.pushNamed(context, TypographyPage.name),
-                        style: menuButtonStyle,
-                        child: const Text(
-                          "STYLE",
+                        TextButton(
+                          onPressed: () =>
+                              Navigator.pushNamed(context, TypographyPage.name),
+                          style: menuButtonStyle,
+                          child: const Text(
+                            "STYLE",
+                          ),
                         ),
-                      ),
-                      TextButton(
-                        onPressed: () {},
-                        style: menuButtonStyle,
-                        child: const Text(
-                          "ABOUT",
+                        TextButton(
+                          onPressed: () {},
+                          style: menuButtonStyle,
+                          child: const Text(
+                            "ABOUT",
+                          ),
                         ),
-                      ),
-                      TextButton(
-                        onPressed: () {},
-                        style: menuButtonStyle,
-                        child: const Text(
-                          "CONTACT",
+                        TextButton(
+                          onPressed: () {},
+                          style: menuButtonStyle,
+                          child: const Text(
+                            "CONTACT",
+                          ),
                         ),
-                      ),
-                    ],
+                      ],
+                    ),
                   ),
                 ),
-              ),
             ],
           ),
         ),

diff --git a/lib/main.dart b/lib/main.dart
@@ -15,13 +15,13 @@ class MyApp extends StatelessWidget {
       // Wrapping the app with a builder method makes breakpoints
       // accessible throughout the widget tree.
       builder: (context, child) => ResponsiveBreakpoints.builder(
-        child: child!,
         breakpoints: [
           const Breakpoint(start: 0, end: 450, name: MOBILE),
           const Breakpoint(start: 451, end: 800, name: TABLET),
           const Breakpoint(start: 801, end: 1920, name: DESKTOP),
           const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
         ],
+        child: child!,
       ),
       initialRoute: '/',
       onGenerateRoute: (RouteSettings settings) {