⚡ Many big improvments to items + sections

src/components/Workspace/SideBar.vue

@@ -1,6 +1,7 @@
 <template>
   <nav class="side-bar">
     <div v-for="(section, index) in sections" :key="index" class="side-bar-section">
+      <!-- Section button -->
       <div @click="openSection(index)" class="side-bar-item-container">
         <SideBarItem
           class="item"
@@ -8,6 +9,7 @@
           :title="section.name"
         />
       </div>
+      <!-- Section inner -->
       <transition name="slide">
         <SideBarSection
           v-if="isOpen[index]"
@@ -16,6 +18,7 @@
         />
       </transition>
     </div>
+    <!-- Show links for switching back to Home / Minimal views -->
     <div class="switch-view-buttons">
       <router-link to="/home">
         <IconHome class="view-icon" v-tooltip="$t('alternate-views.default')" />
@@ -66,8 +69,12 @@ export default {
       if (!this.initUrl) return;
       const process = (url) => (url ? url.replace(/[^\w\s]/gi, '').toLowerCase() : undefined);
       const compare = (item) => (process(item.url) === process(this.initUrl));
-      this.sections.forEach((section, secIndex) => {
-        if (section.items && section.items.findIndex(compare) !== -1) this.openSection(secIndex);
+      this.sections.forEach((section, secIndx) => {
+        if (!section.items) return; // Cancel if no items
+        if (section.items.findIndex(compare) !== -1) this.openSection(secIndx);
+        section.items.forEach((item) => { // Do the same for sub-items, if set
+          if (item.subItems && item.subItems.findIndex(compare) !== -1) this.openSection(secIndx);
+        });
       });
     },
   },

src/components/Workspace/SideBarSection.vue

@@ -2,6 +2,7 @@
   <div class="sub-side-bar">
     <div v-for="(item, index) in items" :key="index">
       <SideBarItem
+        v-if="!item.subItems"
         class="item"
         :icon="item.icon"
         :title="item.title"
@@ -9,6 +10,18 @@
         :target="item.target"
         @launch-app="launchApp"
       />
+      <div v-if="item.subItems" class="sub-item-group">
+        <SideBarItem
+          v-for="(subItem, subIndex) in item.subItems"
+          :key="subIndex"
+          class="item sub-item"
+          :icon="subItem.icon"
+          :title="subItem.title"
+          :url="subItem.url"
+          :target="subItem.target"
+          @launch-app="launchApp"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -46,8 +59,10 @@ div.sub-side-bar {
   color: var(--side-bar-color);
   text-align: center;
   z-index: 3;
-  .item:not(:last-child) {
-    border-bottom: 1px dashed var(--side-bar-color);
+  .sub-item-group {
+    border: 1px dotted var(--side-bar-color);
+    border-radius: 4px;
+    background: #00000033;
   }
 }
 

src/components/Workspace/WidgetView.vue

@@ -33,7 +33,7 @@ export default {
   width: calc(100% - var(--side-bar-width));
   .workspace-widget {
     max-width: 800px;
-    margin: 0 auto;
+    margin: 0.5rem auto 1rem auto;
   }
 }
 </style>