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>