added end drawer, finally

lib/features/main/main_section.dart

@@ -3,6 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:portfolio/common/widgets/responsive.dart';
 import 'package:portfolio/features/main/main_section_desktop.dart';
 import 'package:portfolio/features/main/main_section_tablet.dart';
+import 'package:portfolio/features/main/widgets/end_drawer.dart';
 
 class MainSection extends HookWidget {
   const MainSection({super.key});
@@ -11,6 +12,9 @@ class MainSection extends HookWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Theme.of(context).colorScheme.secondary,
+      endDrawer: const SafeArea(
+        child: EndDrawer(),
+      ),
       // endDrawer: ,
       body: const SafeArea(
         left: false,

lib/features/main/widgets/drawer_button.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+// import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+// import 'package:portfolio/common/providers/scrollcontroller_provider.dart';
+// import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+class MyDrawerButton extends ConsumerStatefulWidget {
+  const MyDrawerButton({
+    super.key,
+    required this.title,
+    required this.sectionKey,
+  });
+
+  final String title;
+  final GlobalKey sectionKey;
+
+  @override
+  ConsumerState<MyDrawerButton> createState() => _MyDrawerButtonState();
+}
+
+class _MyDrawerButtonState extends ConsumerState<MyDrawerButton> {
+  late ColorTween colorTween;
+
+  @override
+  void didChangeDependencies() {
+    colorTween = ColorTween(
+      begin: Theme.of(context).colorScheme.inverseSurface,
+      end: Theme.of(context).colorScheme.onSecondary,
+    );
+    super.didChangeDependencies();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var isHovered = false;
+    // final controller = useAnimationController(
+    //   duration: const Duration(milliseconds: 200),
+    // );
+    // // final controller = ref.read(scrollControllerProvider);
+    // final colorAnimation = useAnimation(colorTween.animate(controller));
+    // final controller = AnimationController(vsync: this ,duration: const Duration(milliseconds: 200));
+    return DefaultTextStyle(
+      style: Theme.of(context).textTheme.headlineMedium!,
+      child: MouseRegion(
+        cursor: SystemMouseCursors.click,
+        onEnter: (_) {
+          if (!isHovered) {
+            isHovered = true;
+            // controller.forward();
+            // controller.animateTo(
+            //   sectionKey.currentContext!.size!.height,
+            //   duration: const Duration(milliseconds: 200),
+            //   curve: Curves.easeInOut,
+            // );
+          }
+        },
+        onExit: (_) {
+          if (isHovered) {
+            isHovered = false;
+            // controller.reverse();
+          }
+        },
+        child: GestureDetector(
+          onTap: () => _onTap(context),
+          child: Text(
+            widget.title,
+            // style: TextStyle(color: colorAnimation),
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onTap(BuildContext context) {
+    final sectionKeyCurrentContext = widget.sectionKey.currentContext;
+    if (sectionKeyCurrentContext != null) {
+      Scrollable.ensureVisible(
+        sectionKeyCurrentContext,
+        duration: const Duration(milliseconds: 500),
+        curve: Curves.decelerate,
+      );
+    }
+    Navigator.of(context).pop();
+  }
+}

lib/features/main/widgets/end_drawer.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:portfolio/common/widgets/selection_area.dart';
+import 'package:portfolio/common/constants/sizes.dart';
+import 'package:portfolio/features/main/widgets/dark_mode_switch.dart';
+import 'package:portfolio/features/main/widgets/drawer_button.dart';
+
+import 'package:portfolio/common/constants/global_keys.dart';
+import 'package:portfolio/common/widgets/responsive.dart';
+
+class EndDrawer extends StatelessWidget {
+  const EndDrawer({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    if (Responsive.isDesktop(context)) return const SizedBox.shrink();
+    return Drawer(
+      backgroundColor: Theme.of(context).colorScheme.secondary,
+      child: Column(
+        children: [
+          Align(
+            alignment: Alignment.topRight,
+            child: Padding(
+              padding: const EdgeInsets.only(top: 8),
+              child: IconButton(
+                onPressed: () => Navigator.of(context).pop(),
+                icon: const Icon(Icons.close),
+              ),
+            ),
+          ),
+          Divider(
+            height: 8,
+            color: Theme.of(context).colorScheme.inversePrimary,
+          ),
+          Expanded(
+            child: MySelectionArea(
+              mouseCursor: MaterialStateMouseCursor.clickable,
+              child: ListView(
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      gapH40,
+                      const DarkModeSwitch(),
+                      gapH80,
+                      MyDrawerButton(
+                        title: 'About',
+                        sectionKey: aboutKey,
+                      ),
+                      gapH40,
+                      MyDrawerButton(
+                        title: 'Experience',
+                        sectionKey: experienceKey,
+                      ),
+                      gapH40,
+                      MyDrawerButton(
+                        title: 'Projects',
+                        sectionKey: projectsKey,
+                      ),
+                      gapH40,
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/main/widgets/sliver_app_bar.dart

@@ -34,3 +34,38 @@ class _AppBarDelegate extends SliverPersistentHeaderDelegate {
     return false;
   }
 }
+
+
+// class MySliverAppBar extends StatelessWidget {
+//   const MySliverAppBar({super.key});
+
+//   @override
+//   Widget build(BuildContext context) {
+//     return SliverPersistentHeader(
+//       delegate: _AppBarDelegate(),
+//       floating: true,
+//     );
+//   }
+// }
+
+// class _AppBarDelegate extends SliverPersistentHeaderDelegate {
+//   @override
+//   Widget build(
+//     BuildContext context,
+//     double shrinkOffset,
+//     bool overlapsContent,
+//   ) {
+//     return const MyAppBar();
+//   }
+
+//   @override
+//   double get minExtent => 56;
+
+//   @override
+//   double get maxExtent => 56;
+
+//   @override
+//   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
+//     return false;
+//   }
+// }