forked from Qortal/qortal-ui
Browse Source
Implented in app-view.js for hide it auto after choosed a plugin on small resolutions.q-apps
AlphaX-Projects
2 years ago
committed by
GitHub
1 changed files with 0 additions and 250 deletions
@ -1,250 +0,0 @@
|
||||
import { LitElement, html, css } from 'lit'; |
||||
import { connect } from 'pwa-helpers'; |
||||
import { store } from '../store.js'; |
||||
import { translate, translateUnsafeHTML } from 'lit-translate'; |
||||
|
||||
import '@polymer/paper-ripple'; |
||||
import '@vaadin/icon'; |
||||
import '@vaadin/icons'; |
||||
|
||||
import '../functional-components/side-menu.js'; |
||||
import '../functional-components/side-menu-item.js'; |
||||
import './start-minting.js' |
||||
|
||||
class SidenavMenu extends connect(store)(LitElement) { |
||||
static get properties() { |
||||
return { |
||||
config: { type: Object }, |
||||
urls: { type: Object }, |
||||
nodeType: { type: String, reflect: true }, |
||||
theme: { type: String, reflect: true }, |
||||
addressInfo: { type: Object } |
||||
}; |
||||
} |
||||
|
||||
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); |
||||
} |
||||
|
||||
.s-menu { |
||||
list-style: none; |
||||
padding: 0px 0px; |
||||
background: var(--sidetopbar); |
||||
border-radius: 2px; |
||||
width: 100%; |
||||
border-top: 1px solid var(--border); |
||||
outline: none; |
||||
} |
||||
`,
|
||||
]; |
||||
} |
||||
|
||||
constructor() { |
||||
super(); |
||||
this.urls = []; |
||||
this.nodeType = ''; |
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light'; |
||||
this.addressInfo = {}; |
||||
} |
||||
|
||||
render() { |
||||
return html` |
||||
<div class="s-menu"> |
||||
<side-menu> |
||||
${this.renderNodeTypeMenu()} |
||||
</side-menu> |
||||
</div> |
||||
`;
|
||||
} |
||||
|
||||
firstUpdated() { |
||||
this.getNodeType(); |
||||
} |
||||
|
||||
async getNodeType() { |
||||
const myNode = |
||||
store.getState().app.nodeConfig.knownNodes[ |
||||
store.getState().app.nodeConfig.node |
||||
]; |
||||
const nodeUrl = |
||||
myNode.protocol + '://' + myNode.domain + ':' + myNode.port; |
||||
const url = `${nodeUrl}/admin/info`; |
||||
await fetch(url) |
||||
.then((response) => { |
||||
return response.json(); |
||||
}) |
||||
.then((data) => { |
||||
this.nodeType = data.type; |
||||
}) |
||||
.catch((err) => { |
||||
console.error('Request failed', err); |
||||
}); |
||||
} |
||||
|
||||
renderNodeTypeMenu() { |
||||
const addressInfo = this.addressInfo; |
||||
const isMinter = addressInfo?.error !== 124 && +addressInfo?.level > 0; |
||||
const isSponsor = +addressInfo?.level >= 5 |
||||
|
||||
if (this.nodeType === 'lite') { |
||||
return html` |
||||
<side-menu-item |
||||
label="${translate('sidemenu.wallets')}" |
||||
href="/app/wallet" |
||||
selected |
||||
> |
||||
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.nameregistration')}" |
||||
href="/app/name-registration" |
||||
> |
||||
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.datamanagement')}" |
||||
href="/app/data-management" |
||||
> |
||||
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.qchat')}" |
||||
href="/app/q-chat" |
||||
> |
||||
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
${this.renderNodeManagement()} |
||||
`;
|
||||
} else { |
||||
return html` |
||||
<side-menu-item |
||||
label="${translate('sidemenu.minting')}" |
||||
expanded |
||||
> |
||||
<vaadin-icon icon="vaadin:info-circle" slot="icon"></vaadin-icon> |
||||
<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> |
||||
<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> |
||||
|
||||
<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')}" |
||||
href="/app/wallet" |
||||
selected |
||||
> |
||||
<vaadin-icon icon="vaadin:wallet" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item label="${translate('sidemenu.trading')}" expanded> |
||||
<vaadin-icon icon="vaadin:cash" slot="icon"></vaadin-icon> |
||||
<side-menu-item label="${translate('sidemenu.tradeportal')}" href="/app/trade-portal"> |
||||
<vaadin-icon icon="vaadin:bullets" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item label="${translate('tradepage.tchange46')}" href="/app/trade-bot-portal"> |
||||
<vaadin-icon icon="vaadin:calc-book" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.rewardshare')}" |
||||
href="/app/reward-share" |
||||
> |
||||
<vaadin-icon icon="vaadin:share-square" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.qchat')}" |
||||
href="/app/q-chat" |
||||
> |
||||
<vaadin-icon icon="vaadin:chat" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.nameregistration')}" |
||||
href="/app/name-registration" |
||||
> |
||||
<vaadin-icon icon="vaadin:user-check" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.websites')}" |
||||
href="/app/websites" |
||||
> |
||||
<vaadin-icon icon="vaadin:desktop" slot="icon" ></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item label="${translate('sidemenu.groups')}" href="/app/group-management"> |
||||
<vaadin-icon icon="vaadin:group" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.puzzles')}" |
||||
href="/app/puzzles" |
||||
> |
||||
<vaadin-icon icon="vaadin:puzzle-piece" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.management')}" |
||||
expanded |
||||
> |
||||
<vaadin-icon icon="vaadin:cogs" slot="icon"></vaadin-icon> |
||||
<side-menu-item |
||||
label="${translate('sidemenu.datamanagement')}" |
||||
href="/app/data-management" |
||||
> |
||||
<vaadin-icon icon="vaadin:database" slot="icon"></vaadin-icon> |
||||
</side-menu-item> |
||||
${this.renderNodeManagement()} |
||||
</side-menu-item> |
||||
<div> |
||||
<start-minting></start-minting> |
||||
</div> |
||||
`;
|
||||
} |
||||
} |
||||
|
||||
renderNodeManagement() { |
||||
const checkNodeManagement = store.getState().app.nodeConfig.knownNodes[store.getState().app.nodeConfig.node]; |
||||
if ((checkNodeManagement.enableManagement = true)) { |
||||
return html` |
||||
<side-menu-item |
||||
label="${translate('sidemenu.nodemanagement')}" |
||||
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; |
||||
this.addressInfo = state.app.accountInfo.addressInfo; |
||||
} |
||||
} |
||||
|
||||
window.customElements.define('sidenav-menu', SidenavMenu); |
Loading…
Reference in new issue