feat(planner): add action for toggle button (#4986)

Signed-off-by: Eduard Aksamitov <[email protected]>

plugins/time-resources/src/components/PlanView.svelte

@@ -22,6 +22,7 @@
 
   const defaultDuration = 30 * 60 * 1000
   let replacedPanel: HTMLElement
+  let isVisiblePlannerNav: boolean = true
 
   let currentDate: Date = new Date()
 
@@ -67,18 +68,21 @@
 </script>
 
 {#if visibleNav}
-  <ToDosNavigator bind:mode bind:tag bind:currentDate {navFloat} {appsDirection} />
-  <Separator
-    name={'time'}
-    float={navFloat}
-    index={0}
-    disabledWhen={['panel-aside']}
-    color={'var(--theme-navpanel-border)'}
-  />
+  {#if isVisiblePlannerNav}
+    <ToDosNavigator bind:mode bind:tag bind:currentDate {navFloat} {appsDirection} />
+    <Separator
+      name={'time'}
+      float={navFloat}
+      index={0}
+      disabledWhen={['panel-aside']}
+      color={'var(--theme-navpanel-border)'}
+    />
+  {/if}
   <div class="flex-col clear-mins">
     <ToDos
       {mode}
       {tag}
+      bind:isVisiblePlannerNav
       bind:currentDate
       on:dragstart={(e) => (dragItem = e.detail)}
       on:dragend={() => (dragItem = undefined)}

plugins/time-resources/src/components/ToDos.svelte

@@ -6,19 +6,21 @@
   import { Scroller, areDatesEqual, todosSP, defaultSP, Header, ButtonIcon, Label } from '@hcengineering/ui'
   import { ToDo, WorkSlot } from '@hcengineering/time'
   import { ToDosMode } from '..'
-  import time from '../plugin'
   import { getNearest } from '../utils'
+  import MenuClose from './icons/MenuClose.svelte'
+  import MenuOpen from './icons/MenuOpen.svelte'
   import CreateToDo from './CreateToDo.svelte'
   import ToDoGroup from './ToDoGroup.svelte'
   import IconDiff from './icons/Diff.svelte'
+  import time from '../plugin'
   import tags, { TagElement } from '@hcengineering/tags'
-  import IconMenu from './icons/Menu.svelte'
   import tracker, { Project } from '@hcengineering/tracker'
   import view from '@hcengineering/view-resources/src/plugin'
 
   export let mode: ToDosMode
   export let tag: Ref<TagElement> | undefined
   export let currentDate: Date
+  export let isVisiblePlannerNav: boolean = true
 
   const acc = getCurrentAccount() as PersonAccount
   const user = acc.person
@@ -40,6 +42,10 @@
 
   $: updateTags(mode, tag)
 
+  function togglePlannerNav (): void {
+    isVisiblePlannerNav = !isVisiblePlannerNav
+  }
+
   function updateTags (mode: ToDosMode, tag: Ref<TagElement> | undefined): void {
     if (mode !== 'tag' || tag === undefined) {
       tagsQuery.unsubscribe()
@@ -258,7 +264,13 @@
 
 <div class="toDos-container">
   <Header type={'type-panel'} hideSeparator>
-    <ButtonIcon icon={IconMenu} kind={'tertiary'} size={'small'} />
+    <ButtonIcon
+      icon={isVisiblePlannerNav ? MenuClose : MenuOpen}
+      kind={'tertiary'}
+      size={'small'}
+      pressed={!isVisiblePlannerNav}
+      on:click={togglePlannerNav}
+    />
     <div class="heading-bold-20 ml-4">
       <Label label={time.string.ToDoColon} />
       {#if mode === 'date'}

plugins/time-resources/src/components/icons/MenuOpen.svelte

@@ -0,0 +1,25 @@
+<!--
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import type { IconSize } from '@hcengineering/ui'
+  export let size: IconSize = 'small'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path
+    d="M27 27a1 1 0 1 0 0-2H5a1 1 0 1 0 0 2zm0-10a1 1 0 1 0 0-2H17a1 1 0 1 0 0 2zm-14-1-5.3 5.3a.99.99 0 1 1-1.4-1.4l3.9-3.9-3.9-3.9a.99.99 0 1 1 1.4-1.4zM28 6a1 1 0 0 1-1 1H5a1 1 0 1 1 0-2h22a1 1 0 0 1 1 1"
+  />
+</svg>