✨ Basis collapse sidebar

lib/widgets/navigation/app_navigation_drawer.dart

@@ -25,6 +25,8 @@ class AppNavigationDrawer extends StatefulWidget {
 }
 
 class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
+  bool _isCollapsed = true;
+
   AccountStatus? _accountStatus;
 
   Future<void> _getStatus() async {
@@ -40,34 +42,13 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
     }
   }
 
-  void _closeDrawer() {
+  Widget _buildUserInfo() {
-    rootScaffoldKey.currentState!.closeDrawer();
+    return Obx(() {
-  }
-
-  @override
-  void initState() {
-    super.initState();
-    _getStatus();
-  }
-
-  @override
-  Widget build(BuildContext context) {
       final AuthProvider auth = Get.find();
-
-    return Drawer(
-      backgroundColor:
-          SolianTheme.isLargeScreen(context) ? Colors.transparent : null,
-      child: SafeArea(
-        bottom: false,
-        child: Column(
-          children: [
-            Obx(() {
       if (auth.isAuthorized.isFalse || auth.userProfile.value == null) {
-                return ListTile(
+        if (_isCollapsed) {
-                  contentPadding: const EdgeInsets.symmetric(horizontal: 28),
+          return InkWell(
-                  leading: const Icon(Icons.account_circle),
+            child: const Icon(Icons.account_circle).paddingAll(28),
-                  title: Text('guest'.tr),
-                  subtitle: Text('unsignedIn'.tr),
             onTap: () {
               AppRouter.instance.goNamed('account');
               _closeDrawer();
@@ -76,6 +57,54 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
         }
 
         return ListTile(
+          contentPadding: const EdgeInsets.symmetric(horizontal: 28),
+          leading: const Icon(Icons.account_circle),
+          title: !_isCollapsed ? Text('guest'.tr) : null,
+          subtitle: !_isCollapsed ? Text('unsignedIn'.tr) : null,
+          onTap: () {
+            AppRouter.instance.goNamed('account');
+            _closeDrawer();
+          },
+        );
+      }
+
+      final leading = Obx(() {
+        final statusBadgeColor = _accountStatus != null
+            ? StatusProvider.determineStatus(
+                _accountStatus!,
+              ).$2
+            : Colors.grey;
+
+        final RelationshipProvider relations = Get.find();
+        final accountNotifications = relations.friendRequestCount.value;
+
+        return badges.Badge(
+          badgeContent: Text(
+            accountNotifications.toString(),
+            style: const TextStyle(color: Colors.white),
+          ),
+          showBadge: accountNotifications > 0,
+          position: badges.BadgePosition.topEnd(
+            top: -10,
+            end: -6,
+          ),
+          child: badges.Badge(
+            showBadge: _accountStatus != null,
+            badgeStyle: badges.BadgeStyle(badgeColor: statusBadgeColor),
+            position: badges.BadgePosition.bottomEnd(
+              bottom: 0,
+              end: -2,
+            ),
+            child: AccountAvatar(
+              content: auth.userProfile.value!['avatar'],
+            ),
+          ),
+        );
+      });
+
+      return InkWell(
+        child: !_isCollapsed
+            ? ListTile(
                 contentPadding: const EdgeInsets.only(left: 20, right: 20),
                 title: Text(
                   auth.userProfile.value!['nick'],
@@ -97,41 +126,9 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
                     );
                   },
                 ),
-                leading: Obx(() {
+                leading: leading,
-                  final statusBadgeColor = _accountStatus != null
+              )
-                      ? StatusProvider.determineStatus(
+            : leading.paddingAll(20),
-                          _accountStatus!,
-                        ).$2
-                      : Colors.grey;
-
-                  final RelationshipProvider relations = Get.find();
-                  final accountNotifications =
-                      relations.friendRequestCount.value;
-
-                  return badges.Badge(
-                    badgeContent: Text(
-                      accountNotifications.toString(),
-                      style: const TextStyle(color: Colors.white),
-                    ),
-                    showBadge: accountNotifications > 0,
-                    position: badges.BadgePosition.topEnd(
-                      top: -10,
-                      end: -6,
-                    ),
-                    child: badges.Badge(
-                      showBadge: _accountStatus != null,
-                      badgeStyle:
-                          badges.BadgeStyle(badgeColor: statusBadgeColor),
-                      position: badges.BadgePosition.bottomEnd(
-                        bottom: 0,
-                        end: -2,
-                      ),
-                      child: AccountAvatar(
-                        content: auth.userProfile.value!['avatar'],
-                      ),
-                    ),
-                  );
-                }),
         onTap: () {
           AppRouter.instance.goNamed('account');
           _closeDrawer();
@@ -148,17 +145,51 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
           });
         },
       );
-            }).paddingSymmetric(vertical: 8),
+    });
+  }
+
+  void _closeDrawer() {
+    rootScaffoldKey.currentState!.closeDrawer();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _getStatus();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      width: _isCollapsed ? 80 : null,
+      backgroundColor:
+          SolianTheme.isLargeScreen(context) ? Colors.transparent : null,
+      child: SafeArea(
+        bottom: false,
+        child: Column(
+          children: [
+            _buildUserInfo().paddingSymmetric(vertical: 8),
             const Divider(thickness: 0.3, height: 1),
             Column(
               children: AppNavigation.destinations
                   .map(
-                    (e) => ListTile(
+                    (e) => _isCollapsed
+                        ? InkWell(
+                            child: Icon(e.icon, size: 22).paddingSymmetric(
+                              horizontal: 28,
+                              vertical: 16,
+                            ),
+                            onTap: () {
+                              AppRouter.instance.goNamed(e.page);
+                              _closeDrawer();
+                            },
+                          )
+                        : ListTile(
                             contentPadding: const EdgeInsets.symmetric(
                               horizontal: 20,
                             ),
                             leading: Icon(e.icon, size: 20).paddingAll(2),
-                      title: Text(e.label),
+                            title: !_isCollapsed ? Text(e.label) : null,
                             enabled: true,
                             onTap: () {
                               AppRouter.instance.goNamed(e.page);
@@ -167,10 +198,11 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
                           ),
                   )
                   .toList(),
-            ).paddingSymmetric(vertical: 8),
+            ),
             const Divider(thickness: 0.3, height: 1),
             Expanded(
               child: AppNavigationRegions(
+                isCollapsed: _isCollapsed,
                 onSelected: (item) {
                   _closeDrawer();
                 },
@@ -179,12 +211,25 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
             const Divider(thickness: 0.3, height: 1),
             Column(
               children: [
-                ListTile(
+                _isCollapsed
+                    ? InkWell(
+                        child: const Icon(Icons.settings, size: 22)
+                            .paddingSymmetric(
+                          horizontal: 28,
+                          vertical: 16,
+                        ),
+                        onTap: () {
+                          AppRouter.instance.pushNamed('settings');
+                          _closeDrawer();
+                        },
+                      )
+                    : ListTile(
                         minTileHeight: 0,
                         contentPadding: const EdgeInsets.symmetric(
                           horizontal: 20,
                         ),
-                  leading: const Icon(Icons.settings, size: 20).paddingAll(2),
+                        leading:
+                            const Icon(Icons.settings, size: 20).paddingAll(2),
                         title: Text('settings'.tr),
                         onTap: () {
                           AppRouter.instance.pushNamed('settings');

lib/widgets/navigation/app_navigation_regions.dart

@@ -6,9 +6,14 @@ import 'package:solian/router.dart';
 import 'package:collection/collection.dart';
 
 class AppNavigationRegions extends StatelessWidget {
+  final bool isCollapsed;
   final Function(Channel item) onSelected;
 
-  const AppNavigationRegions({super.key, required this.onSelected});
+  const AppNavigationRegions({
+    super.key,
+    required this.onSelected,
+    this.isCollapsed = false,
+  });
 
   void _gotoChannel(Channel item) {
     AppRouter.instance.pushReplacementNamed(
@@ -25,6 +30,16 @@ class AppNavigationRegions extends StatelessWidget {
   Widget _buildEntry(BuildContext context, Channel item) {
     const padding = EdgeInsets.symmetric(horizontal: 20);
 
+    if (isCollapsed) {
+      return InkWell(
+        child: const Icon(Icons.tag_outlined).paddingSymmetric(
+          horizontal: 20,
+          vertical: 16,
+        ),
+        onTap: () => _gotoChannel(item),
+      );
+    }
+
     return ListTile(
       minTileHeight: 0,
       leading: const Icon(Icons.tag_outlined),
@@ -51,6 +66,24 @@ class AppNavigationRegions extends StatelessWidget {
           .where((x) => x.type == 0 && x.realmId != null)
           .toList();
 
+      if (isCollapsed) {
+        return CustomScrollView(
+          slivers: [
+            const SliverPadding(padding: EdgeInsets.only(top: 8)),
+            SliverList.builder(
+              itemCount:
+                  noRealmGroupChannels.length + hasRealmGroupChannels.length,
+              itemBuilder: (context, index) {
+                final element = index >= noRealmGroupChannels.length
+                    ? hasRealmGroupChannels[index - noRealmGroupChannels.length]
+                    : noRealmGroupChannels[index];
+                return _buildEntry(context, element);
+              },
+            ),
+          ],
+        );
+      }
+
       return CustomScrollView(
         slivers: [
           const SliverPadding(padding: EdgeInsets.only(top: 8)),