From b19f7120bd966ccab658b194346929f617470470 Mon Sep 17 00:00:00 2001
From: AlphaX-Projects <77661270+AlphaX-Projects@users.noreply.github.com>
Date: Thu, 10 Mar 2022 21:28:27 +0100
Subject: [PATCH] new menu

---
 qortal-ui-core/src/components/sidenav-menu.js | 351 ++++++------------
 1 file changed, 111 insertions(+), 240 deletions(-)

diff --git a/qortal-ui-core/src/components/sidenav-menu.js b/qortal-ui-core/src/components/sidenav-menu.js
index af78ab4d..f0ca27e3 100644
--- a/qortal-ui-core/src/components/sidenav-menu.js
+++ b/qortal-ui-core/src/components/sidenav-menu.js
@@ -1,259 +1,130 @@
 import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../store.js'
+import { doLogout } from '../redux/app/actions/login'
 
 import '@material/mwc-icon'
 import '@polymer/paper-ripple'
-import { doLogout } from '../redux/app/actions/login'
+import '@vaadin/icon'
+import '@vaadin/icons'
+
+import '../functional-components/side-menu.js'
+import '../functional-components/side-menu-item.js'
 
 class SidenavMenu extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      config: { type: Object },
-      urls: { type: Object }
+    static get properties() {
+        return {
+            config: { type: Object },
+            urls: { type: Object }
+        }
     }
-  }
 
-  static get styles() {
-    return [
-      css`
-        .mcd-menu {
-          list-style: none;
-          padding: 0px 0px;
-          background:  var(--sidetopbar);
-          border-radius: 2px;
-          width: 100%;
-          outline: none;
-        }
+    static get styles() {
+        return [
+            css`
+                * {
+                    --item-selected-color: var(--nav-selected-color);
+                    --item-selected-color-text: var(--nav-selected-color-text);
+                    --item-color-active: var(--nav-color-active);
+                    --item-color-hover: var(--nav-color-hover);
+                    --item-text-color: var(--nav-text-color);
+                    --item-icon-color: var(--nav-icon-color);
+                    --item-border-color: var(--nav-border-color);
+                    --item-border-selected-color: var(--nav-border-selected-color);
+                }
 
-        .mcd-menu li {
-          position: relative;
-          line-height: 48px;
-          outline: none;
-          padding: 2px;
-          list-style: none;
-        }
+                .s-menu {
+                    list-style: none;
+                    padding: 0px 0px;
+                    background:  var(--sidetopbar);
+                    border-radius: 2px;
+                    width: 100%;
+                    border-top: 1px solid var(--border);
+                    outline: none;
+                }
+            `
+        ]
+    }
 
-        .mcd-menu li a {
-          display: block;
-          text-decoration: none;
-          padding-left: 20px;
-          color: var(--mainmenutext);
-          text-align: left;
-          height: 48px;
-          position: relative;
-          border-bottom: 1px solid var(--border);
-          outline: none;
-        }
+    constructor() {
+        super()
+        this.urls = []
+    }
 
-        .mcd-menu li a mwc-icon {  
-          float: left;
-          margin: 0 10px 0 0;
-          padding-top: 12px;
-          padding-right: 9px;
-        }
-
-        .mcd-menu li a span {
-          display: block;
-          text-transform: uppercase;
-          outline: none;
-        }
-
-        .mcd-menu li a small {
-          display: block;
-          font-size: 10px;
-          outline: none;
-        }
-
-        .mcd-menu li:hover > a mwc-icon {
-            opacity: 1;
-        }
-
-        .mcd-menu li:hover a span {
-            opacity: 1;
-            outline: none;
-        }
-
-        .mcd-menu li:hover > a {
-            background: var(--menuhover);
-            color: var(--mainmenutexthover);
-        }
-
-        .mcd-menu li a.active {
-          position: relative;
-          color: #515151;
-          background-color: var(--menuactive);
-          outline: none;
-        }
-
-        .mcd-menu li a.active:before {
-          content: "";
-          position: absolute;
-          top: 42%;
-          left: 0;
-          border-left: 5px solid #515151;
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li a.active:after {
-          content: "";
-          position: absolute;
-          top: 42%;
-          right: 0;
-          border-right: 5px solid #515151;
-          border-top: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li ul,
-        .mcd-menu li ul li ul {
-          position: absolute;
-          height: auto;
-          min-width: 240px;
-          padding: 0;
-          margin: 0;
-          background: #FFF;
-          opacity: 0;
-          visibility: hidden;
-          transition: all 300ms linear;
-          -o-transition: all 300ms linear;
-          -ms-transition: all 300ms linear;
-          -moz-transition: all 300ms linear;
-          -webkit-transition: all 300ms linear;
-          z-index: 999999999;
-          left:280px;
-          top: 0px;
-          border-left: 4px solid #515151;
-          outline: none;
-        }
-
-        .mcd-menu li ul:before {
-          content: "";
-          position: absolute;
-          top: 25px;
-          left: -9px;
-          border-right: 5px solid #515151;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li:hover > ul,
-        .mcd-menu li ul li:hover > ul {
-          display: block;
-          opacity: 1;
-          visibility: visible;
-          left:260px;
-          outline: none;
-        }
-
-        .mcd-menu li ul li a {
-          text-align: left;
-          border: 0;
-          border-bottom: 1px solid var(--border);
-          height: auto;
-          outline: none;
-        }
-
-        .mcd-menu li ul li a mwc-icon {
-          display: inline-block;
-          margin: 0 10px 0 0;
-        }
-
-        .mcd-menu li ul li ul {
-          left: 230px;
-          top: 0;
-          border: 0;
-          border-left: 4px solid #515151;
-          outline: none;
-        }
-
-        .mcd-menu li ul li ul:before {
-          content: "";
-          position: absolute;
-          top: 15px;
-          left: -9px;
-          border-right: 5px solid #515151;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          outline: none;
-        }
-
-        .mcd-menu li ul li:hover > ul {
-          top: 0px;
-          left: 200px;
-          outline: none;
-        }
-      `
-    ]
-  }
-
-  constructor() {
-    super()
-    this.urls = []
-  }
-
-  render() {
-    return html`
-            <div>
-                <ul class="mcd-menu">
-                    ${this.urls.map(myPlugin => myPlugin.menus.length === 0 ? html`
-                        <li>
-                            <paper-ripple></paper-ripple>
-                            <a href="/app/${myPlugin.url}">
-                                <mwc-icon>${myPlugin.icon}</mwc-icon>
-                                <span>${myPlugin.title}</span>
-                            </a>
-                        </li>
-                    ` : html`
-                        <li>
-                            <paper-ripple></paper-ripple>
-                            <a href="/app/${myPlugin.url}">
-                                <mwc-icon>${myPlugin.icon}</mwc-icon>
-                                <span>${myPlugin.title}</span>
-                            </a>
-                            
-                            <ul>
-                                ${myPlugin.menus.map(myMenu => html`
-                                    <li>
-                                        <paper-ripple></paper-ripple>
-                                        <a href="/app/${myMenu.url}">
-                                            <mwc-icon>${myMenu.icon}</mwc-icon>
-                                            <span>${myMenu.title}</span>
-                                        </a>
-                                    </li>
-                                `)}
-                            </ul>
-                        </li>
-                    `)}
-                  <li @click=${ e => this.logout(e)}>
-                    <a href="javascript:void(0)">
-                      <mwc-icon>exit_to_app</mwc-icon>
-                      <span>LOGOUT</span>
-                    </a>
-                  </li>
-                </ul>
+    render() {
+        return html`
+            <div class="s-menu">
+                <side-menu>
+                    <side-menu-item label="MINTING DETAILS" href="/app/minting">
+                        <vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="WALLETS" href="/app/wallet" selected>
+                        <vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="SEND COIN" href="/app/send-coin">
+                        <vaadin-icon icon="vaadin:coin-piles" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="TRADE PORTAL" href="/app/trade-portal">
+                        <vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="REWARD SHARE" href="/app/reward-share">
+                        <vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="NAME REGISTRATION" href="/app/name-registration">
+                        <vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="WEBSITES" href="/app/websites">
+                        <vaadin-icon icon="vaadin:desktop" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="DATA MANAGEMENT" href="/app/data-management">
+                        <vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="Q-CHAT" href="/app/q-chat">
+                        <vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="GROUP MANAGEMENT" href="/app/group-management">
+                        <vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    <side-menu-item label="PUZZLES" href="/app/puzzles">
+                        <vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                    ${this.renderNodeManagement()}
+                    <side-menu-item label="LOGOUT" href="javascript:void(0)" @click=${ e => this.logout(e)}>
+                        <vaadin-icon icon="vaadin:sign-out" slot="icon"></vaadin-icon>
+                    </side-menu-item>
+                </side-menu>
             </div>
         `
-  }
-
-  firstUpdated() {
-    // ...
-  }
-
-  stateChanged(state) {
-    this.config = state.config
-    this.urls = state.app.registeredUrls
-  }
-
-  async logout(e) {
-    if(window.confirm('Are you sure you want to logout?')) {
-      store.dispatch(doLogout());
     }
-  }
+
+    firstUpdated() {
+        // ...
+    }
+
+    renderNodeManagement() {
+        const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]
+        if (checkNodeManagement.enableManagement = true) {
+            return html`
+                <side-menu-item label="NODE MANAGEMENT" href="/app/node-management">
+                    <vaadin-icon icon="vaadin:cloud" slot="icon"></vaadin-icon>
+                </side-menu-item>
+            `
+        } else {
+            return html`
+            `
+        }
+    }
+
+    stateChanged(state) {
+        this.config = state.config
+        this.urls = state.app.registeredUrls
+    }
+
+    async logout(e) {
+        if(window.confirm('Are you sure you want to logout?')) {
+            store.dispatch(doLogout());
+        }
+    }
 }
 
 window.customElements.define('sidenav-menu', SidenavMenu)