From cdca3946841359f60840bea1151b0aff490d778f Mon Sep 17 00:00:00 2001
From: Phillip Lang Martinez <philliplangmartinez@gmail.com>
Date: Fri, 2 Sep 2022 00:21:38 +0300
Subject: [PATCH] change condition to hide item instead of full comp

---
 qortal-ui-core/src/components/sidenav-menu.js | 19 ++++++++++---------
 .../side-menu-item-style.js                   |  3 +++
 .../functional-components/side-menu-item.js   |  5 ++++-
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/qortal-ui-core/src/components/sidenav-menu.js b/qortal-ui-core/src/components/sidenav-menu.js
index 77651aa8..67fcdaa4 100644
--- a/qortal-ui-core/src/components/sidenav-menu.js
+++ b/qortal-ui-core/src/components/sidenav-menu.js
@@ -74,7 +74,7 @@ class SidenavMenu extends connect(store)(LitElement) {
 	async getNodeType() {
 		const myNode =
 			store.getState().app.nodeConfig.knownNodes[
-				store.getState().app.nodeConfig.node
+			store.getState().app.nodeConfig.node
 			];
 		const nodeUrl =
 			myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@@ -132,28 +132,29 @@ class SidenavMenu extends connect(store)(LitElement) {
 					expanded
 				>
 					<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
-					${isMinter
-						? html`<side-menu-item
+					<side-menu-item
 								label="${translate('sidemenu.mintingdetails')}"
 								href="/app/minting"
+								?hide=${!isMinter}
 						  >
 								<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon>
-						</side-menu-item>`
-						: html`<side-menu-item
+						</side-menu-item>
+					<side-menu-item
 								label="${translate('sidemenu.becomeAMinter')}"
 								href="/app/become-minter"
+								?hide=${isMinter}
 						  >
 								<vaadin-icon icon="vaadin:thumbs-up" slot="icon"></vaadin-icon>
-						</side-menu-item>`
-                              }
-					${isSponsor ? html`
+						</side-menu-item>
+				
 					<side-menu-item
 						label="${translate('mintingpage.mchange35')}"
 						href="/app/sponsorship-list"
+						?hide=${!isSponsor}
 					>
 						<vaadin-icon icon="vaadin:list-ol" slot="icon"></vaadin-icon>
 					</side-menu-item>
-					` : ''}
+			
 				</side-menu-item>
 				<side-menu-item
 					label="${translate('sidemenu.wallets')}"
diff --git a/qortal-ui-core/src/functional-components/side-menu-item-style.js b/qortal-ui-core/src/functional-components/side-menu-item-style.js
index 4f956bc9..e30386ce 100644
--- a/qortal-ui-core/src/functional-components/side-menu-item-style.js
+++ b/qortal-ui-core/src/functional-components/side-menu-item-style.js
@@ -47,6 +47,9 @@ export const sideMenuItemStyle = css`
     border-bottom: 1px solid var(--item-border-color);
     text-transform: uppercase;
   }
+  .hideItem {
+    display: none !important;
+  }
 
   #itemLink:hover {
     background-color: var(--item-color-hover);
diff --git a/qortal-ui-core/src/functional-components/side-menu-item.js b/qortal-ui-core/src/functional-components/side-menu-item.js
index 8c869e5c..ad0ac02e 100644
--- a/qortal-ui-core/src/functional-components/side-menu-item.js
+++ b/qortal-ui-core/src/functional-components/side-menu-item.js
@@ -13,7 +13,8 @@ export class SideMenuItem extends LitElement {
             expanded: { type: Boolean, reflect: true },
             compact: { type: Boolean, reflect: true },
             href: { type: String, reflect: true },
-            target: { type: String, reflect: true }
+            target: { type: String, reflect: true },
+            hide: { type: Boolean }
         }
     }
 
@@ -27,6 +28,7 @@ export class SideMenuItem extends LitElement {
         super()
         this.selected = false
         this.expanded = false
+        this.hide = false
     }
 
     render() {
@@ -53,6 +55,7 @@ export class SideMenuItem extends LitElement {
                 href=${this.href || '#!'}
                 @click="${(e) => this._onClick(e)}"
                 target=${ifDefined(this.target)}
+                class=${this.hide ? 'hideItem' : ''}
             >
                 <slot class="icon" name="icon"></slot>
                 <div id ="content">