feat: collapse sidebar

Author: codewec

app/components/editoro/MainHeader.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { EditorPinnedBadge, SaveStatusColor } from '~/types/editoro'
 
+const { t } = useI18n()
+
 const props = defineProps<{
+  showExpandSidebarButton: boolean
   editorModeLabel: string
   editorModeIcon: string
   editorModeTooltip: string
@@ -14,6 +17,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
+  expandSidebar: []
   toggleMode: []
   selectBadge: [path: string]
   togglePin: [path: string]
@@ -24,6 +28,16 @@ const emit = defineEmits<{
 
 <template>
   <header class="editoro-main-header">
+    <UButton
+      v-if="props.showExpandSidebarButton"
+      size="xs"
+      color="neutral"
+      variant="soft"
+      icon="i-lucide-panel-left-open"
+      :aria-label="t('sidebar.expand')"
+      @click="emit('expandSidebar')"
+    />
+
     <EditoroHeaderModeToggle
       :label="props.editorModeLabel"
       :icon="props.editorModeIcon"

app/components/editoro/Sidebar.vue

@@ -35,6 +35,7 @@ const emit = defineEmits<{
   treeDragLeave: []
   refresh: []
   toggleHidden: []
+  collapse: []
   openSettings: []
   closeSettings: []
   changeLocale: [value: string]
@@ -77,6 +78,15 @@ const {
       </h1>
 
       <div class="editoro-actions">
+        <UButton
+          icon="i-lucide-panel-left-close"
+          size="xs"
+          color="neutral"
+          variant="soft"
+          :aria-label="t('sidebar.collapse')"
+          @click="emit('collapse')"
+        />
+
         <UButton
           icon="i-lucide-settings-2"
           size="xs"

app/components/editoro/Workspace.vue

@@ -37,6 +37,7 @@ const {
 <template>
   <div class="editoro-layout">
     <EditoroSidebar
+      v-if="!editoro.ui.isSidebarCollapsed.value"
       v-model:selected-node="selectedNode"
       v-model:expanded-tree-paths="expandedPaths"
       v-bind="sidebarProps"
@@ -47,6 +48,7 @@ const {
       @close-settings="sidebarHandlers.closeSettings"
       @change-locale="sidebarHandlers.changeLocale"
       @change-color-mode="sidebarHandlers.changeColorMode"
+      @collapse="sidebarHandlers.collapse"
       @sidebar-resize-start="sidebarHandlers.sidebarResizeStart"
       @root-drop="sidebarHandlers.rootDrop"
       @tree-drag-start="sidebarHandlers.treeDragStart"
@@ -59,6 +61,8 @@ const {
     <main class="editoro-main">
       <EditoroMainHeader
         v-bind="mainHeaderProps"
+        :show-expand-sidebar-button="editoro.ui.isSidebarCollapsed.value"
+        @expand-sidebar="mainHeaderHandlers.expandSidebar"
         @toggle-mode="mainHeaderHandlers.toggleMode"
         @select-badge="mainHeaderHandlers.selectBadge"
         @toggle-pin="mainHeaderHandlers.togglePin"

app/composables/api/buildUiApi.ts

@@ -10,6 +10,7 @@ export function buildUiApi(options: BuildEditoroApiOptions) {
 
   return {
     sidebarWidth: uiRefs.sidebarWidth,
+    isSidebarCollapsed: uiRefs.isSidebarCollapsed,
     minSidebarWidth: uiStore.minSidebarWidth,
     maxSidebarWidth: uiStore.maxSidebarWidth,
     createModalOpen: uiRefs.createModalOpen,
@@ -18,6 +19,9 @@ export function buildUiApi(options: BuildEditoroApiOptions) {
     renameModalOpen: uiRefs.renameModalOpen,
     renameInputName: uiRefs.renameInputName,
     deleteModalOpen: uiRefs.deleteModalOpen,
-    onSidebarResizeStart: uiStore.onSidebarResizeStart
+    onSidebarResizeStart: uiStore.onSidebarResizeStart,
+    collapseSidebar: uiStore.collapseSidebar,
+    expandSidebar: uiStore.expandSidebar,
+    toggleSidebarCollapsed: uiStore.toggleSidebarCollapsed
   }
 }

app/composables/workspace/useEditoroMainHeaderBindings.ts

@@ -2,10 +2,12 @@
  * Prepares main-header props and handlers for `Workspace.vue`.
  * Used by `app/composables/useEditoroWorkspaceBindings.ts`.
  */
+import { unref } from 'vue'
 import type { EditoroState } from '~/composables/workspace/types'
 
 export function useEditoroMainHeaderBindings(state: EditoroState) {
   const mainHeaderProps = computed(() => ({
+    showExpandSidebarButton: unref(state.ui.isSidebarCollapsed),
     editorModeLabel: state.editor.modeLabel.value,
     editorModeIcon: state.editor.modeIcon.value,
     editorModeTooltip: state.editor.modeTooltip.value,
@@ -18,6 +20,7 @@ export function useEditoroMainHeaderBindings(state: EditoroState) {
   }))
 
   const mainHeaderHandlers = {
+    expandSidebar: state.ui.expandSidebar,
     toggleMode: state.editor.toggleMode,
     selectBadge: (path: string) => {
       if (!path) {

app/composables/workspace/useEditoroSidebarBindings.ts

@@ -29,6 +29,7 @@ export function useEditoroSidebarBindings(state: EditoroState) {
     closeSettings: state.settings.closeModal,
     changeLocale: state.settings.setLocale,
     changeColorMode: state.settings.setColorMode,
+    collapse: state.ui.collapseSidebar,
     sidebarResizeStart: state.ui.onSidebarResizeStart,
     rootDrop: state.tree.onRootDrop,
     treeDragStart: state.tree.onDragStart,

app/stores/editoroUi.ts

@@ -20,10 +20,33 @@ function parseSidebarWidth(raw: string | undefined) {
   return clampSidebarWidth(parsed)
 }
 
+function parseCollapsedState(raw: unknown) {
+  if (!raw) {
+    return false
+  }
+
+  if (typeof raw === 'boolean') {
+    return raw
+  }
+
+  if (typeof raw === 'number') {
+    return raw === 1
+  }
+
+  if (typeof raw !== 'string') {
+    return false
+  }
+
+  const normalized = raw.trim().toLowerCase()
+  return normalized === '1' || normalized === 'true' || normalized === 'yes'
+}
+
 export const useEditoroUiStore = defineStore('editoro-ui', () => {
   const sidebarWidthCookie = useCookie<string>('editoro.sidebar.width', { path: '/', sameSite: 'lax' })
+  const sidebarCollapsedCookie = useCookie<string>('editoro.sidebar.collapsed', { path: '/', sameSite: 'lax' })
 
   const sidebarWidth = ref(parseSidebarWidth(sidebarWidthCookie.value))
+  const isSidebarCollapsed = ref(parseCollapsedState(sidebarCollapsedCookie.value))
   const isResizingSidebar = ref(false)
   const sidebarResizeStartX = ref(0)
   const sidebarResizeStartWidth = ref(sidebarWidth.value)
@@ -59,7 +82,7 @@ export const useEditoroUiStore = defineStore('editoro-ui', () => {
   }
 
   function onSidebarResizeStart(event: MouseEvent) {
-    if (!import.meta.client) {
+    if (!import.meta.client || isSidebarCollapsed.value) {
       return
     }
 
@@ -72,6 +95,24 @@ export const useEditoroUiStore = defineStore('editoro-ui', () => {
     window.addEventListener('mouseup', stopSidebarResize)
   }
 
+  function collapseSidebar() {
+    stopSidebarResize()
+    isSidebarCollapsed.value = true
+  }
+
+  function expandSidebar() {
+    isSidebarCollapsed.value = false
+  }
+
+  function toggleSidebarCollapsed() {
+    if (isSidebarCollapsed.value) {
+      expandSidebar()
+      return
+    }
+
+    collapseSidebar()
+  }
+
   function openCreateModal(type: CreateTargetType) {
     createTargetType.value = type
     createInputPath.value = ''
@@ -103,10 +144,15 @@ export const useEditoroUiStore = defineStore('editoro-ui', () => {
     sidebarWidthCookie.value = String(clampSidebarWidth(value))
   })
 
+  watch(isSidebarCollapsed, (value) => {
+    sidebarCollapsedCookie.value = value ? '1' : '0'
+  }, { immediate: true })
+
   return {
     minSidebarWidth: MIN_SIDEBAR_WIDTH,
     maxSidebarWidth: MAX_SIDEBAR_WIDTH,
     sidebarWidth,
+    isSidebarCollapsed,
     createModalOpen,
     createTargetType,
     createInputPath,
@@ -115,6 +161,9 @@ export const useEditoroUiStore = defineStore('editoro-ui', () => {
     deleteModalOpen,
     onSidebarResizeStart,
     stopSidebarResize,
+    collapseSidebar,
+    expandSidebar,
+    toggleSidebarCollapsed,
     openCreateModal,
     closeCreateModal,
     openRenameModal,

i18n/locales/en.json

@@ -16,7 +16,9 @@
     "createFolder": "Create folder",
     "loadingTree": "Loading tree...",
     "moveToRoot": "Drop here to move to root",
-    "settings": "Settings"
+    "settings": "Settings",
+    "collapse": "Collapse sidebar",
+    "expand": "Expand sidebar"
   },
   "settings": {
     "title": "Settings",

i18n/locales/ru.json

@@ -16,7 +16,9 @@
     "createFolder": "Создать папку",
     "loadingTree": "Загрузка дерева...",
     "moveToRoot": "Перетащите сюда для перемещения в корень",
-    "settings": "Настройки"
+    "settings": "Настройки",
+    "collapse": "Свернуть боковую панель",
+    "expand": "Развернуть боковую панель"
   },
   "settings": {
     "title": "Настройки",