From 809a654cabcb4b36797ea91d3edbfc1b265424b1 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 2 Dec 2021 12:05:09 +0300
Subject: [PATCH] Show/hide navigator (#477)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ActivityStatus.svelte              |  2 +-
 .../workbench-resources/src/components/AppItem.svelte |  3 ++-
 .../src/components/Workbench.svelte                   | 11 +++++++++--
 .../src/components/icons/TopMenu.svelte               |  9 +++++++++
 4 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 plugins/workbench-resources/src/components/icons/TopMenu.svelte

diff --git a/plugins/workbench-resources/src/components/ActivityStatus.svelte b/plugins/workbench-resources/src/components/ActivityStatus.svelte
index b4a8a4eb30..447460d967 100644
--- a/plugins/workbench-resources/src/components/ActivityStatus.svelte
+++ b/plugins/workbench-resources/src/components/ActivityStatus.svelte
@@ -18,7 +18,7 @@
   export let status: string = 'away'
 </script>
 
-<div class="flex-center {status}" style="min-height: 5rem;">
+<div class="flex-center {status}" style="min-height: 2rem;">
   <div class="status"/>
 </div>
 
diff --git a/plugins/workbench-resources/src/components/AppItem.svelte b/plugins/workbench-resources/src/components/AppItem.svelte
index 302a962c73..eac8120340 100644
--- a/plugins/workbench-resources/src/components/AppItem.svelte
+++ b/plugins/workbench-resources/src/components/AppItem.svelte
@@ -15,10 +15,11 @@
 
 <script lang="ts">
   import type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
   import { Icon, Tooltip } from '@anticrm/ui'
 
   export let label: IntlString
-  export let icon: Asset
+  export let icon: Asset | AnySvelteComponent
   export let action: () => Promise<void>
   export let selected: boolean
   export let notify: boolean
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index ce4d60dae7..ebc1ec3764 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -32,6 +32,8 @@
   import { AnyComponent, Component, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui'
   import core from '@anticrm/core'
   import AccountPopup from './AccountPopup.svelte'
+  import AppItem from './AppItem.svelte'
+  import TopMenu from './icons/TopMenu.svelte'
 
   export let client: Client
 
@@ -75,6 +77,8 @@
 
   const query = createQuery()
   $: query.query(workbench.class.Application, { hidden: false }, result => { apps = result })
+
+  let visibileNav: boolean = true
 </script>
 
 {#if client}
@@ -88,7 +92,10 @@
   </svg>
   <div class="container">
     <div class="panel-app">
-      <ActivityStatus status="active"/>
+      <div class="flex-col">
+        <ActivityStatus status="active"/>
+        <AppItem icon={TopMenu} label={'Navigator'} selected={!visibileNav} action={async () => { visibileNav = !visibileNav }}/>
+      </div>
       <Applications {apps} active={currentApp}/>
       <div class="flex-center" style="min-height: 6.25rem;">
         <div class="cursor-pointer" on:click={(el) => { showPopup(AccountPopup, { }, 'account') }}>
@@ -96,7 +103,7 @@
         </div>
       </div>
     </div>
-    {#if navigator}
+    {#if navigator && visibileNav}
     <div class="panel-navigator">
       {#if currentApplication}
         <NavHeader label={currentApplication.label} action={() => {}} />
diff --git a/plugins/workbench-resources/src/components/icons/TopMenu.svelte b/plugins/workbench-resources/src/components/icons/TopMenu.svelte
new file mode 100644
index 0000000000..a9c2f4291a
--- /dev/null
+++ b/plugins/workbench-resources/src/components/icons/TopMenu.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3,9.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,8.4,21,8.4H3C2.7,8.4,2.4,8.7,2.4,9S2.7,9.6,3,9.6z"/>
+  <path d="M21,14.4H3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,14.4,21,14.4z"/>
+</svg>