feat(sdk,client): add menu to help navigation between apps

pkg/sdk/client/src/components/menu-sub-item.ts

@@ -0,0 +1,63 @@
+import { LitElement, html, css } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LinkIcon } from './icons';
+
+export class MenuSubItem extends LitElement {
+    @property({ attribute: 'label' })
+    label: string;
+
+    @property({ attribute: 'icon-url' })
+    iconUrl: string;
+
+    @property({ attribute: 'link-url' })
+    linkUrl: string;
+
+    @property({ attribute: 'inactive', type: Boolean })
+    inactive: boolean;
+
+    static styles = css`
+    :host {
+        display: block;
+        flex: 1;
+        cursor: pointer;
+        transition: all 100ms ease-out;
+        border-bottom: 1px solid rgb(229,231,235);
+        padding: 5px 0 5px 7px;
+        border-left: 5px solid transparent;
+    }
+    :host([inactive]) {
+        cursor: initial;
+    }
+    :host(:hover) {
+        border-left: 5px solid #03A9F4;
+        background-color: rgb(28 169 247 / 10%);
+    }
+    a {
+        font-size: 20px;
+        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+        text-decoration: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        height: 40px;
+        color: black;
+    }
+    .edge-menu-sub-item-icon {
+        height: 25px;
+        width: 25px;
+    }
+    .edge-menu-sub-item-label {
+        margin-left: 5px;
+    }
+    `;
+
+    render() {
+        return html`
+            <a href="${this.linkUrl ? this.linkUrl : '#'}">
+            <img class="edge-menu-sub-item-icon" src="${this.iconUrl ? this.iconUrl : LinkIcon}" />
+                <span class="edge-menu-sub-item-label">${this.label}</span>
+            </a>
+        `
+    }
+}