From fefeabf8fab979f5917e6bf39fd7ffbdefb0b151 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Fri, 1 Dec 2023 22:52:27 +0300
Subject: [PATCH] Made the navbar not collapse on mobile.

---
 frontend/src/App.vue                    |  1 -
 frontend/src/components/Page-Header.vue | 31 ++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b88c63b6..4ac225e9 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -95,7 +95,6 @@ onMounted(() => {
       return;
     }
 
-    toast.info('Download cleared: ' + completed[id]?.title);
     delete completed[id];
   });
 
diff --git a/frontend/src/components/Page-Header.vue b/frontend/src/components/Page-Header.vue
index d6a8b7fa..72dada60 100644
--- a/frontend/src/components/Page-Header.vue
+++ b/frontend/src/components/Page-Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar is-dark">
+  <nav class="navbar is-mobile is-dark">
     <div class="navbar-brand pl-5">
       <a class="navbar-item" href="#">
         <b>YTPTube</b>
@@ -101,3 +101,32 @@ watch(selectedTheme, (value) => {
 })
 
 </script>
+
+<style scoped>
+.navbar-item {
+  display: flex;
+}
+
+.navbar,
+.navbar-menu,
+.navbar-start,
+.navbar-end {
+  align-items: stretch;
+  display: flex;
+  padding: 0;
+}
+.navbar-menu {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.navbar-start {
+  justify-content: flex-start;
+  margin-right: auto;
+}
+
+.navbar-end {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+</style>