refactor(frontend): Separate split container into its own widget

frontend/lib/ui/pages/home/home_page.dart

@@ -3,6 +3,7 @@ import 'package:get/get.dart';
 
 import '../../../router.dart';
 import '../../../services/session_service.dart';
+import '../../templates/two_slot_container.dart';
 import '../starred/starred_page.dart';
 import '../tags/tags_page.dart';
 import 'widgets/sidebar.dart';
@@ -18,49 +19,35 @@ class HomePage extends GetView<HomeController> {
     return GetX(
       init: controller,
       builder: (_) => Scaffold(
-        body: Row(
-          mainAxisSize: MainAxisSize.max,
-          children: [
-            _buildSidebar(context),
-            Expanded(
-              child: _buildPage(),
-            )
-          ],
+        body: SafeArea(
+          child: TwoSlotContainer(
+            leftSlot: _buildSidebar(context),
+            rightSlot: _buildPage(),
+          ),
         ),
       ),
     );
   }
 
   Widget _buildSidebar(BuildContext context) {
-    final theme = Theme.of(context);
     final currentRoute = controller.currentRoute;
 
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        border: Border(
-          right: BorderSide(
-            color: theme.dividerColor,
-            width: 1,
-          ),
+    return Sidebar(
+      onLogout: controller.onLogout,
+      content: [
+        SideBarButton(
+          icon: const Icon(Icons.star_border),
+          label: const Text('Starred repos'),
+          selected: currentRoute.value == 0,
+          onPressed: () => currentRoute.value = 0,
         ),
-      ),
-      child: Sidebar(
-        content: [
-          SideBarButton(
-            icon: const Icon(Icons.star_border),
-            label: const Text('Starred repos'),
-            selected: currentRoute.value == 0,
-            onPressed: () => currentRoute.value = 0,
-          ),
-          SideBarButton(
-            icon: const Icon(Icons.label_outline),
-            label: const Text('Tags'),
-            selected: currentRoute.value == 1,
-            onPressed: () => currentRoute.value = 1,
-          ),
-        ],
-        onLogout: controller.onLogout,
-      ),
+        SideBarButton(
+          icon: const Icon(Icons.label_outline),
+          label: const Text('Tags'),
+          selected: currentRoute.value == 1,
+          onPressed: () => currentRoute.value = 1,
+        ),
+      ],
     );
   }
 

frontend/lib/ui/templates/two_slot_container.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+/// Renders a two slot (left, right) container
+class TwoSlotContainer extends StatelessWidget {
+  const TwoSlotContainer({
+    Key key,
+    @required this.leftSlot,
+    @required this.rightSlot,
+    this.leftWidth = 275,
+  }) : super(key: key);
+
+  /// Amount of space taken by left container
+  final double leftWidth;
+
+  /// Left container takes the [leftWidth] space
+  /// left container is also rendered with a right border
+  /// with thickness defined by [dividerTheme]
+  final Widget leftSlot;
+
+  /// Left container takes available space left by the [leftSlot]
+  final Widget rightSlot;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Row(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        DecoratedBox(
+          decoration: BoxDecoration(
+            border: Border(
+              right: BorderSide(
+                color: theme.dividerColor,
+                width: theme.dividerTheme.thickness ?? 1,
+              ),
+            ),
+          ),
+          child: SizedBox(width: leftWidth, child: leftSlot),
+        ),
+        Expanded(child: rightSlot)
+      ],
+    );
+  }
+}