use navigation rail instead of listview

ui/lib/APIs.dart

@@ -1,4 +1,6 @@
 class APIs {
   static const _baseUrl = "http://127.0.0.1:8080";
   static const searchUrl = "$_baseUrl/api/v1/tv/search";
+
+  static const tmdbImgBaseUrl = "https://image.tmdb.org/t/p/w500/";
 }

ui/lib/main.dart

@@ -88,12 +88,13 @@ class _MyHomePageState extends State<MyHomePage> {
         // the App.build method, and use it to set our appbar title.
         title: Text(widget.title),
       ),
-      body: const Center(
+      body: Center(
           // Center is a layout widget. It takes a single child and positions it
           // in the middle of the parent.
           child: Row(
         children: <Widget>[
           NavDrawer(),
+          const VerticalDivider(thickness: 1, width: 1),
           SearchPage(),
         ],
       )),

ui/lib/navdrawer.dart

@@ -1,41 +1,55 @@
 import 'package:flutter/material.dart';
 
 class NavDrawer extends StatelessWidget {
-  const NavDrawer({super.key});
+  var _counter = 0;
 
   @override
   Widget build(BuildContext context) {
-    return Drawer(
-      child: ListView(
-        padding: EdgeInsets.zero,
-        children: <Widget>[
-          ListTile(
-            leading: const Icon(Icons.input),
-            title: const Text('Welcome'),
-            onTap: () => {},
-          ),
-          ListTile(
-            leading: const Icon(Icons.verified_user),
-            title: const Text('Profile'),
-            onTap: () => {Navigator.of(context).pop()},
-          ),
-          ListTile(
-            leading: const Icon(Icons.settings),
-            title: const Text('Settings'),
-            onTap: () => {Navigator.of(context).pop()},
-          ),
-          ListTile(
-            leading: const Icon(Icons.border_color),
-            title: const Text('Feedback'),
-            onTap: () => {Navigator.of(context).pop()},
-          ),
-          ListTile(
-            leading: const Icon(Icons.exit_to_app),
-            title: const Text('Logout'),
-            onTap: () => {Navigator.of(context).pop()},
-          ),
-        ],
-      ),
-    );
+    return ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: 300),
+        child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Flexible(
+                  child: NavigationRail(
+                selectedIndex: _counter,
+                onDestinationSelected: (value) {},
+                extended: MediaQuery.of(context).size.width >= 850,
+                unselectedIconTheme: const IconThemeData(color: Colors.grey),
+                destinations: const <NavigationRailDestination>[
+                  NavigationRailDestination(
+                    icon: Icon(Icons.search),
+                    label: Text('Buscar '),
+                  ),
+                  NavigationRailDestination(
+                    icon: Icon(Icons.engineering),
+                    label: Text('Ingeniería '),
+                  ),
+                  NavigationRailDestination(
+                    icon: Icon(Icons.business),
+                    label: Text('Sociales '),
+                  ),
+                  NavigationRailDestination(
+                    icon: Icon(Icons.local_hospital),
+                    label: Text('Salud'),
+                  ),
+                  NavigationRailDestination(
+                    icon: Icon(Icons.school),
+                    label: Text('Iniciales'),
+                  ),
+                  NavigationRailDestination(
+                    icon: Icon(Icons.design_services),
+                    label: Text('Talleres y Extracurriculares'),
+                  ),
+                ],
+                selectedLabelTextStyle:
+                    TextStyle(color: Colors.lightBlue, fontSize: 20),
+                unselectedLabelTextStyle:
+                    TextStyle(color: Colors.grey, fontSize: 18),
+                groupAlignment: -1,
+                minWidth: 56,
+              ))
+            ]));
   }
 }

ui/lib/search.dart

@@ -13,7 +13,6 @@ class SearchPage extends StatefulWidget {
 
 class _SearchPageState extends State<SearchPage> {
   List<dynamic> list = List.empty();
-  final tmdbImgBaseUrl = "https://image.tmdb.org/t/p/w500/";
 
   void _queryResults(String q) async {
     final dio = Dio();
@@ -52,7 +51,7 @@ class _SearchPageState extends State<SearchPage> {
                     width: 150,
                     height: 200,
                     child: Image.network(
-                      tmdbImgBaseUrl + m["poster_path"],
+                      APIs.tmdbImgBaseUrl + m["poster_path"],
                       fit: BoxFit.contain,
                     ),
                   ),