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(

src/composables/element/useResponsiveCollapse.ts

@@ -0,0 +1,41 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+type BreakpointKey = keyof typeof breakpointsTailwind
+
+/**
+ * Composable for element with responsive collapsed state
+ * @param breakpointThreshold - Breakpoint at which the element should become collapsible
+ */
+export const useResponsiveCollapse = (
+  breakpointThreshold: BreakpointKey = 'lg'
+) => {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+
+  const isSmallScreen = breakpoints.smallerOrEqual(breakpointThreshold)
+  const isOpen = ref(!isSmallScreen.value)
+
+  /**
+   * Handles screen size changes to automatically open/close the element
+   * when crossing the breakpoint threshold
+   */
+  const onIsSmallScreenChange = () => {
+    if (isSmallScreen.value && isOpen.value) {
+      isOpen.value = false
+    } else if (!isSmallScreen.value && !isOpen.value) {
+      isOpen.value = true
+    }
+  }
+
+  watch(isSmallScreen, onIsSmallScreenChange)
+
+  return {
+    breakpoints,
+    isOpen,
+    isSmallScreen,
+
+    open: () => (isOpen.value = true),
+    close: () => (isOpen.value = false),
+    toggle: () => (isOpen.value = !isOpen.value)
+  }
+}