Version 1.0 upload

src/layouts/CenteredLayout.ts

@@ -0,0 +1,23 @@
+// layouts/CenteredLayout.ts
+import { createElement } from '../utils/utils';
+
+export class CenteredLayout {
+    private container: HTMLElement;
+
+    constructor() {
+        this.container = createElement('div');
+        this.container.classList.add('centered-layout', 'container-fluid');
+    }
+
+    addContent(content: HTMLElement | string): void {
+        if (typeof content === 'string') {
+            this.container.innerHTML = content;
+        } else {
+            this.container.appendChild(content);
+        }
+    }
+
+    render(): HTMLElement {
+        return this.container;
+    }
+}

src/layouts/SplitColumnLayout.ts

@@ -0,0 +1,55 @@
+// layouts/SplitColumnLayout.ts
+import { createElement } from '../utils/utils';
+import { TopBar } from '../components/TopBar';
+
+export class SplitColumnLayout {
+    private main: HTMLElement;
+    private container: HTMLElement;
+    private sidebar: HTMLElement;
+    private contentArea: HTMLElement;
+    private topBar: TopBar;
+    private isSidebarCollapsed: boolean = false;
+
+    constructor() {
+        this.main = createElement('div');
+
+        this.container = createElement('div');
+        this.container.classList.add('split-column-layout', 'container-fluid');
+
+        this.topBar = new TopBar();
+        this.main.appendChild(this.topBar.render());
+
+        this.sidebar = createElement('div');
+        this.sidebar.classList.add('sidebar'); // Bootstrap column classes for sidebar
+        this.contentArea = createElement('div');
+        this.contentArea.classList.add('content'); // Bootstrap column classes for content
+
+        this.container.appendChild(this.sidebar);
+        this.container.appendChild(this.contentArea);
+
+        this.main.appendChild(this.container);
+    }
+
+    setSidebarContent(content: HTMLElement): void {
+        this.sidebar.innerHTML = ''; // Clear existing content
+        this.sidebar.appendChild(content);
+    }
+
+    setContentAreaContent(content: HTMLElement): void {
+        this.contentArea.innerHTML = '';
+        this.contentArea.appendChild(content);
+    }
+
+    render(): HTMLElement {
+        return this.main;
+    }
+
+    toggleSidebar(): void {
+        this.isSidebarCollapsed = !this.isSidebarCollapsed;
+        if (this.isSidebarCollapsed) {
+            this.container.classList.add('collapsed-sidebar');
+        } else {
+            this.container.classList.remove('collapsed-sidebar');
+        }
+    }
+}

src/layouts/ThreeColumnLayout.ts

@@ -0,0 +1,55 @@
+// layouts/ThreeColumnLayout.ts
+import { createElement } from '../utils/utils';
+import { TopBar } from '../components/TopBar';
+
+export class ThreeColumnLayout {
+    private main: HTMLElement;
+    private container: HTMLElement;
+    private column1: HTMLElement;
+    private column2: HTMLElement;
+    private column3: HTMLElement;
+    private topBar: TopBar;
+
+    constructor() {
+        this.main = createElement('div');
+
+        this.container = createElement('div');
+        this.container.classList.add('three-column-layout', 'container-fluid');
+
+        this.topBar = new TopBar();
+        this.main.appendChild(this.topBar.render());
+
+        this.column1 = createElement('div');
+        this.column1.classList.add('column'); // Bootstrap column classes
+        this.column2 = createElement('div');
+        this.column2.classList.add('column');
+        this.column3 = createElement('div');
+        this.column3.classList.add('column');
+
+        this.container.appendChild(this.column1);
+        this.container.appendChild(this.column2);
+        this.container.appendChild(this.column3);
+
+        this.main.appendChild(this.container);
+    }
+
+    setColumn1Content(content: HTMLElement): void {
+        this.column1.innerHTML = ''; // Clear existing content
+        this.column1.appendChild(content);
+    }
+
+    setColumn2Content(content: HTMLElement): void {
+        this.column2.innerHTML = '';
+        this.column2.appendChild(content);
+    }
+
+    setColumn3Content(content: HTMLElement): void {
+        this.column3.innerHTML = '';
+        this.column3.appendChild(content);
+    }
+
+
+    render(): HTMLElement {
+        return this.main;
+    }
+}