fixed menu items

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

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` <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 => {
 			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>`;
 		};
-		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<any>) => {
 			if (isAuth && totalWallets > 0) {
 				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``;
 		};
-		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`
 			<div data-target="app-menu.sidebar">
+				<div class="content">
 					${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)}
 					<span class="menu-item divider"></span>
-				${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')}
+					${authMenu('/logout', 'Logout', '', '--logout')} ${notAuthMenu('/login', 'Login')}
-				${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')}
+					${notAuthMenu('/register', 'Register')}
+				</div>
+				<div class="footer">${menuButton('Retract', 'click:menu-layout#retractMenu')}</div>
 			</div>
 		`;
 	};

src/components/menu-item/MenuItemElement.ts

@@ -35,7 +35,7 @@ class MenuItemElement extends BaseComponentElement {
 	render = (): TemplateResult => {
 		return html`
 			<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
 					? html`<div data-target="menu-item.customButton" app-action="${this.customaction}">+</div>`
 					: html``}

src/styles/menu-item/menu-item.scss

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

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;
+					width: 50px;
-					left: -302px;
 					[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;
+									.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;
 									}
-								&::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;
 								}
 							}
 						}
@@ -73,6 +134,7 @@ menu-layout {
 
 						[data-target='app-menu.sidebar'] {
 							width: 301px;
+							left: -302px;
 						}
 					}
 				}