chore: improve navbar

Author: mateof

TelegramDownloader/Pages/_Host.cshtml

@@ -6,3 +6,4 @@
 }
 
 <component type="typeof(App)" render-mode="ServerPrerendered" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />

TelegramDownloader/Shared/MainLayout.razor

@@ -35,7 +35,7 @@
     </div>
 
     <main>
-        <div class="top-row px-4">
+        <div class="top-row px-4 d-flex">
             @if(active) {
                 @if (tis.isUploading())
                 {

TelegramDownloader/Shared/MainLayout.razor.css

@@ -45,7 +45,7 @@ main {
     }
 }
 
-@media (min-width: 641px) {
+@media (min-width: 2048px) { /*641*/
     .page {
         flex-direction: row;
     }

TelegramDownloader/Shared/NavMenu.razor

@@ -11,7 +11,7 @@
 @inject IJSRuntime JS;
 
 <style>
-    @@media (max-width: 1024px) {
+    @@media (max-width: 1024px), (orientation: portrait) {
         .collapse.navbar-collapse {
             display: none !important;
         }

TelegramDownloader/Shared/NavMenu.razor.css

@@ -50,7 +50,7 @@
     color: white;
 }
 
-@media (min-width: 641px) {
+@media (min-width: 2048px) {
     .navbar-toggler {
         display: none;
     }
@@ -65,4 +65,10 @@
     overflow-y: auto;
     height: 94vh;
     overflow-x: hidden;
+}
+
+@media (min-width: 768px) and (max-width: 2048px) {
+    .navbar-toggler {
+        display: block !important; /* mostrar botón hamburguesa */
+    }
 }

TelegramDownloader/wwwroot/css/site.css

@@ -105,4 +105,14 @@ a, .btn-link {
 
 .download-btn {
     margin-bottom: 2% !important;
-}
+}
+
+/*@media (min-width: 768px) and (max-width: 1024px) {
+    .sidebar {
+        display: none;
+    }
+
+    .content {
+        width: 100%;
+    }
+}*/