From f859a54ea123a095f5dbf49610db1290ac8c3d1c Mon Sep 17 00:00:00 2001
From: Dierk Koenig <dierk.koenig@canoo.com>
Date: Mon, 1 Jan 2024 22:43:25 +0100
Subject: [PATCH] navigation: basic-nav-view.html running, still much to do
 (test, doc, todos, cleanup, inclusion of other navigation and page
 projectors)

---
 docs/css/kolibri-base-light.css               |   3 +
 docs/src/allTests.html                        |   2 +-
 docs/src/examples/navigation/basic-nav-app.js |  74 ++----
 .../examples/navigation/basic-nav-view.html   |  18 +-
 .../kolibri/navigation/applicationConfig.js   |  32 +++
 .../kolibri/navigation/pageControllerTest.js  |   3 +-
 docs/src/kolibri/navigation/pageModel.js      |   3 +-
 .../dashboardNavigationProjector.css          | 228 +++++++++++-------
 .../dashboard/dashboardNavigationProjector.js |   2 +-
 9 files changed, 211 insertions(+), 154 deletions(-)
 create mode 100644 docs/css/kolibri-base-light.css
 create mode 100644 docs/src/kolibri/navigation/applicationConfig.js

diff --git a/docs/css/kolibri-base-light.css b/docs/css/kolibri-base-light.css
new file mode 100644
index 00000000..fb56a11f
--- /dev/null
+++ b/docs/css/kolibri-base-light.css
@@ -0,0 +1,3 @@
+@import "kolibri-light-fonts.css";
+@import "kolibri-light-colors.css";
+@import "kolibri-base.css";
diff --git a/docs/src/allTests.html b/docs/src/allTests.html
index 518c92e7..ce53bfb6 100644
--- a/docs/src/allTests.html
+++ b/docs/src/allTests.html
@@ -12,7 +12,7 @@
 <h1>All Tests Report</h1>
 <div id="out"></div>
 
-<p> 1332 test(s) expected.</p>
+<p> 1391 test(s) expected.</p>
 <p id="grossTotal">Check console for possible errors.</p>
 
 <footer></footer>
diff --git a/docs/src/examples/navigation/basic-nav-app.js b/docs/src/examples/navigation/basic-nav-app.js
index eb55139b..e623c181 100644
--- a/docs/src/examples/navigation/basic-nav-app.js
+++ b/docs/src/examples/navigation/basic-nav-app.js
@@ -1,57 +1,33 @@
-import {PageController}       from "../../kolibri/navigation/pageController.js";
-import {StaticPageProjector}  from "../../kolibri/navigation/projector/page/staticPageProjector.js";
-import {NavigationController} from "../../kolibri/navigation/navigationController.js";
-import {NavigationProjector}  from "../../kolibri/navigation/projector/basicNavigationProjector.js";
-import {DashboardRefinedProjector} from "../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js";
+import {NavigationController}                                 from "../../kolibri/navigation/navigationController.js";
+import {DashboardRefinedProjector}                            from "../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js";
+import {registerSiteMap, resourceBaseURI, setResourceBaseURI} from "../../kolibri/navigation/applicationConfig.js";
 
-// pages that will be displayed as content
-
-const homePageController = PageController("home", null);
-homePageController.setIconPath('../../../img/icons/house.svg');
-StaticPageProjector(
-    /** @type { !PageControllerType } */ homePageController,
-    document.getElementById("content"),
-    './pages/static/home.html');
-
-
-const aboutPageController = PageController("about", null);
-aboutPageController.setIconPath('../../../img/icons/cute-robot.svg');
-StaticPageProjector(
-    aboutPageController,
-    document.getElementById("content"),
-    './pages/static/about.html');
-
-// navigation
+// where all the resources reside relative to the home URL.
+setResourceBaseURI("../../../");
 
 const navigationController = NavigationController();
-navigationController.setWebsiteLogo('../../../img/logo/logo.svg');
+navigationController.setWebsiteLogo(resourceBaseURI + 'img/logo/logo.svg');
 navigationController.setWebsiteName('Basic Navigation');
 
-
+// this must come first since the nav registrations triggers the repaint
 DashboardRefinedProjector(navigationController, document.getElementById("nav"));
 
-navigationController.addPageControllers(
-    homePageController,
-    aboutPageController
+registerSiteMap(null /* no parent at start */, navigationController,
+    [
+        {
+            name:  "all",
+            icon:  resourceBaseURI + "img/icons/house.svg",  // override naming convention
+            pages: [
+                {
+                    name: "home",
+                    file: './pages/static/home.html',
+                    home: true,
+                },
+                {
+                    name: "about",
+                    file: './pages/static/about.html'
+                },
+            ]
+        }
+    ]
 );
-
-navigationController.setHomeLocation(homePageController);
-
-// for later: more visualizations of the navigation
-// const pinToBreadCrumbElement = document.getElementById('bread-crumbs');
-// BreadCrumbProjector(navigationController, pinToBreadCrumbElement);
-
-
-/**
- * If you'd like you can add our debugger below to your application to observe and alter some of your pages attributes
- */
-
-// const pinToDebugElement = document.getElementById("debug");
-//
-// const debugPageController = PageController("debug", null);
-// debugPageController.setIconPath('./pages/icons/bug.svg');
-// debugPageController.setVisible(false);
-// DebugPageProjector(navigationController, debugPageController, pinToDebugElement);
-// navigationController.addPageControllers(debugPageController);
-// navigationController.setDebugMode(true);
-
diff --git a/docs/src/examples/navigation/basic-nav-view.html b/docs/src/examples/navigation/basic-nav-view.html
index 73420922..81078807 100644
--- a/docs/src/examples/navigation/basic-nav-view.html
+++ b/docs/src/examples/navigation/basic-nav-view.html
@@ -8,26 +8,16 @@
 
         <!--        Styles that should apply to all pages in the Kolibri app       -->
 
-        <link href="../../../css/kolibri-light-fonts.css" rel="stylesheet">
-        <link href="../../../css/kolibri-light-colors.css" rel="stylesheet">
-        <link href="../../../css/kolibri-base.css" rel="stylesheet">
+        <link href="../../../css/kolibri-base-light.css" rel="stylesheet">
+
+
+<!--        these page styles should be referred to by their respective page -->
         <link rel="stylesheet" href="./pages/static/home.css">
         <link rel="stylesheet" href="./pages/static/about.css">
 
-<!--        <link rel="stylesheet" href="../../kolibri/navigation/projector/navigation.css">-->
         <link rel="stylesheet" href="../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css">
 
         <style>
-            :root {
-                --background: #FFFFFF;
-            }
-
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
 
             h1 {
                 margin-top: 1em;
diff --git a/docs/src/kolibri/navigation/applicationConfig.js b/docs/src/kolibri/navigation/applicationConfig.js
new file mode 100644
index 00000000..b4fa7d19
--- /dev/null
+++ b/docs/src/kolibri/navigation/applicationConfig.js
@@ -0,0 +1,32 @@
+/**
+ * @module navigation/ApplicationConfig
+ * A singleton to capture base configuration data that is needed throughout the navigation layer.
+ */
+
+import {PageController}      from "./pageController.js";
+import {StaticPageProjector} from "./projector/page/staticPageProjector.js";
+
+export { setResourceBaseURI, resourceBaseURI, registerSiteMap }
+
+let   resourceBaseURI = "./";
+const setResourceBaseURI = uri => resourceBaseURI = uri;
+
+const registerSiteMap = (parentController, navigationController, pages) => {
+    if (!pages) return;
+    pages.forEach(page => {
+        const pageController = PageController(page.name, null);
+        navigationController.addPageController(pageController);
+        pageController.setParent(parentController);
+        if (page.home) {
+            navigationController.setHomeLocation(pageController);
+        }
+        pageController.setIconPath(page.icon ?? `${resourceBaseURI}img/icons/${page.name}.svg`);
+        if (page.file) {
+            StaticPageProjector(
+                /** @type { !PageControllerType } */ pageController,
+                document.getElementById("content"),
+                page.file);
+        }
+        registerSiteMap(pageController, navigationController, page.pages);
+    });
+};
diff --git a/docs/src/kolibri/navigation/pageControllerTest.js b/docs/src/kolibri/navigation/pageControllerTest.js
index b49b400b..a54a5610 100644
--- a/docs/src/kolibri/navigation/pageControllerTest.js
+++ b/docs/src/kolibri/navigation/pageControllerTest.js
@@ -2,6 +2,7 @@ import {PageController} from './pageController.js';
 import {VALUE}                       from "../presentationModel.js";
 import {TestSuite}                                                                              from "../util/test.js";
 import {ACTIVE, DESCRIPTION, HASH, ICONPATH, NAVIGATIONAL, PARENT, TARGET_ID, VISIBLE, VISITED} from "./pageModel.js";
+import {resourceBaseURI} from "./applicationConfig.js";
 
 const pageSuite = TestSuite('pageController');
 
@@ -116,7 +117,7 @@ pageSuite.add('onIconPathChanged', assert => {
 
     homePageController.onIconPathChanged(icon => changedIcon = icon);
 
-    assert.is(changedIcon, '../navigation/icons/placeholder.svg');
+    assert.is(changedIcon, resourceBaseURI + 'img/icons/placeholder.svg');
 
     homePageController.setIconPath('../navigation/icons/house.svg');
 
diff --git a/docs/src/kolibri/navigation/pageModel.js b/docs/src/kolibri/navigation/pageModel.js
index 2b096eb2..bddd7b1f 100644
--- a/docs/src/kolibri/navigation/pageModel.js
+++ b/docs/src/kolibri/navigation/pageModel.js
@@ -2,6 +2,7 @@ import {
     Attribute,
     VALUE,
 } from "../presentationModel.js";
+import {resourceBaseURI} from "./applicationConfig.js";
 
 export { PageModel,
     TARGET_ID   ,
@@ -84,7 +85,7 @@ const PageModel = targetId => {
     const activeAttr        = Attribute(false   ,                               qualify(ACTIVE));
     const hashAttr          = Attribute('#' + targetId.replace(' ', '')   ,     qualify(HASH));
     const visitedAttr       = Attribute(false,                                  qualify(VISITED));
-    const iconPathAttr      = Attribute('../navigation/icons/placeholder.svg',  qualify(ICONPATH));
+    const iconPathAttr      = Attribute(resourceBaseURI + 'img/icons/placeholder.svg',  qualify(ICONPATH));
     const visibleAttr       = Attribute(true,                                   qualify(VISIBLE));
     const parentAttr        = Attribute(null,                                   qualify(PARENT));
     const navigationalAttr  = Attribute(true,                                   qualify(NAVIGATIONAL));
diff --git a/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css b/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css
index e7db5705..92014b0d 100644
--- a/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css
+++ b/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css
@@ -1,57 +1,57 @@
-* {
-    --kolibri--light---black--900: hsla(0, 0%, 98.8%, 1);
-    --kolibri--light---black--800: hsla(240, 45.5%, 97.8%, 1);
-    --kolibri--light---black--600: hsla(233, 26.7%, 88.2%, 1);
-    --kolibri--light---black--700: hsla(231, 28%, 95.1%, 1);
-    --kolibri--light---black--500: hsla(234, 18%, 68.4%, 1);
-    --kolibri--light---black--400: hsla(235, 13.7%, 50%, 1);
-    --kolibri--light---black--300: hsla(247, 15.3%, 34.7%, 1);
-    --kolibri--light---black--200: hsla(249, 23.1%, 17.8%, 1);
-    --kolibri--light---black--100: hsla(240, 35.5%, 12.2%, 1);
 
-    box-sizing: border-box;
-}
+/*
+    Styling for the dashboard navigation.
+
+    This style depends on Kolibri-base being set such that all respective
+    colors, fonts, and defaults are available.
+*/
 
 .dashboard-refined-nav {
-    --base-unit: 4em;
-    /*--detail-width: 0;*/
+
+    --base-unit:      4rem;
     --detail-width:   calc(  4 * var(--base-unit));
     --header-height:  calc(4/5 * var(--base-unit));
-    --std-padding: calc(1/5 * var(--base-unit));
+    --std-padding:    calc(1/5 * var(--base-unit));
+    font-family:      var(--kb-font-rubik-light-regular);
+
+    /* docked to the left, full height*/
     position: fixed;
-    top:  0;
-    left: 0;
-    min-height: calc(100vh - 1/4 * var(--base-unit));
-    background-color: transparent;
+    inset:    0 auto 0 0;
+    z-index:  10;
+
     display: grid;
-    grid-template-columns: calc(3/2 * var(--base-unit));
-    font-family:      var(--kb-font-rubik-light-regular);
-    margin: calc(1/8 * var(--base-unit));
-    box-shadow: 2px 0 4px #dbd7db;
-    border-radius: calc(1/6 * var(--base-unit));
+    grid-template-columns: var(--base-unit);                        /* default: closed, only one column*/
+
+    &.open {
+        grid-template-columns: var(--base-unit) var(--detail-width); /* two columns if open */
+    }
 }
 
-.dashboard-refined-nav.open{
-    grid-template-columns: calc(3/2 * var(--base-unit)) var(--detail-width);
+.dashboard-refined-nav .invisible {
+    display: none;
 }
 
+/* start overview (left column) */
+
 .dashboard-refined-nav .overview {
-    min-height:       100%;
-    /*background-color: var(--kb-color-hsl-bg-light);*/
-    background-color: var(--kb-color-hsl-lavender-200);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: calc(1/6 * var(--base-unit));
+    min-height:         100%;
+    background-color:   #F7F7FC;
+    display:            flex;
+    flex-direction:     column;
+    align-items:        center;
+    border-radius:      0
+                        calc(1/6 * var(--base-unit))
+                        calc(1/6 * var(--base-unit))
+                        0;
 }
 
 .dashboard-refined-nav.open .overview {
-    border-radius: calc(1/6 * var(--base-unit)) 0 0 calc(1/6 * var(--base-unit));
+    border-radius:      0;
 }
 
 .dashboard-refined-nav .overview .logo {
-    padding-top:      calc(1/2 * var(--base-unit));
-    padding-bottom:   var(--base-unit);
+    padding-top:      var(--std-padding) ;
+    padding-bottom:   var(--std-padding);
 }
 
 .dashboard-refined-nav .overview .logo img {
@@ -66,131 +66,185 @@
 .dashboard-refined-nav .overview .content .row img {
     height:       calc(4/9 * var(--base-unit));
     aspect-ratio: 1;
-    filter: invert(27%) sepia(12%) saturate(1127%) hue-rotate(207deg) brightness(98%) contrast(84%);
+    filter: invert(92%) sepia(11%) saturate(202%) hue-rotate(196deg) brightness(92%) contrast(98%);
 }
 
 .dashboard-refined-nav .overview .content .row img.active {
-    filter: invert(25%) sepia(97%) saturate(7429%) hue-rotate(275deg) brightness(94%) contrast(100%);
+    filter: invert(9%) sepia(99%) saturate(6728%) hue-rotate(266deg) brightness(103%) contrast(125%); /* convert svg color to --kb-color-hsl-primary-accent */
 }
 
 .dashboard-refined-nav .overview .content .row img:hover {
-    filter: invert(51%) sepia(76%) saturate(6321%) hue-rotate(306deg) brightness(100%) contrast(105%);
+    filter: invert(51%) sepia(76%) saturate(6321%) hue-rotate(306deg) brightness(100%) contrast(105%); /* convert svg color to --kb-color-hsl-pink-500 */
 }
 
+/* when opened, the overview nav should show now content */
 .dashboard-refined-nav.open .overview .content .row img {
     display: none;
 }
 
+/* background circle for the open/closed toggle "button" */
 .dashboard-refined-nav .overview .toggle {
-    min-height: calc(1/2 * var(--base-unit));
-    min-width:  calc(1/2 * var(--base-unit));
-    position: absolute;
-    bottom: calc(1/2 * var(--base-unit));
-    display: flex;
-    justify-content: center;
-    align-items:     center;
-    border-radius: var(--base-unit);
-    background-color: #A0A3BD;
-    /*background-color: var(--kb-hsla-primary-bg);*/
+    /*it needs to go to the bottom, possibly on top of any menu items if there are many*/
+    position:   absolute;
+    bottom:     var(--std-padding);
+    z-index:    20;
+
+    /*the included image must be centered*/
+    display:     grid;
+    place-items: center;
+
+    min-height:       calc(1/2 * var(--base-unit));
+    aspect-ratio:     1 / 1;
+    border-radius:    50%;
+    background-color: var(--kb-hsla-primary-bg);
 }
 
 .dashboard-refined-nav .overview .toggle img {
     height:       calc(9/20 * var(--base-unit));
     aspect-ratio: 1;
-    transition: 0.2s;
-    cursor: pointer;
+    transition:   transform ease-in-out 0.2s;
+    cursor:       pointer;
 }
 
 .dashboard-refined-nav.open .overview .toggle img {
-    transform: rotate(180deg);
-    transition: 0.2s;
+    transform:    rotate(180deg);
+    transition:   transform ease-in-out 0.2s;
 }
 
+/* end of overview */
+
+/* start detail (expanded right column) */
+
 .dashboard-refined-nav .detail {
     display: none;
 }
 
 .dashboard-refined-nav.open .detail {
-    display: block;
+    display:          initial;
     min-height:       100%;
-    background-color: var(--kb-color-hsl-purple-100);
-    /*background-color: var(--kb-hsla-primary-bg);*/
-    border-radius: 0 calc(1/6 * var(--base-unit)) calc(1/6 * var(--base-unit)) 0;
+    background-color: var(--kb-hsla-primary-bg);
+    border-radius:    0
+                      calc(1/6 * var(--base-unit))
+                      calc(1/6 * var(--base-unit))
+                      0;
 }
 
 .dashboard-refined-nav .detail .header {
     height:           var(--header-height);
-    padding-top:      calc(1/2 * var(--base-unit));
+    padding-top:      var(--std-padding);
     padding-bottom:   var(--std-padding);
-    padding-left:     calc(1/3 * var(--base-unit));
-    margin-bottom:    calc(var(--base-unit) - calc( 9/8 * var(--std-padding)));
+    padding-left:     var(--std-padding);
     display:          flex;
     flex-direction:   column;
     justify-content:  center;
     font-size:        var(--font-size-h5);
-    color: var(--kolibri--light---black--200);
+    color:            black;
 }
 
 .dashboard-refined-nav .detail .content {
     margin-bottom: calc(3/5 * var(--base-unit));
 }
 
-.dashboard-refined-nav .detail .content .row {
-    margin-bottom:    calc(1/20 * var(--base-unit));
-    padding-left:     calc(1/2 * var(--base-unit));
+ /*Wrapper*/
+.dashboard-refined-nav .tree {
+    display: flex;
+    flex-direction: column;
+    padding-left: calc(2/9 * var(--base-unit));
+    padding-right: calc(2/9 * var(--base-unit));
+    overflow: hidden;
 }
 
-.dashboard-refined-nav .detail .content .node {
+ /*Root Nodes*/
+.dashboard-refined-nav .tree > .tree-node  {
+    margin-bottom: calc(3/5 * var(--base-unit))
+}
+
+.dashboard-refined-nav .tree > .tree-node.invisible {
+    display: none;
+}
+
+.dashboard-refined-nav .tree > .tree-node > span {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     gap: 0 1em;
+    margin-bottom: calc(1/5 * var(--base-unit));
+    text-transform: uppercase;
+    font-size: var(--font-size-textM);
+    color: black;
 }
 
-.dashboard-refined-nav .detail .content .row img {
+.dashboard-refined-nav .tree > .tree-node > span > a {
+    font-size: var(--font-size-textM);
+    letter-spacing: 0.01em;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: black;
+    pointer-events: none;
+}
+
+.dashboard-refined-nav .tree > .tree-node > span > img {
     height: calc(2/5 * var(--base-unit));
     aspect-ratio: 1;
-    filter: invert(27%) sepia(12%) saturate(1127%) hue-rotate(207deg) brightness(98%) contrast(84%);
 }
 
-.dashboard-refined-nav .detail .content .row svg {
-    width: calc(2/5 * var(--base-unit));
-    height: calc(2/5 * var(--base-unit));
-    visibility: hidden;
+.dashboard-refined-nav .tree > .tree-node > span > img.active {
+    filter: invert(9%) sepia(99%) saturate(6728%) hue-rotate(266deg) brightness(103%) contrast(125%); /* convert svg color to --kb-color-hsl-primary-accent */
 }
 
-.dashboard-refined-nav .detail .content .row.root img.active {
-    filter: invert(25%) sepia(97%) saturate(7429%) hue-rotate(275deg) brightness(94%) contrast(100%); /* convert svg color to --kb-color-hsl-primary-accent */
+ /*Child Nodes*/
+.dashboard-refined-nav .tree-node > .tree-node {
+    margin-left: calc(2/5 * var(--base-unit));
 }
 
-.dashboard-refined-nav .detail .content .row a.active {
-    font-style: var(--kb-font-rubik-light-medium);
-    font-weight: 600;
-    color: var(--kb-color-hsl-pink-500);
+.dashboard-refined-nav .tree-node > .tree-node.invisible {
+    display: none;
 }
 
-.dashboard-refined-nav .detail .content .row.root {
-    margin-bottom: calc(1/5 * var(--base-unit));
+.dashboard-refined-nav .tree > .tree-node > .tree-node {
+    margin-left: 0;
+}
+
+.dashboard-refined-nav .tree-node > .tree-node > span {
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
     gap: 0 1em;
+    margin-bottom: calc(1/20 * var(--base-unit));
 }
 
-.dashboard-refined-nav .detail .content .row.root span {
-    text-transform: uppercase;
-    font-size: var(--font-size-textM);
-    color: var(--kolibri--light---black--200);
+.dashboard-refined-nav .tree-node > .tree-node > span > img {
+    filter: invert(80%) sepia(10%) saturate(568%) hue-rotate(196deg) brightness(81%) contrast(88%); /* convert svg color to --kb--light--black-500 */
+    width: calc(2/5 * var(--base-unit));
+    height: calc(2/5 * var(--base-unit));
+}
+
+.dashboard-refined-nav .tree-node > .tree-node > span > img.active {
+    filter: invert(9%) sepia(99%) saturate(6728%) hue-rotate(266deg) brightness(103%) contrast(125%); /* convert svg color to --kb-color-hsl-primary-accent */
 }
 
-.dashboard-refined-nav .detail .content .row a {
+.dashboard-refined-nav .tree-node > .tree-node > span > a {
     font-size: var(--font-size-textM);
     letter-spacing: 0.01em;
     text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
     color: var(--kolibri--light---black--500);
 }
 
-.dashboard-refined-nav .detail .content .row a:hover {
+.dashboard-refined-nav .tree-node > .tree-node > span > a.active {
+    font-style: var(--kb-font-rubik-light-medium);
     color: var(--kb-color-hsl-bg-dark);
 }
 
+.dashboard-refined-nav .tree-node > .tree-node > span > a:hover {
+    color: var(--kb-color-hsl-pink-500);
+}
+
+.dashboard-refined-nav .tree > div.tree-node:not(:has(div.tree-node)){
+    display: none;
+}
+
+.dashboard-refined-nav .tree > div.tree-node:has( > :nth-child(2)#debug-node) {
+    display: none;
+}
+
diff --git a/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js b/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js
index 6bfc3abd..1b6f7e4c 100644
--- a/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js
+++ b/docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js
@@ -489,7 +489,7 @@ const NavigationProjector = (controller, pinToElement) => {
             overviewIcon.src = newIcon;
             detailIcon.src = newIcon;
         } else if (null !== detailIcon) {
-            detailIcon.src = '../navigation/icons/line.png';
+            detailIcon.src = '/kolibri/docs/img/icons/line.png'; // todo: set resource path from outside
         }
     };