mirror of
https://github.com/FJurmanovic/wallet-web.git
synced 2026-02-06 06:08:10 +00:00
layout structure
This commit is contained in:
@@ -1,2 +1,2 @@
|
|||||||
export * from './menu-layout/MenuLayoutElement';
|
export * from './menu-layout';
|
||||||
export * from './initial-layout/InitialLayoutElement';
|
export * from './initial-layout';
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
|||||||
@@ -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>
|
||||||
|
`;
|
||||||
2
src/layouts/initial-layout/index.ts
Normal file
2
src/layouts/initial-layout/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as InitialLayoutElementTemplate } from './InitialLayoutElementTemplate';
|
||||||
|
export * from './InitialLayoutElement';
|
||||||
@@ -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 };
|
||||||
|
|||||||
10
src/layouts/menu-layout/MenuLayoutElementTemplate.ts
Normal file
10
src/layouts/menu-layout/MenuLayoutElementTemplate.ts
Normal 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>
|
||||||
|
`;
|
||||||
2
src/layouts/menu-layout/index.ts
Normal file
2
src/layouts/menu-layout/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { default as MenuLayoutElementTemplate } from './MenuLayoutElementTemplate';
|
||||||
|
export * from './MenuLayoutElement';
|
||||||
Reference in New Issue
Block a user