#406 keyboard shortcut to show/hide sidebar

packages/web/src/widgets/WidgetContainer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { selectedWidget } from '../stores';
+  import { visibleSelectedWidget } from '../stores';
   import ArchiveWidget from './ArchiveWidget.svelte';
   import DatabaseWidget from './DatabaseWidget.svelte';
   import FilesWidget from './FilesWidget.svelte';
@@ -9,23 +9,23 @@
   import AppWidget from './AppWidget.svelte';
 </script>
 
-<DatabaseWidget hidden={$selectedWidget != 'database'} />
+<DatabaseWidget hidden={$visibleSelectedWidget != 'database'} />
 
-{#if $selectedWidget == 'file'}
+{#if $visibleSelectedWidget == 'file'}
   <FilesWidget />
 {/if}
-{#if $selectedWidget == 'history'}
+{#if $visibleSelectedWidget == 'history'}
   <HistoryWidget />
 {/if}
-{#if $selectedWidget == 'archive'}
+{#if $visibleSelectedWidget == 'archive'}
   <ArchiveWidget />
 {/if}
-{#if $selectedWidget == 'plugins'}
+{#if $visibleSelectedWidget == 'plugins'}
   <PluginsWidget />
 {/if}
-{#if $selectedWidget == 'cell-data'}
+{#if $visibleSelectedWidget == 'cell-data'}
   <CellDataWidget />
 {/if}
-{#if $selectedWidget == 'app'}
+{#if $visibleSelectedWidget == 'app'}
   <AppWidget />
 {/if}

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleHamburgerMenuWidget } from '../stores';
+  import {
+    currentDropDownMenu,
+    selectedWidget,
+    visibleSelectedWidget,
+    visibleWidgetSideBar,
+    visibleHamburgerMenuWidget,
+  } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import { useConfig } from '../utility/metadataLoaders';
   import hasPermission from '../utility/hasPermission';
@@ -60,7 +66,12 @@
   ];
 
   function handleChangeWidget(name) {
-    $selectedWidget = name == $selectedWidget ? null : name;
+    if ($visibleSelectedWidget == name) {
+      $visibleWidgetSideBar = false;
+    } else {
+      $selectedWidget = name;
+      $visibleWidgetSideBar = true;
+    }
   }
   //const handleChangeWidget= e => (selectedWidget.set(item.name))
 
@@ -90,7 +101,11 @@
     </div>
   {/if}
   {#each widgets.filter(x => hasPermission(`widgets/${x.name}`)) as item}
-    <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
+    <div
+      class="wrapper"
+      class:selected={item.name == $visibleSelectedWidget}
+      on:click={() => handleChangeWidget(item.name)}
+    >
       <FontIcon icon={item.icon} title={item.title} />
     </div>
   {/each}