chore: Follow up preserve state in 3 column mode

lib/config/routes.dart

@@ -210,48 +210,45 @@ class AppRoutes {
                     ),
                   ],
                 ),
-                GoRoute(
-                  path: ':roomid',
-                  pageBuilder: (context, state) => defaultPageBuilder(
+                ShellRoute(
+                  pageBuilder: (context, state, child) => defaultPageBuilder(
                     context,
-                    ChatPage(
-                      roomId: state.pathParameters['roomid']!,
+                    SideViewLayout(
+                      mainView: ChatPage(
+                        roomId: state.pathParameters['roomid']!,
+                      ),
+                      sideView:
+                          state.fullPath == '/rooms/:roomid' ? null : child,
                     ),
                   ),
-                  redirect: (context, state) => !isLoggedIn ? '/home' : null,
                   routes: [
                     GoRoute(
-                      path: 'encryption',
-                      pageBuilder: (context, state) => defaultPageBuilder(
-                        context,
-                        const ChatEncryptionSettings(),
-                      ),
-                      redirect: (context, state) =>
-                          !isLoggedIn ? '/home' : null,
-                    ),
-                    GoRoute(
-                      path: 'invite',
+                      path: ':roomid',
                       pageBuilder: (context, state) => defaultPageBuilder(
                         context,
-                        const InvitationSelection(),
+                        const EmptyPage(),
                       ),
                       redirect: (context, state) =>
                           !isLoggedIn ? '/home' : null,
-                    ),
-                    ShellRoute(
-                      pageBuilder: (context, state, child) =>
-                          defaultPageBuilder(
-                        context,
-                        !FluffyThemes.isThreeColumnMode(context)
-                            ? child
-                            : SideViewLayout(
-                                mainView: ChatPage(
-                                  roomId: state.pathParameters['roomid']!,
-                                ),
-                                sideView: child,
-                              ),
-                      ),
                       routes: [
+                        GoRoute(
+                          path: 'encryption',
+                          pageBuilder: (context, state) => defaultPageBuilder(
+                            context,
+                            const ChatEncryptionSettings(),
+                          ),
+                          redirect: (context, state) =>
+                              !isLoggedIn ? '/home' : null,
+                        ),
+                        GoRoute(
+                          path: 'invite',
+                          pageBuilder: (context, state) => defaultPageBuilder(
+                            context,
+                            const InvitationSelection(),
+                          ),
+                          redirect: (context, state) =>
+                              !isLoggedIn ? '/home' : null,
+                        ),
                         GoRoute(
                           path: 'details',
                           pageBuilder: (context, state) => defaultPageBuilder(

lib/widgets/layouts/side_view_layout.dart

@@ -13,28 +13,45 @@ class SideViewLayout extends StatelessWidget {
     final sideView = this.sideView;
     final hideSideView =
         !FluffyThemes.isThreeColumnMode(context) || sideView == null;
-    return sideView == null
-        ? mainView
-        : hideSideView
-            ? sideView
-            : Row(
-                children: [
-                  Expanded(
-                    child: ClipRRect(child: mainView),
-                  ),
-                  Container(
-                    width: 1.0,
-                    color: Theme.of(context).dividerColor,
-                  ),
-                  AnimatedContainer(
-                    duration: FluffyThemes.animationDuration,
-                    curve: FluffyThemes.animationCurve,
-                    clipBehavior: Clip.antiAlias,
-                    decoration: const BoxDecoration(),
-                    width: hideSideView ? 0 : 360.0,
-                    child: hideSideView ? null : sideView,
-                  ),
-                ],
-              );
+    const sideViewWidth = 360.0;
+    return Stack(
+      children: [
+        AnimatedPositioned(
+          duration: FluffyThemes.animationDuration,
+          curve: FluffyThemes.animationCurve,
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: hideSideView ? 0 : sideViewWidth,
+          child: ClipRRect(child: mainView),
+        ),
+        AnimatedPositioned(
+          duration: FluffyThemes.animationDuration,
+          curve: FluffyThemes.animationCurve,
+          bottom: 0,
+          top: 0,
+          right: 0,
+          left: !FluffyThemes.isThreeColumnMode(context) && sideView != null
+              ? 0
+              : null,
+          width: sideView == null
+              ? 0
+              : !FluffyThemes.isThreeColumnMode(context)
+                  ? null
+                  : sideViewWidth,
+          child: Container(
+            clipBehavior: Clip.hardEdge,
+            decoration: BoxDecoration(
+              border: Border(
+                left: BorderSide(
+                  color: Theme.of(context).dividerColor,
+                ),
+              ),
+            ),
+            child: sideView,
+          ),
+        ),
+      ],
+    );
   }
 }