added very important video

public/data/theatre.json

@@ -61,5 +61,12 @@
     "parent_dir": "theatre",
     "media": "impermanence_Brooklyn Academy of Music (BAM), New York, 2006.mp4",
     "image": "impermanence_Brooklyn Academy of Music (BAM), New York, 2006.jpg"
+  },
+  {
+    "title": "Indra's Net (world premiere)",
+    "details": "presented by Holland Festival & Hartig Art Foundation, Gashouder, Westergas Fabriek, Amsterdam, The Netherlands, 2023",
+    "parent_dir": "theatre",
+    "media": "3012_INDRA'S NET_GROTEKERK_EXPO_DEF-H264 for iPad.m4v",
+    "image": "3012_INDRA'S NET_GROTEKERK_EXPO_DEF-H264 for iPad.png"
   }
 ]

src/components/Footer.js

@@ -33,7 +33,6 @@ class Footer extends LitElement {
       }
     })
 
-
     const sortedArray = ungrouped
     sortedArray.splice(1, 0, Object.values(grouped)[0])
     sortedArray.splice(2, 0, Object.values(grouped)[1])
@@ -41,15 +40,23 @@ class Footer extends LitElement {
     this.navigation = sortedArray
   }
 
+  navigate({ target }) {
+    const link = target.closest('.link')
+
+    if (link.dataset.href != Router.route.path) {
+      Router.navigate(link.dataset.href)
+    }
+  }
+
   renderLink(r, first = false) {
     return html`
       ${first ? html`<span class="break"></span>` : '' }
-      ${!r.disabled ? html`<a href=${r.path} class="${r.path == this.path ? 'selected' : ''}">
+      ${!r.disabled ? html`<span data-href=${r.path} class="link ${r.path == this.path ? 'selected' : ''}" @click=${this.navigate}>
         <mm-icon name=${r.icon}></mm-icon>
         <span>
           ${r.short}
         </span>
-      </a>` : '' }
+      </span>` : '' }
       `
   }
 
@@ -80,7 +87,7 @@ class Footer extends LitElement {
       font-size: 0.9em;
     }
 
-    a {
+    span.link {
       display: flex;
       padding-block: 0.25em;
       gap: 0.25em;
@@ -101,8 +108,8 @@ class Footer extends LitElement {
       margin-inline-end: 0.5em;
     }
 
-    a.selected {
-      color: var(--neutral-900, black);
+    .selected {
+      color: var(--neutral-900, black) !important;
     }
 
     .break {