Show submenu headers

dashboard/src/components/SideBarItem.vue

@@ -144,7 +144,10 @@ function onBackdrop(event) {
     <teleport to="#app">
       <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isMenuOpen"></div>
       <div v-show="isMenuOpen" ref="subMenuElement" class="sidebar-item-menu">
-        <div v-for="(item, index) in childItems" :key="item" :class="{ 'sidebar-item-menu-anchor': subMenuFlipped ? index === childItems.length-1 : index === 0 }">
+        <div :class="{ 'sidebar-item-menu-anchor': !subMenuFlipped }">
+          <span class="sidebar-item-header">{{ label }}</span>
+        </div>
+        <div v-for="(item, index) in childItems" :key="item" :class="{ 'sidebar-item-menu-anchor': subMenuFlipped && index === childItems.length-1 }">
           <hr v-if="item.separator"/>
           <a v-else class="sidebar-item" :href="item.route" @click="close()"><i :class="item.icon"></i> {{ item.label }}</a>
         </div>
@@ -191,6 +194,16 @@ function onBackdrop(event) {
   background-color: #e9ecef;
 }
 
+.sidebar-item-header {
+  display: block;
+  font-weight: bold;
+  color: var(--pankow-text-color);
+  padding: 10px 15px;
+  white-space: nowrap;
+  border-bottom: 1px solid #d8dee4;
+  border-radius: 0;
+}
+
 .sidebar-item {
   display: block;
   color: var(--pankow-text-color);
@@ -198,7 +211,6 @@ function onBackdrop(event) {
   padding: 10px 15px;
   white-space: nowrap;
   cursor: pointer;
-  transition: all 180ms ease-out;
 }
 
 .sidebar-item i {