feat(sidebar): add indicator for an openable submenu (#5398) [EE-538]

app/kubernetes/components/kubernetes-sidebar-content/kubernetesSidebarContent.html

@@ -1,31 +0,0 @@
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.dashboard({endpointId: $ctrl.endpointId})" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer-alt fa-fw"></span></a>
-</li>
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.resourcePools({endpointId: $ctrl.endpointId})" ui-sref-active="active">Namespaces <span class="menu-icon fa fa-layer-group fa-fw"></span></a>
-</li>
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.applications({endpointId: $ctrl.endpointId})" ui-sref-active="active">Applications <span class="menu-icon fa fa-laptop-code fa-fw"></span></a>
-</li>
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.configurations({endpointId: $ctrl.endpointId})" ui-sref-active="active">Configurations <span class="menu-icon fa fa-file-code fa-fw"></span></a>
-</li>
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.volumes({endpointId: $ctrl.endpointId})" ui-sref-active="active">Volumes <span class="menu-icon fa fa-database fa-fw"></span></a>
-</li>
-<li class="sidebar-list">
-  <a ui-sref="kubernetes.cluster({endpointId: $ctrl.endpointId})" ui-sref-active="active">Cluster <span class="menu-icon fa fa-server fa-fw"></span></a>
-  <div
-    ng-if="
-      $ctrl.adminAccess &&
-      ['kubernetes.cluster', 'portainer.endpoints.endpoint.kubernetesConfig', 'kubernetes.registries', 'kubernetes.registries.access'].includes($ctrl.currentState)
-    "
-  >
-    <div class="sidebar-sublist">
-      <a ui-sref="portainer.endpoints.endpoint.kubernetesConfig({id: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
-    </div>
-    <div class="sidebar-sublist">
-      <a ui-sref="kubernetes.registries({endpointId: $ctrl.endpointId})" ui-sref-active="active">Registries</a>
-    </div>
-  </div>
-</li>

app/kubernetes/components/kubernetes-sidebar-content/kubernetesSidebarContent.js

@@ -1,8 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesSidebarContent', {
-  templateUrl: './kubernetesSidebarContent.html',
-  bindings: {
-    adminAccess: '<',
-    endpointId: '<',
-    currentState: '<',
-  },
-});

app/kubernetes/components/kubernetes-sidebar/index.js

@@ -0,0 +1,9 @@
+import angular from 'angular';
+
+angular.module('portainer.kubernetes').component('kubernetesSidebar', {
+  templateUrl: './kubernetes-sidebar.html',
+  bindings: {
+    endpointId: '<',
+    isSidebarOpen: '<',
+  },
+});

app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html

@@ -0,0 +1,38 @@
+<sidebar-menu-item path="kubernetes.dashboard" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-tachometer-alt fa-fw" class-name="sidebar-list">
+  Dashboard
+</sidebar-menu-item>
+
+<sidebar-menu-item path="kubernetes.resourcePools" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-layer-group fa-fw" class-name="sidebar-list">
+  Namespaces
+</sidebar-menu-item>
+
+<sidebar-menu-item path="kubernetes.applications" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-laptop-code fa-fw" class-name="sidebar-list">
+  Applications
+</sidebar-menu-item>
+
+<sidebar-menu-item path="kubernetes.configurations" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-file-code fa-fw" class-name="sidebar-list">
+  Configurations
+</sidebar-menu-item>
+
+<sidebar-menu-item path="kubernetes.volumes" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-database fa-fw" class-name="sidebar-list">
+  Volumes
+</sidebar-menu-item>
+
+<sidebar-menu
+  icon-class="fa-server fa-fw"
+  label="Cluster"
+  path="kubernetes.cluster"
+  path-params="{ endpointId: $ctrl.endpointId }"
+  is-sidebar-open="$ctrl.isSidebarOpen"
+  children-paths="['kubernetes.cluster', 'portainer.endpoints.endpoint.kubernetesConfig', 'kubernetes.registries', 'kubernetes.registries.access']"
+>
+  <div ng-if="$ctrl.adminAccess">
+    <sidebar-menu-item authorization="K8sClusterSetupRW" path="portainer.endpoints.endpoint.kubernetesConfig" path-params="{ id: $ctrl.endpointId }" class-name="sidebar-sublist">
+      Setup
+    </sidebar-menu-item>
+
+    <sidebar-menu-item authorization="PortainerRegistryList" path="kubernetes.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist">
+      Registries
+    </sidebar-menu-item>
+  </div>
+</sidebar-menu>