left panel logic

packages/web-svelte/src/Screen.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import WidgetContainer from './widgets/WidgetContainer.svelte';
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
+  import { leftPanelWidth, selectedWidget } from './stores';
 </script>
 
 <div class="theme-dark">
@@ -7,6 +9,11 @@
     <WidgetIconPanel />
   </div>
   <div class="statusbar" />
+  {#if $selectedWidget}
+    <div class="leftpanel" style="width: {$leftPanelWidth}px">
+      <WidgetContainer />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -30,4 +37,12 @@
     right: 0;
     bottom: 0;
   }
+  .leftpanel {
+    position: fixed;
+    top: 0;
+    left: var(--widget-icon-size);
+    bottom: var(--statusbar-height);
+    background-color: var(--theme-left_background);
+    display: flex;
+  }
 </style>

packages/web-svelte/src/stores.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const selectedWidget = writable('database');
+export const leftPanelWidth = writable(300);

packages/web-svelte/src/widgets/DatabaseWidget.svelte

@@ -0,0 +1 @@
+<div></div>

packages/web-svelte/src/widgets/WidgetContainer.svelte

@@ -0,0 +1,10 @@
+<script>
+  import { selectedWidget } from '../stores';
+  import DatabaseWidget from './DatabaseWidget.svelte';
+
+
+</script>
+
+{#if $selectedWidget == 'database'}
+  <DatabaseWidget />
+{/if}

packages/web-svelte/src/widgets/WidgetIconPanel.svelte

@@ -1,7 +1,6 @@
 <script>
   import FontIcon from '../icons/FontIcon.svelte';
-
-  let selectedWidget = 'database';
+  import { selectedWidget } from '../stores';
 
   const widgets = [
     {
@@ -42,10 +41,15 @@
     //   name: 'settings',
     // },
   ];
+
+  function handleChangeWidget(name) {
+    selectedWidget.set(name == $selectedWidget ? null : name);
+  }
+  //const handleChangeWidget= e => (selectedWidget.set(item.name))
 </script>
 
 {#each widgets as item}
-  <div class="wrapper" class:selected={item.name == selectedWidget} on:click={e => (selectedWidget = item.name)}>
+  <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
     <FontIcon icon={item.icon} />
   </div>
 {/each}