mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 06:08:10 +00:00
added responsivenes to sidebar and layout
This commit is contained in:
Fran Jurmanović
@@ -105,6 +105,11 @@ class AppMenuElement extends BaseComponentElement {
|
||||
}
|
||||
return html`<menu-item 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>
|
||||
</div>`;
|
||||
};
|
||||
const authMenu = (path: string, title: string, action?: string): TemplateResult => {
|
||||
if (isAuth) {
|
||||
return regularMenu(path, title, action);
|
||||
@@ -133,7 +138,8 @@ class AppMenuElement extends BaseComponentElement {
|
||||
${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')} ${notAuthMenu('/register', 'Register')}
|
||||
${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')}
|
||||
${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')}
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import { AppMainElement } from 'components/';
|
||||
class MenuLayoutElement extends BaseLayoutElement {
|
||||
@closest appMain: AppMainElement;
|
||||
@target appPage: HTMLDivElement;
|
||||
@target appSidebar: HTMLDivElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -36,13 +37,21 @@ class MenuLayoutElement extends BaseLayoutElement {
|
||||
this.update();
|
||||
};
|
||||
|
||||
retractMenu = () => {
|
||||
this.appPage.classList.toggle('--retracted');
|
||||
};
|
||||
|
||||
render = (): TemplateResult => {
|
||||
const _isAuth = this.isAuth;
|
||||
return html`
|
||||
<div data-target="menu-layout.appPage">
|
||||
${_isAuth ? html`<app-menu></app-menu>` : html``}
|
||||
<div class="app-layout" data-target="menu-layout.appPage">
|
||||
${_isAuth
|
||||
? html`<div class="app-sidebar" data-target="menu-layout.appSidebar"><app-menu></app-menu></div>`
|
||||
: html``}
|
||||
<div class="app-content">
|
||||
<app-slot data-target="menu-layout.appSlot"></app-slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -17,13 +17,12 @@
|
||||
font-size: 38px !important;
|
||||
}
|
||||
}
|
||||
menu-item {
|
||||
[data-target="menu-item.itemEl"] {
|
||||
|
||||
[data-target='menu-item.itemEl'] {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: "main custom";
|
||||
app-link {
|
||||
[data-target="app-link.main"] {
|
||||
grid-template-areas: 'main custom';
|
||||
[data-target='app-link.main'] {
|
||||
grid-area: main;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -39,15 +38,19 @@ menu-item {
|
||||
background-color: $gray-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
app-link {
|
||||
[data-target="app-link.main"] {
|
||||
[data-target='app-link.main'] {
|
||||
background-color: $gray-09;
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-target="menu-item.customButton"] {
|
||||
&.--retract {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
[data-target='menu-item.customButton'] {
|
||||
grid-area: custom;
|
||||
display: flex;
|
||||
width: 10px;
|
||||
@@ -65,7 +68,7 @@ menu-item {
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
[data-target="menu-item.customButton"] {
|
||||
[data-target='menu-item.customButton'] {
|
||||
grid-area: custom;
|
||||
width: 50px;
|
||||
transition: color 0.3s step-start;
|
||||
@@ -78,5 +81,16 @@ menu-item {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
menu-item {
|
||||
[data-target='menu-item.itemEl'] {
|
||||
[data-target='menu-item.customButton'] {
|
||||
grid-area: custom;
|
||||
width: 50px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,31 +1,82 @@
|
||||
menu-layout {
|
||||
[data-target='menu-layout.appPage'] {
|
||||
display: grid;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
&.app-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
grid-template-columns: 301px auto;
|
||||
grid-template-areas: 'sidebar content';
|
||||
|
||||
app-menu {
|
||||
.app-sidebar {
|
||||
width: 301px;
|
||||
[data-target='app-menu.sidebar'] {
|
||||
grid-area: sidebar;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 301px;
|
||||
border-right: 1px solid $gray-08;
|
||||
background-color: $black;
|
||||
border-right: 1px solid #6b6b6b;
|
||||
background-color: #181818;
|
||||
}
|
||||
}
|
||||
|
||||
app-slot {
|
||||
[data-target='base-layout.content'] {
|
||||
grid-area: content;
|
||||
.app-content {
|
||||
flex: 1;
|
||||
margin: 15px;
|
||||
}
|
||||
&.--retracted {
|
||||
.app-sidebar {
|
||||
position: absolute;
|
||||
left: -302px;
|
||||
[data-target='app-menu.sidebar'] {
|
||||
left: -302px;
|
||||
overflow: visible;
|
||||
[data-target='menu-item.itemEl'] {
|
||||
&.--retract {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
menu-layout {
|
||||
[data-target='menu-layout.appPage'] {
|
||||
&.app-layout {
|
||||
.app-sidebar {
|
||||
width: 100%;
|
||||
|
||||
[data-target='app-menu.sidebar'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.--retracted {
|
||||
.app-sidebar {
|
||||
width: 301px;
|
||||
|
||||
[data-target='app-menu.sidebar'] {
|
||||
width: 301px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,3 +53,79 @@ wallet-header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.wallet-buttons {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
.button-group {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
button {
|
||||
flex: 1;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wallet-header {
|
||||
width: 100%;
|
||||
height: 143px;
|
||||
display: block;
|
||||
position: relative;
|
||||
.header-item {
|
||||
position: absolute;
|
||||
height: 143px;
|
||||
&:nth-child(1) {
|
||||
z-index: 15;
|
||||
width: 25%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: auto;
|
||||
left: 0;
|
||||
bottom: 12px;
|
||||
.--header {
|
||||
font-size: 11px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.--content {
|
||||
.--balance {
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.--currency {
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
z-index: 15;
|
||||
width: 25%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: auto;
|
||||
right: 0;
|
||||
bottom: 12px;
|
||||
.--header {
|
||||
font-size: 11px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.--content {
|
||||
.--balance {
|
||||
font-size: 12px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.--currency {
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user