Implemented Settings page (#103)

src/presentation/Application.mts

@@ -23,7 +23,10 @@ export default class Application extends Container {
         const { template, section, slot } = html;
 
         return template([
-            new GlobalNav(),
+            new GlobalNav([
+                { href: '/', label: 'Home', icon: 'home', active: true },
+                { href: '/-settings-', label: 'Settings', icon: 'settings' }
+            ]),
             new Breadcrumb(),
             section({ id: 'content' }, slot())
         ]);
@@ -65,6 +68,7 @@ export default class Application extends Container {
         this.#pages = [
             (await import('./pages/HomePage.mjs')).default,
             NotFoundPage,
+            (await import('./pages/SettingsPage.mjs')).default,
             (await import('./pages/solution/project/ProjectsIndexPage.mjs')).default,
             (await import('./pages/solution/environment/EnvironmentsIndexPage.mjs')).default,
             (await import('./pages/solution/environment/GlossaryPage.mjs')).default,

src/presentation/components/FeatherIcon.mts

@@ -24,6 +24,7 @@ export class FeatherIcon extends Component {
         return {
             ...super._initShadowStyle(),
             '.feather-icon': {
+                fill: 'none',
                 stroke: 'currentColor',
                 display: 'inline-block',
                 height: 'var(--size)',

src/presentation/components/GlobalNav.mts

@@ -1,7 +1,13 @@
 import { Component, FeatherIcon } from './index.mjs';
 import type { FeatherIconName } from '~/types/FeatherIconName.mjs';
 import html from '../lib/html.mjs';
-import type { Properties } from '~/types/Properties.mjs';
+
+export interface GlobalNavLink {
+    href: string;
+    label: string;
+    icon: FeatherIconName;
+    active?: boolean;
+}
 
 /**
  * Determines if the path is the current path
@@ -10,17 +16,24 @@ import type { Properties } from '~/types/Properties.mjs';
  * @returns True if the path is the current path, false otherwise.
  */
 const isActive = (path: string, target: string): boolean =>
-    target.includes(path);
+    path === '/' ? target === '/' :
+        target.includes(path);
 
 export class GlobalNav extends Component {
     static {
         customElements.define('x-global-nav', this);
     }
 
-    constructor(properties: Partial<Properties<GlobalNav>> = {}) {
-        super(properties);
+    constructor(routes: GlobalNavLink[]) {
+        super({});
 
         self.navigation.addEventListener('navigate', this);
+
+        this.shadowRoot.querySelector('ul')!.append(
+            ...routes.map(({ href, icon, label, active }) =>
+                this._routerLink(href, icon, label, Boolean(active))
+            )
+        );
     }
 
     protected override _initShadowStyle() {
@@ -79,15 +92,13 @@ export class GlobalNav extends Component {
     protected override _initShadowHtml() {
         const { nav, ul, template } = html;
 
-        return template(nav({ className: 'global-nav' }, ul([
-            this._routerLink('/', 'home', 'Home')
-        ])));
+        return template(nav({ className: 'global-nav' }, ul()));
     }
 
-    protected _routerLink(path: string, iconName: FeatherIconName, text: string): HTMLLIElement {
+    protected _routerLink(path: string, iconName: FeatherIconName, text: string, active: boolean): HTMLLIElement {
         const { a, li } = html;
 
-        return li(a({ href: path }, [
+        return li(a({ href: path, className: active ? 'link-active' : '' }, [
             new FeatherIcon({ icon: iconName }),
             text
         ]));

src/presentation/pages/SettingsPage.mts

@@ -0,0 +1,23 @@
+import html from '../lib/html.mjs';
+import Page from './Page.mjs';
+import pkg from '~/../package.json' with { type: 'json' };
+
+const { h1, table, tr, td } = html;
+
+export default class SettingPage extends Page {
+    static override route = '/-settings-';
+    static {
+        customElements.define('x-page-settings', this);
+    }
+
+    constructor() {
+        super({ title: 'Settings' });
+
+        this.append(
+            h1('Settings'),
+            table(
+                tr([td('Version:'), td(pkg.version)])
+            )
+        );
+    }
+}