Refactor responsive sidebar to composable (#2917)

src/components/templates/TemplateWorkflowsContent.vue

@@ -60,7 +60,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBreakpoints } from '@vueuse/core'
 import { useAsyncState } from '@vueuse/core'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
@@ -70,6 +69,7 @@ import { useI18n } from 'vue-i18n'
 
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
 import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
+import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -78,17 +78,11 @@ import type { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
 const { t } = useI18n()
 
-const breakpoints = useBreakpoints({
-  mobile: 0,
-  tablet: 768,
-  desktop: 1024
-})
-const isSmallScreen = breakpoints.between('mobile', 'desktop')
-const isSideNavOpen = ref(!isSmallScreen.value)
-const toggleSideNav = () => {
-  isSideNavOpen.value = !isSideNavOpen.value
-}
-watch(isSmallScreen, toggleSideNav)
+const {
+  isSmallScreen,
+  isOpen: isSideNavOpen,
+  toggle: toggleSideNav
+} = useResponsiveCollapse()
 
 const workflowTemplatesStore = useWorkflowTemplatesStore()
 const { isReady } = useAsyncState(