added responsivenes to sidebar and layout

This commit is contained in:
Fran Jurmanović
2021-07-05 20:38:56 +02:00
parent c999fdc21b
commit 740b89c1d2
5 changed files with 261 additions and 105 deletions

View File

@@ -8,6 +8,7 @@ import { AppMainElement } from 'components/';
class MenuLayoutElement extends BaseLayoutElement {
@closest appMain: AppMainElement;
@target appPage: HTMLDivElement;
@target appSidebar: HTMLDivElement;
constructor() {
super();
@@ -36,12 +37,20 @@ 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``}
<app-slot data-target="menu-layout.appSlot"></app-slot>
<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>
`;
};