layout structure

This commit is contained in:
Fran Jurmanović
2021-08-03 15:47:24 +02:00
parent 6b152d320c
commit 5ee2ccc076
7 changed files with 31 additions and 30 deletions

View File

@@ -1,2 +1,2 @@
export * from './menu-layout/MenuLayoutElement'; export * from './menu-layout';
export * from './initial-layout/InitialLayoutElement'; export * from './initial-layout';

View File

@@ -1,10 +1,9 @@
import { controller, target } from '@github/catalyst'; import { html, TemplateResult, controller, target, closest } from 'core/utils';
import { closest } from 'core/utils';
import { html, TemplateResult } from 'core/utils';
import { BaseLayoutElement } from 'common/layouts'; import { BaseLayoutElement } from 'common/layouts';
import { AppMainElement } from 'components/'; import { AppMainElement } from 'components/';
import { InitialLayoutElementTemplate } from 'layouts/initial-layout';
@controller @controller('initial-layout')
class InitialLayoutElement extends BaseLayoutElement { class InitialLayoutElement extends BaseLayoutElement {
@closest appMain: AppMainElement; @closest appMain: AppMainElement;
@target appPage: HTMLDivElement; @target appPage: HTMLDivElement;
@@ -19,13 +18,7 @@ class InitialLayoutElement extends BaseLayoutElement {
elementDisconnected = (appMain: AppMainElement): void => {}; elementDisconnected = (appMain: AppMainElement): void => {};
render = (): TemplateResult => { render = (): TemplateResult => InitialLayoutElementTemplate();
return html`
<div data-target="initial-layout.appPage">
<app-slot data-target="initial-layout.appSlot"></app-slot>
</div>
`;
};
} }
export type { InitialLayoutElement }; export type { InitialLayoutElement };

View File

@@ -0,0 +1,7 @@
import { html, TemplateResult } from 'core/utils';
export default (): TemplateResult => html`
<div data-target="initial-layout.appPage">
<app-slot data-target="initial-layout.appSlot"></app-slot>
</div>
`;

View File

@@ -0,0 +1,2 @@
export { default as InitialLayoutElementTemplate } from './InitialLayoutElementTemplate';
export * from './InitialLayoutElement';

View File

@@ -1,10 +1,9 @@
import { controller, target } from '@github/catalyst'; import { TemplateResult, controller, target, closest } from 'core/utils';
import { closest } from 'core/utils';
import { html, TemplateResult } from 'core/utils';
import { BaseLayoutElement } from 'common/layouts'; import { BaseLayoutElement } from 'common/layouts';
import { AppMainElement } from 'components/'; import { AppMainElement } from 'components/';
import { MenuLayoutElementTemplate } from 'layouts/menu-layout';
@controller @controller('menu-layout')
class MenuLayoutElement extends BaseLayoutElement { class MenuLayoutElement extends BaseLayoutElement {
@closest appMain: AppMainElement; @closest appMain: AppMainElement;
@target appPage: HTMLDivElement; @target appPage: HTMLDivElement;
@@ -41,19 +40,7 @@ class MenuLayoutElement extends BaseLayoutElement {
this.appPage.classList.toggle('--retracted'); this.appPage.classList.toggle('--retracted');
}; };
render = (): TemplateResult => { render = (): TemplateResult => MenuLayoutElementTemplate({ isAuth: this.isAuth });
const _isAuth = this.isAuth;
return 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>
`;
};
} }
export type { MenuLayoutElement }; export type { MenuLayoutElement };

View File

@@ -0,0 +1,10 @@
import { html, TemplateResult } from 'core/utils';
export default ({ isAuth }): TemplateResult => 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>
`;

View File

@@ -0,0 +1,2 @@
export { default as MenuLayoutElementTemplate } from './MenuLayoutElementTemplate';
export * from './MenuLayoutElement';