fix: make menu hierarchy get closer to the original designs

ui/src/components/layout/SideBar.vue

@@ -258,25 +258,64 @@
             color: var(--ks-content-primary);
             box-shadow: none;
 
-            &_active, body &_active:hover, &:hover, &.vsm--link_hover, &.vsm--link_open {
+            &_active, body &_active:hover {
                 background-color: var(--ks-button-background-primary);
                 color: var(--ks-button-content-primary);
                 font-weight: normal;
             }
 
+            &.vsm--link_open, &.vsm--link_open:hover {
+                background-color: var(--ks-background-left-menu);
+                color: var(--ks-content-primary);
+            }
+
             &_disabled {
                 pointer-events: auto;
             }
 
             &:hover, body &_hover {
-                background-color: var(--ks-button-background-primary);
+                background-color: var(--ks-button-background-secondary-hover);
             }
 
             .el-tooltip__trigger {
                 display: flex;
             }
         }
 
+        .vsm--link_open{
+            position:relative !important;
+            z-index: 3;
+        }
+
+        .vsm--child .vsm--link{
+            padding: 0 0.2rem;
+            position: relative!important;
+            font-size: 14px;
+            margin-left: 1.8rem;
+            .vsm--icon {
+                margin-right:4px;
+                color: var(--ks-content-secondary);
+            }
+            &.vsm--link_active .vsm--icon{
+                color: var(--ks-button-content-primary);
+            }
+            &:before{
+                content: "";
+                position: absolute;
+                left: -.8rem;
+                top: -2.5rem;
+                border-radius: 8px;
+                width: 1.6rem;
+                height: 170%;
+                border: 2px solid var(--ks-border-primary);
+                border-top:0;
+                border-right:0;
+                z-index: 2;
+                // mask the right half of the object and the top border
+                clip-path: polygon(50% 8px, 50% 100%, 0 100%, 0 8px);
+            }
+        }
+
         .vsm--title span:first-child{
             flex-grow: 0;
         }

ui/tests/storybook/layout/SideBar.stories.jsx

@@ -0,0 +1,130 @@
+import {shallowRef} from "vue";
+import {vueRouter} from "storybook-vue3-router";
+import HomeIcon from "vue-material-design-icons/Home.vue";
+import ContentCopy from "vue-material-design-icons/ContentCopy.vue";
+import TimelineClockOutline from "vue-material-design-icons/TimelineClockOutline.vue";
+import CogOutline from "vue-material-design-icons/CogOutline.vue";
+import ViewDashboardVariantOutline from "vue-material-design-icons/ViewDashboardVariantOutline.vue";
+import ChartBoxOutline from "vue-material-design-icons/ChartBoxOutline.vue";
+import ShieldCheckOutline from "vue-material-design-icons/ShieldCheckOutline.vue";
+import ServerOutline from "vue-material-design-icons/ServerOutline.vue";
+import ShieldLockOutline from "vue-material-design-icons/ShieldLockOutline.vue"
+
+import SideBar from "../../../src/components/layout/SideBar.vue";
+
+
+export default {
+  title: "Layout/SideBar",
+  component: SideBar,
+  decorators: [
+    vueRouter([
+        {
+            path: "/",
+            name: "home",
+            component: {template: "div>home</div>"}
+        },
+          {
+            path: "/dashboard",
+            name: "dahsboard",
+            component: {template: "<div>dashboard</div>"}
+          },{
+            path: "/dashboard/:menu",
+            name: "dashboard/menu",
+            component: {template: "<div>/dashboard sub</div>"}
+          },
+          {
+            path: "/:graball/:menu?",
+            name: "graball",
+            component: {template: "<div>/dashboard sub</div>"}
+          },
+        ])
+  ]
+};
+
+const Template = (args) => ({
+  setup() {
+    return () => <SideBar {...args} />;
+  },
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  generateMenu: () => [
+    {
+      title: "Home",
+      href: "/",
+      icon: {
+        element: shallowRef(HomeIcon),
+        class: "menu-icon"
+        },
+    },
+    {
+        title: "Flows",
+        href: "/flows",
+        icon: {
+          element: shallowRef(ContentCopy),
+          class: "menu-icon"
+        },
+    },
+    {
+        title: "Executions",
+        href: "/executions",
+        icon: {
+          element: shallowRef(TimelineClockOutline),
+          class: "menu-icon"
+        },
+    },
+    {
+      title: "Dashboard",
+      href: "/dashboard",
+      icon: {
+        element: shallowRef(ViewDashboardVariantOutline),
+        class: "menu-icon"
+      },
+      child: [
+        {
+          title: "Submenu 1",
+          href: "/dashboard/submenu1",
+          icon: {
+            element: shallowRef(ShieldCheckOutline),
+            class: "menu-icon"
+          },
+        },
+        {
+          title: "Submenu 2",
+          href: "/dashboard/submenu2",
+          icon: {
+            element: shallowRef(ChartBoxOutline),
+            class: "menu-icon"
+          },
+        },
+      ],
+    },
+    {
+      title: "Settings",
+      href: "/settings",
+      icon: {
+        element: shallowRef(CogOutline),
+        class: "menu-icon"
+      },
+      child: [
+        {
+          title: "Submenu 1",
+          href: "/settings/submenu1",
+          icon: {
+            element: shallowRef(ShieldLockOutline),
+            class: "menu-icon"
+          },
+        },
+        {
+          title: "Submenu 2",
+          href: "/settings/submenu2",
+          icon: {
+            element: shallowRef(ServerOutline),
+            class: "menu-icon"
+          },
+        },
+      ]
+    },
+  ],
+};