Made sidebar permanent

src/client/lib/src/pages/home.dart

@@ -15,12 +15,12 @@ class HomePage extends ReactiveWidget<HomeModel> {
     appBar: AppBar(title: const Text("Counter")),
     body: Row(
       children: [
-        AnimatedContainer(
-          duration: Durations.short4,
-          width: model.shouldShowMarkers ? 300 : 0,
+        SizedBox(
+          width: 300,
           child: Sidebar(model),
         ),
         Expanded(
+          child: Card(
             child: Column(
               children: [
                 LatLongEditor(
@@ -77,6 +77,7 @@ class HomePage extends ReactiveWidget<HomeModel> {
               ],
             ),
           ),
+        ),
       ],
     ),
   );

src/client/lib/src/widgets/lat_long_editor.dart

@@ -45,14 +45,14 @@ class LatLongEditor extends StatelessWidget {
             ),
           ),
         ),
-        if (isShowingMarkers) IconButton(
-          icon: const Icon(Icons.location_on),
+        const SizedBox(width: 8),
+        if (isShowingMarkers) TextButton(
           onPressed: hideMarkers,
-          tooltip: "Hide stops on map",
-        ) else IconButton(
-          icon: const Icon(Icons.location_off),
+          child: const Text("Cancel"),
+        ) else TextButton.icon(
+          icon: const Icon(Icons.location_on),
           onPressed: showMarkers,
-          tooltip: "Show stops on map",
+          label: const Text("Pick on map"),
         ),
       ],
     ),

src/client/lib/src/widgets/sidebar.dart

@@ -10,9 +10,9 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
     length: 2,
     child: Card(
       clipBehavior: Clip.hardEdge,
-      elevation: 8,
       child: Column(
         children: [
+          const SizedBox(height: 16),
           Text(
             "Select routes",
             maxLines: 1,
@@ -26,31 +26,29 @@ class Sidebar extends ReusableReactiveWidget<HomeModel> {
             textAlign: TextAlign.center,
           ),
           const SizedBox(height: 8),
-          TabBar(
+          if (model.shouldShowMarkers) TabBar(
             tabs: [
               for (final (provider, _) in model.providers)
                 Tab(text: provider),
             ],
           ),
           Expanded(
-            child: TabBarView(
+            child: !model.shouldShowMarkers
+              ? const Center(child: Text("Choose start or end location"))
+              : TabBarView(
                   children: [
                     for (final (_, routesList) in model.providers)
                       ListView(
                         children: [
-                      for (final route in routesList) ListTile(
+                          for (final route in routesList) CheckboxListTile(
                             title: Text(route, maxLines: 1),
                             subtitle: Text(
                               "${model.stopCounts[route] ?? 0} stops",
                               maxLines: 1,
                             ),
-                        // Can't use CheckboxListTile, since we must remove the
-                        // checkboxes manually to prevent layour errors
-                        trailing: !model.shouldShowMarkers ? null : Checkbox(
                             value: model.routesToShow.contains(route),
                             onChanged: (value) => model.showRoute(route, shouldShow: value!),
                           ),
-                      ),
                         ],
                       ),
                   ],