useLeftSidebarCollapse.ts 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import { ref } from 'vue'
  2. const isCollapsed = ref(false)
  3. const isCollapsedByToggle = ref(false)
  4. function syncCollapsedFromDom() {
  5. if (typeof document === 'undefined') return
  6. const leftWindow = document.querySelector('uni-left-window')
  7. isCollapsed.value = leftWindow?.classList.contains('collapsed') ?? false
  8. isCollapsedByToggle.value = isCollapsed.value
  9. }
  10. function toggleLeftSidebar(isFromToggle = true) {
  11. isCollapsed.value = !isCollapsed.value
  12. if (isFromToggle) {
  13. isCollapsedByToggle.value = isCollapsed.value
  14. }
  15. const leftWindow = document.querySelector('uni-left-window')
  16. const content = document.querySelector('uni-content')
  17. if (!leftWindow || !content) return
  18. if (isCollapsed.value) {
  19. leftWindow.classList.add('collapsed')
  20. content.classList.add('collapsed')
  21. } else {
  22. leftWindow.classList.remove('collapsed')
  23. content.classList.remove('collapsed')
  24. }
  25. }
  26. export function useLeftSidebarCollapse() {
  27. return {
  28. isCollapsed,
  29. isCollapsedByToggle,
  30. toggleLeftSidebar,
  31. syncCollapsedFromDom,
  32. }
  33. }