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

lib/components/root/sidebar.dart

@@ -90,26 +90,14 @@ class Sidebar extends HookConsumerWidget {
               );
             },
           ).toList(),
-          extended: true,
+          extended: breakpoints > Breakpoints.md,
-          leading: Padding(
+          leading: const SidebarHeader(),
-            padding: const EdgeInsets.all(8.0),
+          trailing: const Expanded(
-            child: Column(
+            child: Align(
-              children: [
+              alignment: Alignment.bottomCenter,
-                if (kIsMacOS) macSpacer,
+              child: SidebarFooter(),
-                Row(
-                  children: [
-                    brandLogo(),
-                    const SizedBox(width: 10),
-                    Text(
-                      "Spotube",
-                      style: Theme.of(context).textTheme.titleLarge,
-                    ),
-                  ],
-                ),
-              ],
             ),
           ),
-          trailing: const SidebarFooter(),
         ),
         Expanded(child: child)
       ],
@@ -117,6 +105,38 @@ class Sidebar extends HookConsumerWidget {
   }
 }
 
+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) const SizedBox(height: 25),
+          Row(
+            children: [
+              Sidebar.brandLogo(),
+              const SizedBox(width: 10),
+              Text(
+                "Spotube",
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class SidebarFooter extends HookConsumerWidget {
   const SidebarFooter({
     Key? key,
@@ -124,68 +144,67 @@ class SidebarFooter extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    return SizedBox(
+    final breakpoint = useBreakpoints();
-      width: 256,
+    final me = useQueries.user.me(ref);
-      child: HookBuilder(
+    final data = me.data;
-        builder: (context) {
-          final me = useQueries.user.me(ref);
-          final data = me.data;
 
-          final avatarImg = TypeConversionUtils.image_X_UrlString(
+    final avatarImg = TypeConversionUtils.image_X_UrlString(
-            data?.images,
+      data?.images,
-            index: (data?.images?.length ?? 1) - 1,
+      index: (data?.images?.length ?? 1) - 1,
-            placeholder: ImagePlaceholder.artist,
+      placeholder: ImagePlaceholder.artist,
-          );
+    );
 
-          final auth = ref.watch(AuthenticationNotifier.provider);
+    final auth = ref.watch(AuthenticationNotifier.provider);
 
-          return Padding(
+    if (breakpoint <= Breakpoints.md) {
-              padding: const EdgeInsets.all(16).copyWith(left: 0),
+      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 CircularProgressIndicator()
+          else if (data != null)
+            Flexible(
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  if (auth != null && data == null)
+                  CircleAvatar(
-                    const Center(
+                    backgroundImage: UniversalImage.imageProvider(avatarImg),
-                      child: CircularProgressIndicator(),
+                    onBackgroundImageError: (exception, stackTrace) =>
-                    )
+                        Assets.userPlaceholder.image(
-                  else if (data != null)
+                      height: 16,
-                    Flexible(
+                      width: 16,
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                        children: [
-                          CircleAvatar(
-                            backgroundImage:
-                                UniversalImage.imageProvider(avatarImg),
-                            onBackgroundImageError: (exception, stackTrace) =>
-                                Assets.userPlaceholder.image(
-                              height: 16,
-                              width: 16,
-                            ),
-                          ),
-                          const SizedBox(
-                            width: 10,
-                          ),
-                          Flexible(
-                            child: Text(
-                              data.displayName ?? "Guest",
-                              maxLines: 1,
-                              softWrap: false,
-                              overflow: TextOverflow.fade,
-                              style: Theme.of(context)
-                                  .textTheme
-                                  .bodyMedium
-                                  ?.copyWith(fontWeight: FontWeight.bold),
-                            ),
-                          ),
-                        ],
-                      ),
                     ),
-                  IconButton(
+                  ),
-                      icon: const Icon(SpotubeIcons.settings),
+                  const SizedBox(width: 10),
-                      onPressed: () => Sidebar.goToSettings(context)),
+                  Flexible(
+                    child: Text(
+                      data.displayName ?? "Guest",
+                      maxLines: 1,
+                      softWrap: false,
+                      overflow: TextOverflow.fade,
+                      style: Theme.of(context)
+                          .textTheme
+                          .bodyMedium
+                          ?.copyWith(fontWeight: FontWeight.bold),
+                    ),
+                  ),
                 ],
-              ));
+              ),
-        },
+            ),
+          IconButton(
+            icon: const Icon(SpotubeIcons.settings),
+            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(
+    return NavigationBar(
-      items: [
+      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,
+      selectedIndex: insideSelectedIndex.value,
-      onTap: (i) {
+      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: