refactor: sidebar trailing widget in the end and use NavigationBar instead of BottomNavigationBar

lib/components/root/sidebar.dart

@@ -90,15 +90,40 @@ class Sidebar extends HookConsumerWidget {
               );
             },
           ).toList(),
-          extended: true,
-          leading: Padding(
+          extended: breakpoints > Breakpoints.md,
+          leading: const SidebarHeader(),
+          trailing: const Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: SidebarFooter(),
+            ),
+          ),
+        ),
+        Expanded(child: child)
+      ],
+    );
+  }
+}
+
+class SidebarHeader extends HookWidget {
+  const SidebarHeader({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final breakpoint = useBreakpoints();
+
+    if (breakpoint <= Breakpoints.md) {
+      return Sidebar.brandLogo();
+    }
+
+    return Padding(
       padding: const EdgeInsets.all(8.0),
       child: Column(
         children: [
-                if (kIsMacOS) macSpacer,
+          if (kIsMacOS) const SizedBox(height: 25),
           Row(
             children: [
-                    brandLogo(),
+              Sidebar.brandLogo(),
               const SizedBox(width: 10),
               Text(
                 "Spotube",
@@ -108,11 +133,6 @@ class Sidebar extends HookConsumerWidget {
           ),
         ],
       ),
-          ),
-          trailing: const SidebarFooter(),
-        ),
-        Expanded(child: child)
-      ],
     );
   }
 }
@@ -124,10 +144,7 @@ class SidebarFooter extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    return SizedBox(
-      width: 256,
-      child: HookBuilder(
-        builder: (context) {
+    final breakpoint = useBreakpoints();
     final me = useQueries.user.me(ref);
     final data = me.data;
 
@@ -139,32 +156,35 @@ class SidebarFooter extends HookConsumerWidget {
 
     final auth = ref.watch(AuthenticationNotifier.provider);
 
-          return Padding(
-              padding: const EdgeInsets.all(16).copyWith(left: 0),
+    if (breakpoint <= Breakpoints.md) {
+      return IconButton(
+        icon: const Icon(SpotubeIcons.settings),
+        onPressed: () => Sidebar.goToSettings(context),
+      );
+    }
+
+    return Container(
+      padding: const EdgeInsets.only(left: 12),
+      width: 250,
       child: Row(
+        mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           if (auth != null && data == null)
-                    const Center(
-                      child: CircularProgressIndicator(),
-                    )
+            const CircularProgressIndicator()
           else if (data != null)
             Flexible(
               child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                 children: [
                   CircleAvatar(
-                            backgroundImage:
-                                UniversalImage.imageProvider(avatarImg),
+                    backgroundImage: UniversalImage.imageProvider(avatarImg),
                     onBackgroundImageError: (exception, stackTrace) =>
                         Assets.userPlaceholder.image(
                       height: 16,
                       width: 16,
                     ),
                   ),
-                          const SizedBox(
-                            width: 10,
-                          ),
+                  const SizedBox(width: 10),
                   Flexible(
                     child: Text(
                       data.displayName ?? "Guest",
@@ -182,10 +202,9 @@ class SidebarFooter extends HookConsumerWidget {
             ),
           IconButton(
             icon: const Icon(SpotubeIcons.settings),
-                      onPressed: () => Sidebar.goToSettings(context)),
+            onPressed: () => Sidebar.goToSettings(context),
+          ),
         ],
-              ));
-        },
       ),
     );
   }

lib/components/root/spotube_navigation_bar.dart

@@ -37,11 +37,11 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     if (layoutMode == LayoutMode.extended ||
         (breakpoint.isMoreThan(Breakpoints.sm) &&
             layoutMode == LayoutMode.adaptive)) return const SizedBox();
-    return BottomNavigationBar(
-      items: [
+    return NavigationBar(
+      destinations: [
         ...navbarTileList.map(
           (e) {
-            return BottomNavigationBarItem(
+            return NavigationDestination(
               icon: Badge(
                 backgroundColor: Theme.of(context).primaryColor,
                 isLabelVisible: e.title == "Library" && downloadCount > 0,
@@ -59,8 +59,8 @@ class SpotubeNavigationBar extends HookConsumerWidget {
           },
         ),
       ],
-      currentIndex: insideSelectedIndex.value,
-      onTap: (i) {
+      selectedIndex: insideSelectedIndex.value,
+      onDestinationSelected: (i) {
         insideSelectedIndex.value = i;
         if (navbarTileList[i].title == "Settings") {
           Sidebar.goToSettings(context);

pubspec.lock

@@ -551,6 +551,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_adaptive_scaffold:
+    dependency: "direct main"
+    description:
+      name: flutter_adaptive_scaffold
+      sha256: d5842a235ec810320c7e6dac282876d93bccf231201be6e684b016cd717c0576
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
   flutter_app_builder:
     dependency: transitive
     description: