From 8288b572eacf0e61feb8ee63b090749de2e4cbae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Tue, 6 Jul 2021 19:13:40 +0200 Subject: [PATCH] fixed menu items --- src/components/app-link/AppLinkElement.ts | 4 +- src/components/app-menu/AppMenuElement.ts | 38 +++++---- src/components/menu-item/MenuItemElement.ts | 2 +- src/styles/menu-item/menu-item.scss | 9 ++- src/styles/sidebar/sidebar.scss | 90 +++++++++++++++++---- 5 files changed, 107 insertions(+), 36 deletions(-) diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index 745773c..47e305d 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -56,7 +56,7 @@ class AppLinkElement extends BaseComponentElement { class="btn btn-link btn-disabled${this.className ? ` ${this.className}` : ''}" data-target="app-link.main" style="color:grey" - >${this.title}${this.title}` : html`${this.title}${this.title}`}`; }; } diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 15fc092..f9f05fb 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -99,20 +99,24 @@ class AppMenuElement extends BaseComponentElement { render = (): TemplateResult => { 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) { - return html` ${title} `; + return html` + ${title} + `; } - return html`${title}`; + return html`${title}`; }; const menuButton = (title: string, action?: string): TemplateResult => { return html`
- +
`; }; - const authMenu = (path: string, title: string, action?: string): TemplateResult => { + const authMenu = (path: string, title: string, action?: string, className?: string): TemplateResult => { if (isAuth) { - return regularMenu(path, title, action); + return regularMenu(path, title, action, className); } return html``; }; @@ -125,21 +129,25 @@ class AppMenuElement extends BaseComponentElement { const renderWallets = (wallets: Array) => { if (isAuth && totalWallets > 0) { return html`
- ${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name))}`; + ${wallets.map((wallet) => regularMenu(`/wallet/${wallet.id}`, wallet.name, '', '--wallet'))}`; } return html``; }; - const menuHeader = (title) => html`
${title}
`; + const menuHeader = (title) => + html`
${title}
`; return html`
- ${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')} - ${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')} - ${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')} - ${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)} - - ${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} - ${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')} +
+ ${menuHeader(__CONFIG__.appName)} ${regularMenu('/', 'Home')} + ${authMenu('/history', 'Transaction History', 'click:app-menu#modalTransaction')} + ${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')} + ${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)} + + ${authMenu('/logout', 'Logout', '', '--logout')} ${notAuthMenu('/login', 'Login')} + ${notAuthMenu('/register', 'Register')} +
+
${menuButton('Retract', 'click:menu-layout#retractMenu')}
`; }; diff --git a/src/components/menu-item/MenuItemElement.ts b/src/components/menu-item/MenuItemElement.ts index f54631e..a55af7a 100644 --- a/src/components/menu-item/MenuItemElement.ts +++ b/src/components/menu-item/MenuItemElement.ts @@ -35,7 +35,7 @@ class MenuItemElement extends BaseComponentElement { render = (): TemplateResult => { return html`
- ${this.title} + ${this.title} ${this.customaction ? html`
+
` : html``} diff --git a/src/styles/menu-item/menu-item.scss b/src/styles/menu-item/menu-item.scss index 38b479e..ac0cbfd 100644 --- a/src/styles/menu-item/menu-item.scss +++ b/src/styles/menu-item/menu-item.scss @@ -13,8 +13,11 @@ text-transform: uppercase; text-decoration: underline; margin: 8px auto; - font-family: Roboto; - font-size: 38px !important; + .link-text { + display: inline-block; + font-family: Roboto; + font-size: 38px; + } } } @@ -46,8 +49,6 @@ } } &.--retract { - position: absolute; - bottom: 0; width: 100%; } [data-target='menu-item.customButton'] { diff --git a/src/styles/sidebar/sidebar.scss b/src/styles/sidebar/sidebar.scss index afda769..362d169 100644 --- a/src/styles/sidebar/sidebar.scss +++ b/src/styles/sidebar/sidebar.scss @@ -17,6 +17,8 @@ menu-layout { width: 301px; border-right: 1px solid #6b6b6b; background-color: #181818; + display: grid; + grid-template-rows: 1fr auto; } } .app-content { @@ -25,27 +27,86 @@ menu-layout { } &.--retracted { .app-sidebar { - position: absolute; - left: -302px; + width: 50px; [data-target='app-menu.sidebar'] { - left: -302px; + left: -252px; 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.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 { position: absolute; - left: 60px; + left: 30px; + bottom: 0; + border-top: 20px transparent; + border-bottom: 20px transparent; + border-right: 20px #000; button { background-color: $white; - } - &::after { - content: '>'; - margin: auto; - margin-left: -25px; - font-size: 32px; - pointer-events: none; - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - - color: #000; + .pseudo { + content: ''; + width: 0; + height: 0; + border-top: 22px solid transparent; + border-bottom: 22px solid transparent; /* 40px height (20+20) */ + border-left: 22px solid $white; + position: absolute; + right: -22px; + } } } } @@ -73,6 +134,7 @@ menu-layout { [data-target='app-menu.sidebar'] { width: 301px; + left: -302px; } } }