fix: sidebar toggling on mobile

resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue

@@ -13,7 +13,7 @@
         >
           <Icon :icon="faHome" fixed-width />
         </a>
-        <SearchForm />
+        <SearchForm class="flex-1" />
       </section>
 
       <section v-koel-overflow-fade class="pt-2 pb-10 overflow-y-auto space-y-8">
@@ -91,7 +91,10 @@ onRouteChanged(_ => (mobileShowing.value = false))
  * Listen to toggle sidebar event to show or hide the sidebar.
  * This should only be triggered on a mobile device.
  */
-eventBus.on('TOGGLE_SIDEBAR', () => (mobileShowing.value = !mobileShowing.value))
+eventBus.on('TOGGLE_SIDEBAR', () => {
+  console.log(mobileShowing.value)
+  mobileShowing.value = !mobileShowing.value
+})
 </script>
 
 <style lang="postcss" scoped>

resources/assets/js/components/ui/SidebarMenuToggleButton.vue

@@ -1,14 +1,24 @@
 <template>
-  <ExtraDrawerButton class="block md:hidden" @click.prevent.stop="toggleSidebar">
-    <Icon :icon="faBars" />
+  <ExtraDrawerButton class="block md:hidden" @click.prevent="toggleSidebar">
+    <Icon :icon="faTimes" v-if="sidebarExpanded" fixed-width />
+    <Icon :icon="faBars" v-else fixed-width />
   </ExtraDrawerButton>
 </template>
 
 <script lang="ts" setup>
-import { faBars } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { eventBus } from '@/utils'
 
 import ExtraDrawerButton from '@/components/layout/main-wrapper/extra-drawer/ExtraDrawerButton.vue'
+import { ref } from 'vue'
 
-const toggleSidebar = () => eventBus.emit('TOGGLE_SIDEBAR')
+const sidebarExpanded = ref(false)
+
+const toggleSidebar = () => {
+  // Since the sidebar will be hidden if we click outside the menu anyway, we don't actually need
+  // to emit the event to collapse it. We just need to toggle the state to show the
+  // icon accordingly.
+  if (!sidebarExpanded.value) eventBus.emit('TOGGLE_SIDEBAR')
+  sidebarExpanded.value = !sidebarExpanded.value
+}
 </script>