@rancher/shell 0.3.23 → 0.3.25

package/components/nav/TopLevelMenu.vue

@@ -1,10 +1,11 @@
 <script>
 import BrandImage from '@shell/components/BrandImage';
-import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
+import ClusterIconMenu from '@shell/components/ClusterIconMenu';
 import IconOrSvg from '../IconOrSvg';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { mapGetters } from 'vuex';
 import { CAPI, MANAGEMENT } from '@shell/config/types';
-import { mapPref, MENU_MAX_CLUSTERS } from '@shell/store/prefs';
+import { MENU_MAX_CLUSTERS } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import { ucFirst } from '@shell/utils/string';
 import { KEY } from '@shell/utils/platform';
@@ -13,13 +14,14 @@ import { LEGACY } from '@shell/store/features';
 import { SETTING } from '@shell/config/settings';
 import { filterOnlyKubernetesClusters, filterHiddenLocalCluster } from '@shell/utils/cluster';
 import { isRancherPrime } from '@shell/config/version';
+import Pinned from '@shell/components/nav/Pinned';
 
 export default {
-
   components: {
     BrandImage,
-    ClusterProviderIcon,
-    IconOrSvg
+    ClusterIconMenu,
+    IconOrSvg,
+    Pinned
   },
 
   data() {
@@ -27,11 +29,15 @@ export default {
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
     return {
-      shown:         false,
+      shown:             false,
       displayVersion,
       fullVersion,
-      clusterFilter: '',
+      clusterFilter:     '',
       hasProvCluster,
+      maxClustersToShow: MENU_MAX_CLUSTERS,
+      emptyCluster:      BLANK_CLUSTER,
+      showPinClusters:   false,
+      searchActive:      false,
     };
   },
 
@@ -53,6 +59,24 @@ export default {
       },
     },
 
+    globalBannerSettings() {
+      const settings = this.$store.getters['management/all'](MANAGEMENT.SETTING);
+      const bannerSettings = settings.find((s) => s.id === SETTING.BANNERS);
+
+      if (bannerSettings) {
+        const parsed = JSON.parse(bannerSettings.value);
+        const {
+          showFooter, showHeader, bannerFooter, bannerHeader
+        } = parsed;
+
+        return {
+          headerFont: showHeader === 'true' ? this.pxToEm(bannerHeader.fontSize) : '0px',
+          footerFont: showFooter === 'true' ? this.pxToEm(bannerFooter.fontSize) : '0px'
+        };
+      }
+
+      return undefined;
+    },
     legacyEnabled() {
       return this.features(LEGACY);
     },
@@ -74,9 +98,9 @@ export default {
           return p;
         }, {});
 
-        // Filter to only show mgmt clusters that exist for the available provisionning clusters
+        // Filter to only show mgmt clusters that exist for the available provisioning clusters
         // Addresses issue where a mgmt cluster can take some time to get cleaned up after the corresponding
-        // provisionning cluster has been deleted
+        // provisioning cluster has been deleted
         kubeClusters = kubeClusters.filter((c) => !!available[c]);
       }
 
@@ -91,7 +115,10 @@ export default {
           providerNavLogo: x.providerMenuLogo,
           badge:           x.badge,
           isLocal:         x.isLocal,
-          isHarvester:     x.isHarvester
+          isHarvester:     x.isHarvester,
+          pinned:          x.pinned,
+          pin:             () => x.pin(),
+          unpin:           () => x.unpin()
         };
       });
     },
@@ -101,12 +128,43 @@ export default {
 
       const out = search ? this.clusters.filter((item) => item.label.toLowerCase().includes(search)) : this.clusters;
 
-      const sorted = sortBy(out, ['name:desc', 'label']);
+      const sorted = sortBy(out, ['ready:desc', 'label']);
+
+      if (search) {
+        this.showPinClusters = false;
+        this.searchActive = !sorted.length > 0;
+
+        return sorted;
+      }
+      this.showPinClusters = true;
+      this.searchActive = false;
+
+      if (sorted.length >= this.maxClustersToShow) {
+        const sortedPinOut = sorted.filter((item) => !item.pinned).slice(0, this.maxClustersToShow);
+
+        return sortedPinOut;
+      } else {
+        return sorted.filter((item) => !item.pinned);
+      }
+    },
+
+    pinFiltered() {
+      const out = this.clusters.filter((item) => item.pinned);
+      const sorted = sortBy(out, ['ready:desc', 'label']);
 
       return sorted;
     },
 
-    maxClustersToShow: mapPref(MENU_MAX_CLUSTERS),
+    pinnedClustersHeight() {
+      const pinCount = this.clusters.filter((item) => item.pinned).length;
+      const height = pinCount > 2 ? (pinCount * 43) : 90;
+
+      return `min-height: ${ height }px`;
+    },
+
+    clusterFilterCount() {
+      return this.clusterFilter ? this.clustersFiltered.length : this.clusters.length;
+    },
 
     multiClusterApps() {
       const options = this.options;
@@ -198,18 +256,19 @@ export default {
   },
 
   methods: {
-    // Cluster list number of items shown is configurable via user preference
-    setClusterListHeight(maxToShow) {
-      const el = this.$refs.clusterList;
-      const max = Math.min(maxToShow, this.clusters.length);
-
-      if (el) {
-        const h = 33 * max;
-
-        el.style.minHeight = `${ h }px`;
-        el.style.maxHeight = `${ h }px`;
-      }
+    /**
+     * Converts a pixel value to an em value based on the default font size.
+     * @param {number} elementFontSize - The font size of the element in pixels.
+     * @param {number} [defaultFontSize=14] - The default font size in pixels.
+     * @returns {string} The converted value in em units.
+     */
+    pxToEm(elementFontSize, defaultFontSize = 14) {
+      const lineHeightInPx = 2 * parseInt(elementFontSize);
+      const lineHeightInEm = lineHeightInPx / defaultFontSize;
+
+      return `${ lineHeightInEm }em`;
     },
+
     handler(e) {
       if (e.keyCode === KEY.ESCAPE ) {
         this.hide();
@@ -218,13 +277,13 @@ export default {
 
     hide() {
       this.shown = false;
+      if (this.clustersFiltered === 0) {
+        this.clusterFilter = '';
+      }
     },
 
     toggle() {
       this.shown = !this.shown;
-      this.$nextTick(() => {
-        this.setClusterListHeight(this.maxClustersToShow);
-      });
     },
 
     async goToHarvesterCluster() {
@@ -234,29 +293,27 @@ export default {
         await localCluster.goToHarvesterCluster();
       } catch {
       }
-    }
+    },
+    getTooltipConfig(item) {
+      if (!this.shown && !item) {
+        return;
+      }
+
+      if (!this.shown) {
+        return {
+          content:       this.shown ? null : item,
+          placement:     'right',
+          popperOptions: { modifiers: { preventOverflow: { enabled: false }, hide: { enabled: false } } }
+        };
+      } else {
+        return { content: undefined };
+      }
+    },
   }
 };
 </script>
 <template>
   <div>
-    <div
-      data-testid="top-level-menu"
-      class="menu"
-      :class="{'raised': shown, 'unraised':!shown}"
-      @click="toggle()"
-    >
-      <svg
-        class="menu-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-      ><path
-        d="M0 0h24v24H0z"
-        fill="none"
-      /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
-    </div>
     <div
       v-if="shown"
       class="side-menu-glass"
@@ -264,24 +321,44 @@ export default {
     />
     <transition name="fade">
       <div
-        v-if="shown"
         data-testid="side-menu"
         class="side-menu"
+        :class="{'menu-open': shown, 'menu-close':!shown}"
+        :style="{'marginBottom':
+                   globalBannerSettings?.footerFont,
+                 'marginTop':
+                   globalBannerSettings?.headerFont}"
         tabindex="-1"
       >
         <div class="title">
-          <div class="menu-spacer" />
+          <div
+            data-testid="top-level-menu"
+            class="menu"
+            @click="toggle()"
+          >
+            <svg
+              class="menu-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+            ><path
+              d="M0 0h24v24H0z"
+              fill="none"
+            /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
+          </div>
           <div class="side-menu-logo">
             <BrandImage file-name="rancher-logo.svg" />
           </div>
         </div>
         <div class="body">
-          <div @click="hide()">
+          <div>
             <nuxt-link
               class="option cluster selector home"
               :to="{ name: 'home' }"
             >
               <svg
+                v-tooltip="getTooltipConfig(t('nav.home'))"
                 xmlns="http://www.w3.org/2000/svg"
                 height="24"
                 viewBox="0 0 24 24"
@@ -290,16 +367,41 @@ export default {
                 d="M0 0h24v24H0z"
                 fill="none"
               /><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
-              <div>
+              <div class="home-text">
                 {{ t('nav.home') }}
               </div>
             </nuxt-link>
-          </div>
+            <div
+              v-if="showClusterSearch"
+              class="clusters-search"
+            >
+              <div class="clusters-search-count">
+                <span>{{ clusterFilterCount }}</span>
+                {{ t('nav.search.clusters') }}
+                <i
+                  v-if="clusterFilter"
+                  class="icon icon-filter_alt"
+                />
+              </div>
 
-          <template v-if="hciApps.length">
-            <div class="category">
-              {{ t('nav.categories.hci') }}
+              <div
+                class="search"
+              >
+                <input
+                  ref="clusterFilter"
+                  v-model="clusterFilter"
+                  :placeholder="t('nav.search.placeholder')"
+                >
+                <i
+                  v-if="clusterFilter"
+                  class="icon icon-close"
+                  @click="clusterFilter=''"
+                />
+              </div>
             </div>
+          </div>
+          <template v-if="hciApps.length">
+            <div class="category" />
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -334,147 +436,230 @@ export default {
           </template>
 
           <template v-if="clusters && !!clusters.length">
-            <div class="category">
-              {{ t('nav.categories.explore') }}
-            </div>
-
-            <div
-              v-if="showClusterSearch"
-              class="search"
-            >
-              <input
-                ref="clusterFilter"
-                v-model="clusterFilter"
-                :placeholder="t('nav.search.placeholder')"
-              >
-              <i
-                v-if="clusterFilter"
-                class="icon icon-close"
-                @click="clusterFilter=''"
-              />
-            </div>
             <div
               ref="clusterList"
               class="clusters"
+              :style="pinnedClustersHeight"
             >
               <div
-                v-for="c in clustersFiltered"
-                :key="c.id"
-                @click="hide()"
+                v-if="showPinClusters && pinFiltered.length"
+                class="clustersPinned"
               >
-                <nuxt-link
-                  v-if="c.ready"
-                  class="cluster selector option"
-                  :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                <div
+                  v-for="c in pinFiltered"
+                  :key="c.id"
+                  @click="hide()"
                 >
-                  <ClusterProviderIcon
-                    :small="true"
-                    :cluster="c"
-                    class="rancher-provider-icon mr-10"
-                  />
-                  <div class="cluster-name">
-                    {{ c.label }}
-                  </div>
-                </nuxt-link>
-                <span
-                  v-else
-                  class="option-disabled cluster selector disabled"
+                  <nuxt-link
+                    v-if="c.ready"
+                    :data-testid="`menu-cluster-${ c.id }`"
+                    class="cluster selector option"
+                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">
+                      {{ c.label }}
+                    </div>
+                    <Pinned
+                      :cluster="c"
+                    />
+                  </nuxt-link>
+                  <span
+                    v-else
+                    class="option cluster selector disabled"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">{{ c.label }}</div>
+                    <Pinned
+                      :cluster="c"
+                    />
+                  </span>
+                </div>
+                <div
+                  v-if="clustersFiltered.length > 0"
+                  class="category-title"
                 >
-                  <ClusterProviderIcon
-                    :small="true"
-                    :cluster="c"
-                    class="rancher-provider-icon mr-10"
-                  />
-                  <div class="cluster-name">{{ c.label }}</div>
-                </span>
+                  <hr>
+                </div>
+              </div>
+              <div class="clustersList">
+                <div
+                  v-for="c in clustersFiltered"
+                  :key="c.id"
+                  @click="hide()"
+                >
+                  <nuxt-link
+                    v-if="c.ready"
+                    :data-testid="`menu-cluster-${ c.id }`"
+                    class="cluster selector option"
+                    :to="{ name: 'c-cluster-explorer', params: { cluster: c.id } }"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">
+                      {{ c.label }}
+                    </div>
+                    <Pinned
+                      :class="{'showPin': c.pinned}"
+                      :cluster="c"
+                    />
+                  </nuxt-link>
+                  <span
+                    v-else
+                    class="option cluster selector disabled"
+                  >
+                    <ClusterIconMenu
+                      v-tooltip="getTooltipConfig(c.label)"
+                      :cluster="c"
+                      class="rancher-provider-icon"
+                    />
+                    <div class="cluster-name">{{ c.label }}</div>
+                    <Pinned
+                      :class="{'showPin': c.pinned}"
+                      :cluster="c"
+                    />
+                  </span>
+                </div>
               </div>
               <div
-                v-if="clustersFiltered.length === 0"
+                v-if="(clustersFiltered.length === 0 || pinFiltered.length === 0) && searchActive"
                 class="none-matching"
               >
                 {{ t('nav.search.noResults') }}
               </div>
             </div>
-          </template>
 
-          <template v-if="multiClusterApps.length">
-            <div class="category">
-              {{ t('nav.categories.multiCluster') }}
-            </div>
-            <div
-              v-for="a in multiClusterApps"
-              :key="a.label"
-              @click="hide()"
+            <nuxt-link
+              v-if="clusters.length > maxClustersToShow"
+              class="clusters-all"
+              :to="{name: 'c-cluster-product-resource', params: {
+                cluster: emptyCluster,
+                product: 'manager',
+                resource: 'provisioning.cattle.io.cluster'
+              } }"
             >
-              <nuxt-link
-                class="option"
-                :to="a.to"
-              >
-                <IconOrSvg
-                  :icon="a.icon"
-                  :src="a.svg"
-                />
-                <div>{{ a.label }}</div>
-              </nuxt-link>
-            </div>
+              <span>
+                {{ shown ? t('nav.seeAllClusters') : t('nav.seeAllClustersCollapsed') }}
+                <i class="icon icon-chevron-right" />
+              </span>
+            </nuxt-link>
           </template>
-          <template v-if="legacyEnabled">
-            <div class="category">
-              {{ t('nav.categories.legacy') }}
-            </div>
-            <div
-              v-for="a in legacyApps"
-              :key="a.label"
-              @click="hide()"
-            >
-              <nuxt-link
-                class="option"
-                :to="a.to"
+
+          <div class="category">
+            <template v-if="multiClusterApps.length">
+              <div
+                class="category-title"
               >
-                <IconOrSvg
-                  :icon="a.icon"
-                  :src="a.svg"
-                />
-                <div>{{ a.label }}</div>
-              </nuxt-link>
-            </div>
-          </template>
-          <template v-if="configurationApps.length">
-            <div class="category">
-              {{ t('nav.categories.configuration') }}
-            </div>
-            <div
-              v-for="a in configurationApps"
-              :key="a.label"
-              @click="hide()"
-            >
-              <nuxt-link
-                class="option"
-                :to="a.to"
+                <hr>
+                <span>
+                  {{ t('nav.categories.multiCluster') }}
+                </span>
+              </div>
+              <div
+                v-for="a in multiClusterApps"
+                :key="a.label"
+                @click="hide()"
               >
-                <IconOrSvg
-                  :icon="a.icon"
-                  :src="a.svg"
-                />
-                <div>{{ a.label }}</div>
-              </nuxt-link>
-            </div>
-          </template>
-          <div class="pad" />
+                <nuxt-link
+                  class="option"
+                  :to="a.to"
+                >
+                  <IconOrSvg
+                    v-tooltip="getTooltipConfig(a.label)"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <span class="option-link">{{ a.label }}</span>
+                </nuxt-link>
+              </div>
+            </template>
+            <template v-if="legacyEnabled">
+              <div
+                class="category-title"
+              >
+                <hr>
+                <span>
+                  {{ t('nav.categories.legacy') }}
+                </span>
+              </div>
+              <div
+                v-for="a in legacyApps"
+                :key="a.label"
+                @click="hide()"
+              >
+                <nuxt-link
+                  class="option"
+                  :to="a.to"
+                >
+                  <IconOrSvg
+                    v-tooltip="getTooltipConfig(a.label)"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <div>{{ a.label }}</div>
+                </nuxt-link>
+              </div>
+            </template>
+            <template v-if="configurationApps.length">
+              <div
+                class="category-title"
+              >
+                <hr>
+                <span>
+                  {{ t('nav.categories.configuration') }}
+                </span>
+              </div>
+              <div
+                v-for="a in configurationApps"
+                :key="a.label"
+                @click="hide()"
+              >
+                <nuxt-link
+                  class="option"
+                  :to="a.to"
+                >
+                  <IconOrSvg
+                    v-tooltip="getTooltipConfig(a.label)"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <div>{{ a.label }}</div>
+                </nuxt-link>
+              </div>
+            </template>
+          </div>
         </div>
-        <div class="footer">
+        <div
+          class="footer"
+        >
           <div
             v-if="canEditSettings"
+            class="support"
             @click="hide()"
           >
-            <nuxt-link :to="{name: 'support'}">
+            <nuxt-link
+              :to="{name: 'support'}"
+            >
               {{ t('nav.support', {hasSupport}) }}
             </nuxt-link>
           </div>
-          <div @click="hide()">
+          <div
+            class="version"
+            @click="hide()"
+          >
             <nuxt-link
               :to="{ name: 'about' }"
-              class="version"
             >
               {{ t('about.title') }}
             </nuxt-link>
@@ -485,41 +670,11 @@ export default {
   </div>
 </template>
 
-<style scoped>
-  .cluster.disabled > * {
-    cursor: not-allowed;
-    filter: grayscale(1);
-    color: var(--muted);
-  }
-</style>
-
 <style lang="scss">
   .localeSelector, .footer-tooltip {
     z-index: 1000;
   }
 
-  .cluster {
-    &.selector:not(.disabled):hover {
-      color: var(--primary-hover-text);
-      background: var(--primary-hover-bg);
-      border-radius: 5px;
-      text-decoration: none;
-
-      .rancher-provider-icon {
-        .rancher-icon-fill {
-          fill: var(--primary-hover-text);;
-        }
-      }
-    }
-
-    .rancher-provider-icon {
-      .rancher-icon-fill {
-        // Should match .option color
-        fill: var(--link);
-      }
-    }
-  }
-
   .localeSelector {
     .popover-inner {
       padding: 10px 0;
@@ -533,111 +688,56 @@ export default {
       outline: 0;
     }
   }
-
 </style>
 
 <style lang="scss" scoped>
   $clear-search-size: 20px;
   $icon-size: 25px;
-  $option-padding: 4px;
+  $option-padding: 9px;
+  $option-padding-left: 14px;
   $option-height: $icon-size + $option-padding + $option-padding;
 
-  .option {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    color: var(--link);
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:focus {
-      outline: 0;
-      > div {
-        text-decoration: underline;
-      }
-    }
-
-    > i {
-      width: $icon-size;
-      font-size: $icon-size;
-      margin-right: 8px;
-    }
-    svg {
-      margin-right: 8px;
-      fill: var(--link);
-    }
-    img {
-      margin-right: 8px;
-    }
-
-    > div {
-      color: var(--link);
-    }
+  .side-menu {
+    .menu {
+      position: absolute;
+      width: $app-bar-collapsed-width;
+      height: 54px;
+      top: 0;
+      grid-area: menu;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-    &:hover {
-      color: var(--primary-hover-text);
-      background: var(--primary-hover-bg);
-      border-radius: 5px;
-      > div {
-        color: var(--primary-hover-text);
-      }
-      svg {
-        fill: var(--primary-hover-text);
-      }
-      div {
-        color: var(--primary-hover-text);
+      .menu-icon {
+        width: 25px;
+        height: 25px;
+        fill: var(--header-btn-text);
       }
     }
-  }
-
-  .option, .option-disabled {
-    padding: $option-padding 0 $option-padding 10px;
-  }
-
-  .menu {
-    position: absolute;
-    left: 0;
-    width: 55px;
-    height: 54px;
-    top: 0;
-    grid-area: menu;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover {
-      background-color: var(--topmost-light-hover);
-    }
-    .menu-icon {
-      width: 24px;
-      height: 24px;
-      fill: var(--header-btn-text);
-    }
-    &.raised {
-      z-index: 200;
-    }
-  }
 
-  .side-menu {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0px;
     bottom: 0;
-    width: 280px;
+    width: $app-bar-collapsed-width;
     background-color: var(--topmenu-bg);
     z-index: 100;
     border-right: 1px solid var(--topmost-border);
-    box-shadow: 0 0 15px 4px var(--topmost-shadow);
     display: flex;
     flex-direction: column;
     padding: 0;
+    overflow: hidden;
+    transition: width 500ms;
 
     &:focus {
       outline: 0;
     }
 
+     &.menu-open {
+      width: 300px;
+    }
+
     .title {
       display: flex;
       height: 55px;
@@ -646,64 +746,150 @@ export default {
       border-bottom: 1px solid var(--nav-border);
       justify-content: flex-start;
       align-items: center;
+
       .menu {
         display: flex;
         justify-content: center;
-        width: 55px;
-        margin-right: 10px;
       }
       .menu-icon {
-        width: 24px;
-        height: 24px;
+        width: 25px;
+        height: 25px;
       }
-      .menu-spacer {
-        width: 55px;
+    }
+    .home {
+      svg {
+        width: 25px;
+        height: 25px;
+        margin-left: 9px;
       }
     }
+    .home-text {
+      margin-left: $option-padding-left - 7;
+    }
     .body {
       flex: 1;
       display: flex;
       flex-direction: column;
-      margin: 10px 20px;
-      overflow-y: auto;
-
-      .category {
-        padding: 10px 0;
-        text-transform: uppercase;
-        opacity: 0.8;
-        margin-top: 10px;
-      }
-
-      .home {
-        color: var(--link);
-      }
+      margin: 10px 0;
+      width: 300px;
+      overflow: auto;
 
-      .home:focus {
-        outline: 0;
-      }
-
-      .cluster {
+      .option {
         align-items: center;
+        cursor: pointer;
         display: flex;
+        color: var(--link);
+        font-size: 14px;
         height: $option-height;
-
         white-space: nowrap;
+
+        .cluster-badge-logo-text {
+          color: var(--default-active-text);
+          font-weight: 500;
+        }
+
+        .pin {
+          font-size: 16px;
+          margin-left: auto;
+          display: none;
+          color: var(--body-text);
+          &.showPin {
+            display: block;
+          }
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          .pin {
+            display: block;
+            color: var(--darker-text);
+          }
+        }
+        &.disabled {
+          background: transparent;
+          cursor: not-allowed;
+
+          .rancher-provider-icon,
+          .cluster-name {
+            filter: grayscale(1);
+            color: var(--muted);
+          }
+
+          .pin {
+            cursor: pointer;
+          }
+        }
+
         &:focus {
           outline: 0;
+          > div {
+            text-decoration: underline;
+          }
         }
+
+        > i {
+          display: block;
+          width: 42px;
+          font-size: $icon-size;
+          margin-right: 14px;
+        }
+
+        .rancher-provider-icon,
+        svg {
+          margin-right: 16px;
+          fill: var(--link);
+        }
+        img {
+          margin-right: 16px;
+        }
+
+        &.nuxt-link-active {
+          background: var(--primary-hover-bg);
+          color: var(--primary-hover-text);
+
+          svg {
+            fill: var(--primary-hover-text);
+          }
+
+          i {
+            color: var(--primary-hover-text);
+          }
+        }
+
+        &:hover {
+          color: var(--primary-hover-text);
+          background: var(--primary-hover-bg);
+          > div {
+            color: var(--primary-hover-text);
+          }
+          svg {
+            fill: var(--primary-hover-text);
+          }
+          div {
+            color: var(--primary-hover-text);
+          }
+          &.disabled {
+            background: transparent;
+            color: var(--muted);
+
+            > .pin {
+              color:var(--default-text);
+              display: block;
+            }
+          }
+        }
+
         .cluster-name {
-          text-overflow: ellipsis;
+          max-width: 220px;
+          white-space: nowrap;
           overflow: hidden;
-        }
-        > img {
-          max-height: $icon-size;
-          max-width: $icon-size;
-          margin-right: 8px;
+          text-overflow: ellipsis;
         }
       }
 
-      .pad {
-        flex: 1;
+      .option, .option-disabled {
+        padding: $option-padding 0 $option-padding $option-padding-left;
       }
 
       .search {
@@ -711,12 +897,12 @@ export default {
         > input {
           background-color: transparent;
           margin-bottom: 8px;
-          padding-right: 34px;
+          padding-right: 35px;
         }
         > i {
           position: absolute;
           font-size: $clear-search-size;
-          top: 9px;
+          top: 11px;
           right: 8px;
           opacity: 0.7;
           cursor: pointer;
@@ -726,18 +912,190 @@ export default {
         }
       }
 
+      .clusters-all {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-right: 16px;
+        margin-top: 10px;
+
+        span {
+          display: flex;
+          align-items: center;
+        }
+      }
+
       .clusters {
         overflow-y: auto;
-        overflow-x: hidden;
+
+         a, span {
+          margin: 0;
+         }
+
+        &-search {
+          display: flex;
+          align-items: center;
+          gap: 14px;
+          margin: 16px 0;
+          height: 42px;
+
+          .search {
+            transition: all 0.5s ease-in-out;
+            transition-delay: 2s;
+            width: 72%;
+            height: 42px;
+
+            input {
+              height: 100%;
+            }
+          }
+
+          &-count {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            width: 42px;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--default-active-text);
+            margin-left: $option-padding-left;
+            border-radius: 5px;
+            font-size: 10px;
+            font-weight: bold;
+
+            span {
+              font-size: 14px;
+            }
+
+            .nuxt-link-active {
+              &:hover {
+                text-decoration: none;
+              }
+            }
+
+            i {
+              font-size: 12px;
+              position: absolute;
+              right: -3px;
+              top: 2px;
+            }
+          }
+        }
       }
 
       .none-matching {
+        width: 100%;
+        text-align: center;
         padding: 8px
       }
+
+      .clustersPinned {
+        .category {
+          &-title {
+            margin: 8px 0;
+            margin-left: 16px;
+            hr {
+              margin: 0;
+              width: 94%;
+              transition: all 0.5s ease-in-out;
+              max-width: 100%;
+            }
+          }
+        }
+        .pin {
+          display: block;
+        }
+      }
+
+      .category {
+        display: flex;
+        flex-direction: column;
+        place-content: flex-end;
+        flex: 1;
+
+        &-title {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          align-items: center;
+          margin: 15px 0;
+          margin-left: 16px;
+          font-size: 14px;
+          text-transform: uppercase;
+
+          span {
+            transition: all 0.5s ease-in-out;
+            display: flex;
+            max-height: 16px;
+          }
+
+          hr {
+            margin: 0;
+            max-width: 50px;
+            width: 0;
+            transition: all 0.5s ease-in-out;
+          }
+        }
+
+         i {
+            padding-left: $option-padding-left - 5;
+          }
+      }
     }
+
+    &.menu-close {
+      .side-menu-logo  {
+        opacity: 0;
+      }
+      .category {
+        &-title {
+          span {
+            opacity: 0;
+          }
+
+          hr {
+            width: 40px;
+          }
+        }
+      }
+      .clusters-all {
+        flex-direction: row;
+        margin-left: $option-padding-left + 2;
+
+        span {
+          i {
+            display: none;
+          }
+        }
+      }
+
+      .clustersPinned {
+        .category {
+          &-title {
+            hr {
+              width: 40px;
+            }
+          }
+        }
+      }
+
+      .footer {
+        margin: 20px 15px;
+
+        .support {
+          display: none;
+        }
+
+        .version{
+          text-align: left;
+        }
+      }
+    }
+
     .footer {
       margin: 20px;
-
+      width: 240px;
       display: flex;
       flex: 0;
       flex-direction: row;
@@ -761,7 +1119,6 @@ export default {
   }
 
   .side-menu-glass {
-    background-color: transparent;
     position: absolute;
     top: 0;
     left: 0px;
@@ -774,12 +1131,13 @@ export default {
   .side-menu-logo {
     align-items: center;
     display: flex;
-    margin-left: 10px;
+    transform: translateX($app-bar-collapsed-width);
     opacity: 1;
-    transition: opacity 1.2s;
-    transition-delay: 0s;
-    height: 55px;
     max-width: 200px;
+    width: 100%;
+    justify-content: center;
+    transition: all 0.5s;
+    overflow: hidden;
     & IMG {
       object-fit: contain;
       height: 21px;
@@ -787,12 +1145,6 @@ export default {
     }
   }
 
-  .fade-enter-active {
-    .side-menu-logo {
-      opacity: 0;
-    }
-  }
-
   .fade-enter-active, .fade-leave-active {
     transition: all 0.2s;
     transition-timing-function: ease;
@@ -808,10 +1160,6 @@ export default {
 
   .fade-enter {
     left: -300px;
-
-    .side-menu-logo {
-      opacity: 0;
-    }
   }
 
   .locale-chooser {