FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed menu items

Browse Source
This commit is contained in:
Fran Jurmanović
2021-07-06 19:13:40 +02:00
parent 8084827e3c
commit 8288b572ea
5 changed files with 107 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/app-link/AppLinkElement.ts
View File

@@ -56,7 +56,7 @@ class AppLinkElement extends BaseComponentElement {
class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}" class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}"
data-target="app-link.main" data-target="app-link.main"
style="color:grey" style="color:grey"
>${this.title}</a ><span class="link-text">${this.title}</span></a
>` >`
: html`<a : html`<a
class="btn btn-link${this.className ? ` ${this.className}` : ''}" class="btn btn-link${this.className ? ` ${this.className}` : ''}"
@@ -64,7 +64,7 @@ class AppLinkElement extends BaseComponentElement {
app-action="click:app-link#goTo" app-action="click:app-link#goTo"
href="${this.to}" href="${this.to}"
style="text-decoration: underline; cursor: pointer;" style="text-decoration: underline; cursor: pointer;"
>${this.title}</a ><span class="link-text">${this.title}</span></a
>`}`; >`}`;
}; };
} }

38
src/components/app-menu/AppMenuElement.ts
View File

@@ -99,20 +99,24 @@ class AppMenuElement extends BaseComponentElement {
render = (): TemplateResult => { render = (): TemplateResult => {
const { isAuth, totalWallets, walletData } = this; const { isAuth, totalWallets, walletData } = this;
const regularMenu = (path: string, title: string, action?: string): TemplateResult => { const regularMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
if (action) { if (action) {
return html` <menu-item data-path="${path}" data-customaction="${action}">${title}</menu-item> `; return html`
<menu-item class="${className || ''}" data-path="${path}" data-customaction="${action}">${title}</menu-item>
`;
} }
return html`<menu-item data-path="${path}">${title}</menu-item>`; return html`<menu-item class="${className || ''}" data-path="${path}">${title}</menu-item>`;
}; };
const menuButton = (title: string, action?: string): TemplateResult => { const menuButton = (title: string, action?: string): TemplateResult => {
return html` <div class="menu-item --retract" data-target="menu-item.itemEl"> return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
<button class="btn btn-link" data-target="app-link.main" app-action="${action}">${title}</button> <button class="btn btn-link" data-target="app-link.main" app-action="${action}">
${title}<span class="pseudo"></span>
</button>
</div>`; </div>`;
}; };
const authMenu = (path: string, title: string, action?: string): TemplateResult => { const authMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => {
if (isAuth) { if (isAuth) {
return regularMenu(path, title, action); return regularMenu(path, title, action, className);
} }
return html``; return html``;
}; };
@@ -125,21 +129,25 @@ class AppMenuElement extends BaseComponentElement {
const renderWallets = (wallets: Array<any>) => { const renderWallets = (wallets: Array<any>) => {
if (isAuth && totalWallets > 0) { if (isAuth && totalWallets > 0) {
return html`<div class="menu-item divider"></div> return html`<div class="menu-item divider"></div>
${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name))}`; ${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`;
} }
return html``; return html``;
}; };
const menuHeader = (title) => html`<div class="menu-item menu-header">${title}</div>`; const menuHeader = (title) =>
html`<div class="menu-item menu-header"><span class="link-text">${title}</span></div>`;
return html` return html`
<div data-target="app-menu.sidebar"> <div data-target="app-menu.sidebar">
${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')} <div class="content">
${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')} ${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')}
${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')} ${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')}
${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)} ${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
<span class="menu-item divider"></span> ${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} <span class="menu-item divider"></span>
${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')} ${authMenu('/logout', 'Logout', '', '--logout')} ${notAuthMenu('/login', 'Login')}
${notAuthMenu('/register', 'Register')}
</div>
<div class="footer">${menuButton('Retract', 'click:menu-layout#retractMenu')}</div>
</div> </div>
`; `;
}; };

2
src/components/menu-item/MenuItemElement.ts
View File

@@ -35,7 +35,7 @@ class MenuItemElement extends BaseComponentElement {
render = (): TemplateResult => { render = (): TemplateResult => {
return html` return html`
<div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl"> <div class="${this.current ? 'selected ' : ''}menu-item" data-target="menu-item.itemEl">
<app-link data-to="${this.path}">${this.title}</app-link> <app-link class="${this.className}" data-to="${this.path}">${this.title}</app-link>
${this.customaction ${this.customaction
? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>` ? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
: html``} : html``}

9
src/styles/menu-item/menu-item.scss
View File

@@ -13,8 +13,11 @@
text-transform: uppercase; text-transform: uppercase;
text-decoration: underline; text-decoration: underline;
margin: 8px auto; margin: 8px auto;
font-family: Roboto; .link-text {
font-size: 38px !important; display: inline-block;
font-family: Roboto;
font-size: 38px;
}
} }
} }
@@ -46,8 +49,6 @@
} }
} }
&.--retract { &.--retract {
position: absolute;
bottom: 0;
width: 100%; width: 100%;
} }
[data-target='menu-item.customButton'] { [data-target='menu-item.customButton'] {

90
src/styles/sidebar/sidebar.scss
View File

@@ -17,6 +17,8 @@ menu-layout {
width: 301px; width: 301px;
border-right: 1px solid #6b6b6b; border-right: 1px solid #6b6b6b;
background-color: #181818; background-color: #181818;
display: grid;
grid-template-rows: 1fr auto;
} }
} }
.app-content { .app-content {
@@ -25,27 +27,86 @@ menu-layout {
} }
&.--retracted { &.--retracted {
.app-sidebar { .app-sidebar {
position: absolute; width: 50px;
left: -302px;
[data-target='app-menu.sidebar'] { [data-target='app-menu.sidebar'] {
left: -302px; left: -252px;
overflow: visible; overflow: visible;
.menu-item {
&.menu-header {
align-items: end;
text-align: right;
align-content: end;
.link-text {
max-width: 50px;
width: 50px;
flex: 1;
font-size: 0;
text-transform: lowercase;
color: $blue-08;
text-align: center;
&::first-letter {
visibility: visible;
font-size: 32px !important;
}
}
}
&.divider {
width: 100%;
}
}
[data-target='menu-item.itemEl'] { [data-target='menu-item.itemEl'] {
[data-target='menu-item.customButton'] {
display: none;
}
a {
align-items: end;
text-align: right;
align-content: end;
float: right;
&.--logout {
.link-text {
color: $red-01;
}
}
&.--wallet {
.link-text {
text-transform: lowercase;
}
}
.link-text {
max-width: 50px;
width: 50px;
flex: 1;
text-transform: uppercase;
color: $white;
font-size: 0 !important;
text-align: center;
&::first-letter {
visibility: visible;
font-size: 32px;
}
}
}
&.--retract { &.--retract {
position: absolute; position: absolute;
left: 60px; left: 30px;
bottom: 0;
border-top: 20px transparent;
border-bottom: 20px transparent;
border-right: 20px #000;
button { button {
background-color: $white; background-color: $white;
} .pseudo {
&::after { content: '';
content: '>'; width: 0;
margin: auto; height: 0;
margin-left: -25px; border-top: 22px solid transparent;
font-size: 32px; border-bottom: 22px solid transparent; /* 40px height (20+20) */
pointer-events: none; border-left: 22px solid $white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; position: absolute;
right: -22px;
color: #000; }
} }
} }
} }
@@ -73,6 +134,7 @@ menu-layout {
[data-target='app-menu.sidebar'] { [data-target='app-menu.sidebar'] {
width: 301px; width: 301px;
left: -302px;
} }
} }
} }