Minor fixes

kyma-project · Dec 27, 2023 · 14bc63f · 14bc63f
1 parent 6e32a32
commit 14bc63f
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 150 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,27 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}
diff --git a/build-modules.js b/build-modules.js
@@ -141,6 +141,7 @@ async function latestVersions() {
 function isSemVer(version) {
   return /^\d+\.\d+\.\d+$/.test(version)
 }
+
 function semVerCompare(a, b) {
   const aParts = a.version.split('.')
   const bParts = b.version.split('.')
@@ -293,4 +294,3 @@ function loadModulesFromManifests(folder) {
   return modules
 }
 build()
-// loadModulesFromManifests('module-manifests/modules')
diff --git a/index.html b/index.html
@@ -9,36 +9,74 @@
     ui5-table ui5-table-column.table-header-text-alignment::part(column) {
       text-align: end;
     }
+
     .code {
       height: 70vh;
       width: 70vw;
     }
+
     .small-badge {
       font-size: 0.65rem;
     }
+
     ui5-shellbar::part(root) {
-      padding: 0px 0px 0px 0px;
-      margin: 0px 0px 2px 0px;
+        padding-inline-start: 0.75rem;
+        padding-inline-end: 1.25rem;
+        border-radius: 0.5rem;
+        box-shadow:
+            0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent),
+            0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+    }
+    .tool-layout {
+        padding: 0.5rem 0.5rem 0 0.5rem;
+        background: color-mix(in srgb, black 4%, var(--sapBackgroundColor));
+        display: grid;
+        gap: 0.5rem;
+        grid-template-rows: auto 1fr;
+        grid-template-columns: auto 1fr;
+    }
+    .tool-layout > * {
+        z-index: 1;
+    }
+    ui5-shellbar {
+        grid-column: 1 / span 2;
+        grid-row: 1 / 2;
+    }
+    ui5-side-navigation {
+        border-radius: 0.5rem 0.5rem 0 0.5rem;
+    }
+    .ui5-card-root {
+        border-radius: 0.5rem 0.5rem 0 0.5rem;
     }
   </style>
 </head>
 
 <body data-ui5-compact-size>
+  <div class="tool-layout">
 
+    <ui5-shellbar primary-title="Kyma modules">
+      <!-- <ui5-button icon="menu2" slot="startButton" id="toggle"></ui5-button> -->
+      <img slot="logo"
+        src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjNweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjMgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bG9nb19pY29uPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsb2dvX2ljb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNTk2NjU0LCAwLjAwMDExMSkiIGZpbGw9IiMwQjc0REUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Mi41NTE1ODE1LDYwLjYyMzE0MTggTDE5LjQzOTAyMDksNjAuNjIzMTQxOCBDMTcuOTEwNzk2Miw2MC42MjcxMzczIDE2LjQ2NDQ5Nyw1OS45MzMzMTgyIDE1LjUxMjEwMDUsNTguNzM5MzAxIEwxLjA5NzQyOTI5LDQwLjY2NjU1NTkgQzAuMTQxNjc4OCwzOS40NzM2MTA2IC0wLjIxNTU0MjI0NCwzNy45MDk1MjA1IDAuMTI3NjcxNTA4LDM2LjQyMDQ3NzQgTDUuMjc1NzY4NCwxMy45MDQzMDEgQzUuNjEwNTg2NDksMTIuNDEzMjgwNyA2LjYxMjYxMzY1LDExLjE1ODY0NTkgNy45OTM0ODQ2NiwxMC41MDE0NTc4IEwyOC44MTMzNDYyLDAuNTAyMjQyMTU4IEMzMC4xOTA3NjM1LC0wLjE2NzQxNDA1MyAzMS43OTk4MzksLTAuMTY3NDE0MDUzIDMzLjE3NzI1NjIsMC41MDIyNDIxNTggTDU0LjAwMzEwNCwxMC41MTkzOTkgQzU1LjM4MDU3NzEsMTEuMTgwODU1OCA1Ni4zODEwODE2LDEyLjQzMzU4NCA1Ni43MjA4MjAyLDEzLjkyMjI0MjEgTDYxLjg2MjkzMSwzNi40Mzg0MTg2IEM2Mi4yMDYxNDQ3LDM3LjkyNzQ2MTcgNjEuODQ4OTIzNywzOS40OTE1NTE4IDYwLjg5MzE3MzIsNDAuNjg0NDk3IEw0Ni40Nzg1MDE5LDU4LjczOTMwMSBDNDUuNTI2MTA1NCw1OS45MzMzMTgyIDQ0LjA3OTgwNjMsNjAuNjI3MTM3MyA0Mi41NTE1ODE1LDYwLjYyMzE0MTggWiBNMjkuNzM1MjE0NywyLjM5MjA0NjA4IEw4LjkwOTM2NzAxLDEyLjQyMTE2MzcgQzguMTEwNjA5NjIsMTIuODA0NTAzIDcuNTMwODIzMjIsMTMuNTMxMjkwOCA3LjMzNTAwNzE1LDE0LjM5NDY5MzEgTDIuMTkyODk2NDIsMzYuOTA0ODg5MiBDMS45OTM3MzQwNiwzNy43NjcwNTkxIDIuMjAxMTAwODEsMzguNjcyODYzNiAyLjc1NTU5NTM4LDM5LjM2MjgzMDQgTDE3LjE2NDI4MDUsNTcuNDExNjUzOSBDMTcuNzEzNDcwMiw1OC4xMDY4MzI0IDE4LjU1MjU3MDIsNTguNTEwNTM2IDE5LjQzOTAyMDksNTguNTA2MTAyNSBMNDIuNTUxNTgxNSw1OC41MDYxMDI1IEM0My40MzgwMzIzLDU4LjUxMDUzNiA0NC4yNzcxMzIyLDU4LjEwNjgzMjQgNDQuODI2MzIyLDU3LjQxMTY1MzkgTDU5LjI2NDkzNzksMzkuMzYyODMwNCBDNTkuODE4MTU3LDM4LjY3MjI0MzEgNjAuMDIzMzg1MSwzNy43NjYxNDA4IDU5LjgyMTY1MDcsMzYuOTA0ODg5MiBMNTQuNjU1NTk1MywxNC4zOTQ2OTMxIEM1NC40NTk3NzkzLDEzLjUzMTI5MDggNTMuODc5OTkyOSwxMi44MDQ1MDMgNTMuMDgxMjM1NSwxMi40MjExNjM3IEwzMi4yNTUzODc3LDIuMzkyMDQ2MDggQzMxLjQ2MDM1MjUsMi4wMDM0NjU5NiAzMC41MzAyNDk5LDIuMDAzNDY1OTYgMjkuNzM1MjE0NywyLjM5MjA0NjA4IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTMuODI0MDAzNiwyMy40MDcxNDQxIEwxMy44MjQwMDM2LDM2LjI3MDk2NzYgQzE0LjY5MTUzMjQsMzUuODI4NDA4NSAxNS42NTE0NDIxLDM1LjU5Njg1ODcgMTYuNjI1NTI2MSwzNS41OTUxODMzIEwxOS4zNzkxNTkzLDM1LjU5NTE4MzMgQzIzLjA4MTg5NDEsMzUuNjg5MjYwMiAyNi43MDM3NDU3LDM0LjUwNDI2MjMgMjkuNjMzNDUsMzIuMjQwMTgzMyBDMjguODg1MTgwMSwzMS41NzYzNTk4IDI4LjE1NDg2ODcsMzAuODk0NTk1MSAyNy40NTQ0ODgxLDMwLjIyNDc5MTIgQzIzLjk0NjU5ODgsMjYuODY5NzkxMiAyMC4yNTMxMzg2LDIzLjY5NDIwMjkgMTMuODI0MDAzNiwyMy40MDcxNDQxIFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00OC4xNjY1OTg4LDIzLjUyMDc3MTYgQzQxLjg0NTIxNDcsMjMuODMxNzUxOSAzOC41MTY5MTAyLDI2Ljk3NzQzODIgMzQuOTk3MDQ4NiwzMC4zMDI1MzYzIEMzMS4xODM4NjUyLDMzLjkzMjYzNDMgMjcuMjIxMDI3OSwzNy42NzYzNTk4IDE5LjM3OTE1OTMsMzcuNjc2MzU5OCBMMTYuNjI1NTI2MSwzNy42NzYzNTk4IEMxNS4wOTgyNzE2LDM3LjY5MjU0MTIgMTMuODY0MTQ1MywzOC45MjU0Nzg2IDEzLjg0Nzk0ODMsNDAuNDUxMjYxNyBMMTMuODQ3OTQ4Myw0My45NzM3MTI3IEw0OC4xNjY1OTg4LDQzLjk3MzcxMjcgTDQ4LjE2NjU5ODgsMjMuNTIwNzcxNiBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMzAuMzIxODU4MywyMi4yMzQ5ODcyIEMyNy4zOTQ2MjY1LDE5LjQzNjE2MzcgMjQuNDYxNDA4NSwxNi42NDMzMjA2IDE4LjYwMDk1ODcsMTYuNjQzMzIwNiBMMTguNjAwOTU4NywyMi4xOTkxMDQ5IEMyMS4wODg2MjA5LDIyLjkyMDI5NDYgMjMuMzk3MTMzNywyNC4xNTQ5MzMzIDI1LjM3NzI5MDgsMjUuODIzMjIyNSBDMjcuMjE5MzIxLDI0LjkxOTM4MzQgMjguODkxOTE5LDIzLjcwNTU5MTcgMzAuMzIxODU4MywyMi4yMzQ5ODcyIFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Mi40Njc3NzUzLDE3LjYxMjE0NDEgQzM3LjYwMTAyNzksMTcuODg3MjQyMSAzNS4wMzI5NjU2LDIwLjMzMzIyMjUgMzIuMzI3MjIxNiwyMi45Mjg3MTI3IEMzMC43Mzg0NDU1LDI0LjU4MzIxMDMgMjguOTI0ODcyNSwyNi4wMDY1MDAxIDI2LjkzOTY3ODQsMjcuMTU2ODUgQzI3LjUzODI5NDMsMjcuNzE5MDA2OCAyOC4xNjY4NDEsMjguMjkzMTI0NSAyOC43NjU0NTY5LDI4Ljg2NzI0MjEgQzI5LjUzMTY4NTMsMjkuNTk2ODUgMzAuMzIxODU4MywzMC4zMzg0MTg2IDMxLjEyOTk4OTgsMzEuMDQ0MTA0OSBDMzEuOTYyMDY1OSwzMC4zMjA0Nzc0IDMyLjc3MDE5NzQsMjkuNTYwOTY3NiAzMy41OTAzMDEyLDI4Ljc4OTQ5NyBDMzYuMTIyNDQ2NSwyNi4zOTczNDAyIDM4LjczODM5ODEsMjMuOTQ1Mzc5NCA0Mi40Nzk3NDc2LDIyLjU2MzkwODggTDQyLjQ2Nzc3NTMsMTcuNjEyMTQ0MSBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+'>
+      <ui5-shellbar-item icon="sap-icon://refresh" slot="default" text="Shellbar Item 1"
+        id="refreshBtn">Refresh</ui5-shellbar-item>
+    </ui5-shellbar>
+    <!-- <ui5-side-navigation>
+      <ui5-side-navigation-item text="Modules" icon="product" id="navItemModules"></ui5-side-navigation-item>
+      <ui5-side-navigation-item text="Services" expanded icon="puzzle" id="navItemServices"></ui5-side-navigation-item>
+    </ui5-side-navigation> -->
 
-  <ui5-shellbar primary-title="Kyma modules">
-    <img slot="logo" src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjNweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSIwIDAgNjMgNjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+bG9nb19pY29uPC90aXRsZT4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJsb2dvX2ljb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNTk2NjU0LCAwLjAwMDExMSkiIGZpbGw9IiMwQjc0REUiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Mi41NTE1ODE1LDYwLjYyMzE0MTggTDE5LjQzOTAyMDksNjAuNjIzMTQxOCBDMTcuOTEwNzk2Miw2MC42MjcxMzczIDE2LjQ2NDQ5Nyw1OS45MzMzMTgyIDE1LjUxMjEwMDUsNTguNzM5MzAxIEwxLjA5NzQyOTI5LDQwLjY2NjU1NTkgQzAuMTQxNjc4OCwzOS40NzM2MTA2IC0wLjIxNTU0MjI0NCwzNy45MDk1MjA1IDAuMTI3NjcxNTA4LDM2LjQyMDQ3NzQgTDUuMjc1NzY4NCwxMy45MDQzMDEgQzUuNjEwNTg2NDksMTIuNDEzMjgwNyA2LjYxMjYxMzY1LDExLjE1ODY0NTkgNy45OTM0ODQ2NiwxMC41MDE0NTc4IEwyOC44MTMzNDYyLDAuNTAyMjQyMTU4IEMzMC4xOTA3NjM1LC0wLjE2NzQxNDA1MyAzMS43OTk4MzksLTAuMTY3NDE0MDUzIDMzLjE3NzI1NjIsMC41MDIyNDIxNTggTDU0LjAwMzEwNCwxMC41MTkzOTkgQzU1LjM4MDU3NzEsMTEuMTgwODU1OCA1Ni4zODEwODE2LDEyLjQzMzU4NCA1Ni43MjA4MjAyLDEzLjkyMjI0MjEgTDYxLjg2MjkzMSwzNi40Mzg0MTg2IEM2Mi4yMDYxNDQ3LDM3LjkyNzQ2MTcgNjEuODQ4OTIzNywzOS40OTE1NTE4IDYwLjg5MzE3MzIsNDAuNjg0NDk3IEw0Ni40Nzg1MDE5LDU4LjczOTMwMSBDNDUuNTI2MTA1NCw1OS45MzMzMTgyIDQ0LjA3OTgwNjMsNjAuNjI3MTM3MyA0Mi41NTE1ODE1LDYwLjYyMzE0MTggWiBNMjkuNzM1MjE0NywyLjM5MjA0NjA4IEw4LjkwOTM2NzAxLDEyLjQyMTE2MzcgQzguMTEwNjA5NjIsMTIuODA0NTAzIDcuNTMwODIzMjIsMTMuNTMxMjkwOCA3LjMzNTAwNzE1LDE0LjM5NDY5MzEgTDIuMTkyODk2NDIsMzYuOTA0ODg5MiBDMS45OTM3MzQwNiwzNy43NjcwNTkxIDIuMjAxMTAwODEsMzguNjcyODYzNiAyLjc1NTU5NTM4LDM5LjM2MjgzMDQgTDE3LjE2NDI4MDUsNTcuNDExNjUzOSBDMTcuNzEzNDcwMiw1OC4xMDY4MzI0IDE4LjU1MjU3MDIsNTguNTEwNTM2IDE5LjQzOTAyMDksNTguNTA2MTAyNSBMNDIuNTUxNTgxNSw1OC41MDYxMDI1IEM0My40MzgwMzIzLDU4LjUxMDUzNiA0NC4yNzcxMzIyLDU4LjEwNjgzMjQgNDQuODI2MzIyLDU3LjQxMTY1MzkgTDU5LjI2NDkzNzksMzkuMzYyODMwNCBDNTkuODE4MTU3LDM4LjY3MjI0MzEgNjAuMDIzMzg1MSwzNy43NjYxNDA4IDU5LjgyMTY1MDcsMzYuOTA0ODg5MiBMNTQuNjU1NTk1MywxNC4zOTQ2OTMxIEM1NC40NTk3NzkzLDEzLjUzMTI5MDggNTMuODc5OTkyOSwxMi44MDQ1MDMgNTMuMDgxMjM1NSwxMi40MjExNjM3IEwzMi4yNTUzODc3LDIuMzkyMDQ2MDggQzMxLjQ2MDM1MjUsMi4wMDM0NjU5NiAzMC41MzAyNDk5LDIuMDAzNDY1OTYgMjkuNzM1MjE0NywyLjM5MjA0NjA4IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTMuODI0MDAzNiwyMy40MDcxNDQxIEwxMy44MjQwMDM2LDM2LjI3MDk2NzYgQzE0LjY5MTUzMjQsMzUuODI4NDA4NSAxNS42NTE0NDIxLDM1LjU5Njg1ODcgMTYuNjI1NTI2MSwzNS41OTUxODMzIEwxOS4zNzkxNTkzLDM1LjU5NTE4MzMgQzIzLjA4MTg5NDEsMzUuNjg5MjYwMiAyNi43MDM3NDU3LDM0LjUwNDI2MjMgMjkuNjMzNDUsMzIuMjQwMTgzMyBDMjguODg1MTgwMSwzMS41NzYzNTk4IDI4LjE1NDg2ODcsMzAuODk0NTk1MSAyNy40NTQ0ODgxLDMwLjIyNDc5MTIgQzIzLjk0NjU5ODgsMjYuODY5NzkxMiAyMC4yNTMxMzg2LDIzLjY5NDIwMjkgMTMuODI0MDAzNiwyMy40MDcxNDQxIFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00OC4xNjY1OTg4LDIzLjUyMDc3MTYgQzQxLjg0NTIxNDcsMjMuODMxNzUxOSAzOC41MTY5MTAyLDI2Ljk3NzQzODIgMzQuOTk3MDQ4NiwzMC4zMDI1MzYzIEMzMS4xODM4NjUyLDMzLjkzMjYzNDMgMjcuMjIxMDI3OSwzNy42NzYzNTk4IDE5LjM3OTE1OTMsMzcuNjc2MzU5OCBMMTYuNjI1NTI2MSwzNy42NzYzNTk4IEMxNS4wOTgyNzE2LDM3LjY5MjU0MTIgMTMuODY0MTQ1MywzOC45MjU0Nzg2IDEzLjg0Nzk0ODMsNDAuNDUxMjYxNyBMMTMuODQ3OTQ4Myw0My45NzM3MTI3IEw0OC4xNjY1OTg4LDQzLjk3MzcxMjcgTDQ4LjE2NjU5ODgsMjMuNTIwNzcxNiBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMzAuMzIxODU4MywyMi4yMzQ5ODcyIEMyNy4zOTQ2MjY1LDE5LjQzNjE2MzcgMjQuNDYxNDA4NSwxNi42NDMzMjA2IDE4LjYwMDk1ODcsMTYuNjQzMzIwNiBMMTguNjAwOTU4NywyMi4xOTkxMDQ5IEMyMS4wODg2MjA5LDIyLjkyMDI5NDYgMjMuMzk3MTMzNywyNC4xNTQ5MzMzIDI1LjM3NzI5MDgsMjUuODIzMjIyNSBDMjcuMjE5MzIxLDI0LjkxOTM4MzQgMjguODkxOTE5LDIzLjcwNTU5MTcgMzAuMzIxODU4MywyMi4yMzQ5ODcyIFoiIGlkPSJQYXRoIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00Mi40Njc3NzUzLDE3LjYxMjE0NDEgQzM3LjYwMTAyNzksMTcuODg3MjQyMSAzNS4wMzI5NjU2LDIwLjMzMzIyMjUgMzIuMzI3MjIxNiwyMi45Mjg3MTI3IEMzMC43Mzg0NDU1LDI0LjU4MzIxMDMgMjguOTI0ODcyNSwyNi4wMDY1MDAxIDI2LjkzOTY3ODQsMjcuMTU2ODUgQzI3LjUzODI5NDMsMjcuNzE5MDA2OCAyOC4xNjY4NDEsMjguMjkzMTI0NSAyOC43NjU0NTY5LDI4Ljg2NzI0MjEgQzI5LjUzMTY4NTMsMjkuNTk2ODUgMzAuMzIxODU4MywzMC4zMzg0MTg2IDMxLjEyOTk4OTgsMzEuMDQ0MTA0OSBDMzEuOTYyMDY1OSwzMC4zMjA0Nzc0IDMyLjc3MDE5NzQsMjkuNTYwOTY3NiAzMy41OTAzMDEyLDI4Ljc4OTQ5NyBDMzYuMTIyNDQ2NSwyNi4zOTczNDAyIDM4LjczODM5ODEsMjMuOTQ1Mzc5NCA0Mi40Nzk3NDc2LDIyLjU2MzkwODggTDQyLjQ2Nzc3NTMsMTcuNjEyMTQ0MSBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+'>     
-    <ui5-shellbar-item icon="sap-icon://refresh" slot="default" text="Shellbar Item 1" id="refreshBtn">Refresh</ui5-shellbar-item>
-  </ui5-shellbar>
-  <div id="app">
-    If the page is not loading, please <a href="https://kyma-project.github.io/community-modules/index.html" download>download the latest version</a> and save it in some directory.
-    You can do this also from command line:
-    <pre>curl https://kyma-project.github.io/community-modules/index.html -o index.html</pre>
-    Then execute the following command to start the local server:
-    <pre>kubectl proxy -w='.'</pre>
-    and open Web UI with this link: <a href="http://127.0.0.1:8001/static/">http://127.0.0.1:8001/static/</a>
+    <div class="content" id="app">
+      If the page is not loading, please <a href="https://kyma-project.github.io/community-modules/index.html"
+        download>download the latest version</a> and save it in some directory.
+      You can do this also from command line:
+      <pre>curl https://kyma-project.github.io/community-modules/index.html -o index.html</pre>
+      Then execute the following command to start the local server:
+      <pre>kubectl proxy -w='.'</pre>
+      and open Web UI with this link: <a href="http://127.0.0.1:8001/static/">http://127.0.0.1:8001/static/</a>
+    </div>
+    <div id="overlay"></div>
   </div>
-  <div id="overlay"></div>
   <script type="module" src="/main.js"></script>
 </body>
 

diff --git a/main.js b/main.js
@@ -1,34 +1,44 @@
+import '@ui5/webcomponents/dist/Badge.js';
 import '@ui5/webcomponents/dist/Button';
-import '@ui5/webcomponents/dist/Table';
-import '@ui5/webcomponents/dist/TableColumn';
-import '@ui5/webcomponents/dist/TableRow';
-import '@ui5/webcomponents/dist/TableCell';
 import '@ui5/webcomponents/dist/Card';
 import '@ui5/webcomponents/dist/CardHeader';
-import '@ui5/webcomponents/dist/ResponsivePopover.js';
-import '@ui5/webcomponents/dist/Badge.js';
-import '@ui5/webcomponents/dist/Select.js';
-import '@ui5/webcomponents/dist/Option.js';
 import '@ui5/webcomponents/dist/Icon.js';
 import '@ui5/webcomponents/dist/Link.js';
+import '@ui5/webcomponents/dist/Option.js';
+import '@ui5/webcomponents/dist/ResponsivePopover.js';
+import '@ui5/webcomponents/dist/Select.js';
+import '@ui5/webcomponents/dist/Table';
+import '@ui5/webcomponents/dist/TableCell';
+import '@ui5/webcomponents/dist/TableColumn';
+import '@ui5/webcomponents/dist/TableRow';
 
-import "@ui5/webcomponents-icons/dist/delete.js";
-import "@ui5/webcomponents-icons/dist/refresh.js";
-import "@ui5/webcomponents-icons/dist/settings.js";
 import "@ui5/webcomponents-icons/dist/add-product.js";
+import "@ui5/webcomponents-icons/dist/calendar.js";
 import "@ui5/webcomponents-icons/dist/chain-link.js";
+import "@ui5/webcomponents-icons/dist/delete.js";
+import "@ui5/webcomponents-icons/dist/group.js";
+import "@ui5/webcomponents-icons/dist/history.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+import "@ui5/webcomponents-icons/dist/locate-me.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
+import "@ui5/webcomponents-icons/dist/product.js";
+import "@ui5/webcomponents-icons/dist/puzzle.js";
+import "@ui5/webcomponents-icons/dist/refresh.js";
+import "@ui5/webcomponents-icons/dist/settings.js";
 
 import "@ui5/webcomponents-fiori/dist/ShellBar.js";
 import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
-import { get, deleteResource, apply, patchResource } from "./k8s.js";
-import modules from "./model.js";
-import {editor} from 'monaco-editor';
+import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+
+import * as jsYaml from 'js-yaml';
+import { editor } from 'monaco-editor';
 import yamlWorker from 'monaco-yaml/yaml.worker?worker';
-import * as jsYaml from 'js-yaml'
+import { apply, deleteResource, get, patchResource } from "./k8s.js";
+import modules from "./model.js";
 
 self.MonacoEnvironment = {
-  getWorker: function (workerId, label) {
+  getWorker: function () {
     return yamlWorker();
   }
 };
@@ -88,15 +98,15 @@ function render(modules) {
   let managed = modules.filter(m => m.managed)
   if (managed.length > 0) {
     app.appendChild(modulesCard(managedModulesTable(managed), 'Managed Modules',
-    'Modules managed by the Kyma Control Plane (SLA, auto-update with the release channel)'))
+      'Modules managed by the Kyma Control Plane (SLA, auto-update with the release channel)'))
   }
 
   let installed = modules.filter(m => m.actualVersion && !m.managed)
   if (installed.length > 0) {
     app.appendChild(
       modulesCard(installedModulesTable(installed), 'User Modules',
         'Modules installed by the user (no SLA, no auto-update)'))
-  
+
   }
 
   app.appendChild(modulesCard(availableModulesTable(modules), 'Available Modules',
@@ -208,7 +218,7 @@ async function deleteModule(m, btn) {
       }
       if (m.managed) {
         removeModuleFromKymaCR(m.name)
-      }  
+      }
       setTimeout(() => { deleteModule(m, btn) }, 5000)
     })
   } else {
@@ -239,28 +249,20 @@ function configureBtn(m) {
   btn.addEventListener('click', async () => {
     const div = document.createElement('div')
     div.setAttribute('class', 'code')
-    popover(m.name + ' Configuration', div, btn, "Close", async () => {})
-    let code  = jsYaml.dump(m.config)
+    popover(m.name + ' Configuration', div, btn, "Close", async () => { })
+    let code = jsYaml.dump(m.config)
     setTimeout(() => {
       editor.create(div, {
-      value: code,
-      language: 'yaml'
-    });},0)
-
-  })
-  return btn
-}
+        value: code,
+        language: 'yaml'
+      });
+    }, 0)
 
-function refreshBtn() {
-  const btn = document.createElement('ui5-button')
-  btn.setAttribute('icon', 'refresh')
-  btn.textContent = 'Refresh'
-  btn.addEventListener('click', () => {
-    installedManagers(modules).then(managedModules).then(render)
   })
   return btn
 }
 
+
 function removeBtn(m) {
   const btn = document.createElement('ui5-button')
   btn.setAttribute('icon', 'delete')
@@ -333,7 +335,7 @@ function installPanel(m) {
   managed.setAttribute('text', 'add as managed module (auto-update with the release channel)')
   managed.setAttribute('id', 'managedCheckbox')
   const version = dropdownSelector(m.name + '-version', 'Version', m.versions
-  .filter(v => v.resources).map(v => v.version).reverse())
+    .filter(v => v.resources).map(v => v.version).reverse())
   const channel = dropdownSelector(m.name + '-channel', 'Channel', channelList(m))
   managed.addEventListener('change', () => {
     if (managed.checked) {
@@ -373,7 +375,7 @@ function installBtn(m) {
   btn.setAttribute('icon', 'add-product')
   let options = installPanel(m)
   btn.addEventListener('click', () => {
-    const pop = popover(`Add ${m.name}`, options, btn, "Install", async () => {
+    popover(`Add ${m.name}`, options, btn, "Install", async () => {
       if (options.querySelector('#managedCheckbox').checked) {
         console.log('adding', m.name, options.getChannel())
         addModuleToKymaCR(m.name, options.querySelector('#defaultConfigCheckbox').checked, options.getChannel())
@@ -529,6 +531,13 @@ function registerListeners() {
   document.querySelector('#refreshBtn').addEventListener('click', () => {
     installedManagers(modules).then(managedModules).then(render)
   })
+  // const sidenav = document.querySelector("ui5-side-navigation");
+  // document.getElementById("toggle").addEventListener("click", () => {
+  //   sidenav.toggleAttribute("collapsed");
+  // });
+  // document.querySelector('#navItemModules').addEventListener('item-click', () => {
+  //   installedManagers(modules).then(managedModules).then(render)
+  // })
 }
 registerListeners()
 render(modules)