created base layouts and fixed structure

src/components/app-link/AppLinkElement.ts

@@ -0,0 +1,43 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services/";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { RouterService } from "core/services";
+
+@controller
+class AppLinkElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    @attr to: string;
+    @attr title: string;
+    @target main: Element;
+    routerService: RouterService;
+    constructor() {
+        super();
+    }
+
+    public connectedCallback(): void {
+        this.update();
+        this.routerService = this.appMain?.routerService;
+        this.main.addEventListener("click", this.goTo);
+    }
+
+    public disconnectedCallback(): void {
+        this.main.removeEventListener("click", this.goTo);
+    }
+
+    goTo = () => {
+        this.routerService.goTo(this.to);
+    };
+
+    update() {
+        render(
+            html`<span
+                data-target="app-link.main"
+                style="text-decoration: underline; cursor: pointer;"
+                >${this.title}</span
+            >`,
+            this
+        );
+    }
+}

src/components/app-main/AppMainElement.ts

@@ -0,0 +1,30 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services/";
+import { RouterService } from "core/services";
+
+@controller
+class AppMainElement extends HTMLElement {
+    public routerService: RouterService;
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.routerService = new RouterService(this);
+        this.routerService.setRoutes([
+            {
+                path: "/",
+                component: "home-page",
+                layout: "menu-layout",
+            },
+            {
+                path: "/home",
+                component: "home-page",
+            },
+        ]);
+        this.routerService.init();
+    }
+}
+
+export type { AppMainElement };

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-main/AppMainElement";
+export * from "./app-link/AppLinkElement";