From 5ee2ccc0761822065427f8db2b74cbdc8c4b02a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <fjurma12@outlook.com>
Date: Tue, 3 Aug 2021 15:47:24 +0200
Subject: [PATCH] layout structure

---
 src/layouts/index.ts                          |  4 ++--
 .../initial-layout/InitialLayoutElement.ts    | 15 ++++---------
 .../InitialLayoutElementTemplate.ts           |  7 +++++++
 src/layouts/initial-layout/index.ts           |  2 ++
 src/layouts/menu-layout/MenuLayoutElement.ts  | 21 ++++---------------
 .../menu-layout/MenuLayoutElementTemplate.ts  | 10 +++++++++
 src/layouts/menu-layout/index.ts              |  2 ++
 7 files changed, 31 insertions(+), 30 deletions(-)
 create mode 100644 src/layouts/initial-layout/InitialLayoutElementTemplate.ts
 create mode 100644 src/layouts/initial-layout/index.ts
 create mode 100644 src/layouts/menu-layout/MenuLayoutElementTemplate.ts
 create mode 100644 src/layouts/menu-layout/index.ts

diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 586dbdd..020f027 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,2 +1,2 @@
-export * from './menu-layout/MenuLayoutElement';
-export * from './initial-layout/InitialLayoutElement';
+export * from './menu-layout';
+export * from './initial-layout';
diff --git a/src/layouts/initial-layout/InitialLayoutElement.ts b/src/layouts/initial-layout/InitialLayoutElement.ts
index f58c9dd..54c3b1b 100644
--- a/src/layouts/initial-layout/InitialLayoutElement.ts
+++ b/src/layouts/initial-layout/InitialLayoutElement.ts
@@ -1,10 +1,9 @@
-import { controller, target } from '@github/catalyst';
-import { closest } from 'core/utils';
-import { html, TemplateResult } from 'core/utils';
+import { html, TemplateResult, controller, target, closest } from 'core/utils';
 import { BaseLayoutElement } from 'common/layouts';
 import { AppMainElement } from 'components/';
+import { InitialLayoutElementTemplate } from 'layouts/initial-layout';
 
-@controller
+@controller('initial-layout')
 class InitialLayoutElement extends BaseLayoutElement {
 	@closest appMain: AppMainElement;
 	@target appPage: HTMLDivElement;
@@ -19,13 +18,7 @@ class InitialLayoutElement extends BaseLayoutElement {
 
 	elementDisconnected = (appMain: AppMainElement): void => {};
 
-	render = (): TemplateResult => {
-		return html`
-			<div data-target="initial-layout.appPage">
-				<app-slot data-target="initial-layout.appSlot"></app-slot>
-			</div>
-		`;
-	};
+	render = (): TemplateResult => InitialLayoutElementTemplate();
 }
 
 export type { InitialLayoutElement };
diff --git a/src/layouts/initial-layout/InitialLayoutElementTemplate.ts b/src/layouts/initial-layout/InitialLayoutElementTemplate.ts
new file mode 100644
index 0000000..69132b4
--- /dev/null
+++ b/src/layouts/initial-layout/InitialLayoutElementTemplate.ts
@@ -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>
+`;
diff --git a/src/layouts/initial-layout/index.ts b/src/layouts/initial-layout/index.ts
new file mode 100644
index 0000000..1eb4535
--- /dev/null
+++ b/src/layouts/initial-layout/index.ts
@@ -0,0 +1,2 @@
+export { default as InitialLayoutElementTemplate } from './InitialLayoutElementTemplate';
+export * from './InitialLayoutElement';
diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts
index acd7a7e..dc02e6f 100644
--- a/src/layouts/menu-layout/MenuLayoutElement.ts
+++ b/src/layouts/menu-layout/MenuLayoutElement.ts
@@ -1,10 +1,9 @@
-import { controller, target } from '@github/catalyst';
-import { closest } from 'core/utils';
-import { html, TemplateResult } from 'core/utils';
+import { TemplateResult, controller, target, closest } from 'core/utils';
 import { BaseLayoutElement } from 'common/layouts';
 import { AppMainElement } from 'components/';
+import { MenuLayoutElementTemplate } from 'layouts/menu-layout';
 
-@controller
+@controller('menu-layout')
 class MenuLayoutElement extends BaseLayoutElement {
 	@closest appMain: AppMainElement;
 	@target appPage: HTMLDivElement;
@@ -41,19 +40,7 @@ class MenuLayoutElement extends BaseLayoutElement {
 		this.appPage.classList.toggle('--retracted');
 	};
 
-	render = (): TemplateResult => {
-		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>
-		`;
-	};
+	render = (): TemplateResult => MenuLayoutElementTemplate({ isAuth: this.isAuth });
 }
 
 export type { MenuLayoutElement };
diff --git a/src/layouts/menu-layout/MenuLayoutElementTemplate.ts b/src/layouts/menu-layout/MenuLayoutElementTemplate.ts
new file mode 100644
index 0000000..029f93f
--- /dev/null
+++ b/src/layouts/menu-layout/MenuLayoutElementTemplate.ts
@@ -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>
+`;
diff --git a/src/layouts/menu-layout/index.ts b/src/layouts/menu-layout/index.ts
new file mode 100644
index 0000000..78bad54
--- /dev/null
+++ b/src/layouts/menu-layout/index.ts
@@ -0,0 +1,2 @@
+export { default as MenuLayoutElementTemplate } from './MenuLayoutElementTemplate';
+export * from './MenuLayoutElement';