Update page navigation

There's not target on each button

Author: krestenlaust

pages/tenfoot/index.pug

@@ -1,4 +1,4 @@
-extends ../components/tenfoot_layout
+extends ../../components/tenfoot_layout
 
 block title
     h2 Welcome
@@ -7,27 +7,27 @@ block title
 block content
     link(rel="stylesheet" href="/styles/menu10foot.scss")
     section.menu10foot
-        .menu10foot-card(tabindex="0" role="button" data-service="stregsystem")
+        .menu10foot-card(tabindex="0" role="button" data-link="stregsystem")
             .menu10foot-icon 💵
             .menu10foot-title Stregsystem
             .menu10foot-description Browse our collection of wares
 
-        .menu10foot-card(tabindex="1" role="button" data-service="songbook")
+        .menu10foot-card(tabindex="1" role="button" data-link="songbook")
             .menu10foot-icon 🎼
             .menu10foot-title Songbook
             .menu10foot-description Browse our collection of songs
 
-        .menu10foot-card(tabindex="2" role="button" data-service="events")
+        .menu10foot-card(tabindex="2" role="button" data-link="events")
             .menu10foot-icon 📅
             .menu10foot-title Events
             .menu10foot-description List upcoming events
 
-        .menu10foot-card(tabindex="3" role="button" data-service="links")
+        .menu10foot-card(tabindex="3" role="button" data-link="links")
             .menu10foot-icon 🌐
             .menu10foot-title Links
             .menu10foot-description Look at nice links
 
-        .menu10foot-card(tabindex="4" role="button" data-service="exit")
+        .menu10foot-card(tabindex="4" role="button" data-link="//")
             .menu10foot-icon ➜]
             .menu10foot-title Exit
             .menu10foot-description Leave 10-foot display

scripts/tenfoot/menu.ts

@@ -9,11 +9,11 @@ export interface GotoPage {
 
 export class TenFootMenu {
     private cards: NodeListOf<HTMLElement>;
-    private navigator: GotoPage;
+    private nav: GotoPage;
     private currentIndex: number;
 
     constructor(navigator: GotoPage, cardContainer: Element) {
-        this.navigator = navigator;
+        this.nav = navigator;
         this.cards = cardContainer.querySelectorAll<HTMLElement>('.menu10foot-card');
         this.currentIndex = 0;
         this.init();
@@ -60,21 +60,14 @@ export class TenFootMenu {
 
     private setupClickHandlers(): void {
         this.cards.forEach((card: HTMLElement, index: number) => {
-            card.addEventListener('click', () => {
-                const service = card.dataset.service || '';
+            card.addEventListener('click', async () => {
+                const link = card.dataset.link || '';
                 const titleElement = card.querySelector('.service-title');
                 const title = titleElement?.textContent || '';
 
-                console.log(`Selected: ${title} (${service})`);
+                console.log(`Selected: ${title} (${link})`);
 
-                // Dispatch custom event for handling navigation
-                const event = new CustomEvent<ServiceSelected>('serviceSelected', {
-                    detail: { service }
-                });
-                document.dispatchEvent(event);
-
-                // Add your navigation logic here
-                // navigator.navigateTo("links").then(r => console.log(r));
+                await this.nav.navigateTo(link);
             });
 
             card.addEventListener('focus', () => {

scripts/tenfoot/tenfoot-navigation.ts

@@ -58,11 +58,18 @@ class TenFootNavigator implements GotoPage {
         await this.LoadPage(page);
     }
 
-    async LoadPage(path: string) {
+    async LoadPage(tenfoot_page: string) {
+        // Special case of navigation
+        if (tenfoot_page == "//"){
+            window.location.href = "/";
+        }else if (tenfoot_page == "/"){
+            tenfoot_page = "index";
+        }
+
         const app = document.getElementsByTagName('section')[0]
 
         try {
-            const response = await fetch(`/${path}.html`);
+            const response = await fetch(`/tenfoot/${tenfoot_page}.html`);
             const html = await response.text();
             app.innerHTML = html;