fix(ui): navbar overflow with lots of clusters

close #932
tchiotludo · Dec 14, 2021 · 16be3b9 · 16be3b9
1 parent d4f6e82
commit 16be3b9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/client/src/containers/SideBar/Sidebar.jsx b/client/src/containers/SideBar/Sidebar.jsx
@@ -266,12 +266,12 @@ class Sidebar extends Component {
               <div
                 data-toggle="collapse"
                 aria-expanded={showClusters}
-                className="dropdown-toggle"
+                className="dropdown-toggle text-center"
                 onClick={() => {
                   this.setState({ showClusters: !showClusters, selectedTab: constants.CLUSTER });
                 }}
               >
-                Clusters <span className="badge badge-primary clusters">{selectedCluster}</span>
+                <span className="badge badge-primary clusters">{selectedCluster}</span>
               </div>
             </NavText>
             {listClusters}
@@ -309,17 +309,17 @@ class Sidebar extends Component {
                 <i className="fa fa-fw fa fa-exchange" aria-hidden="true" />
               </NavIcon>
               <NavText>
-                <Link
+                <div
                   to={`/ui/${selectedCluster}/connect/${selectedConnect}`}
                   data-toggle="collapse"
                   aria-expanded={showConnects}
-                  className="dropdown-toggle"
+                  className="dropdown-toggle text-center"
                   onClick={() => {
                     this.setState({ showConnects: !showConnects, selectedTab: constants.CONNECT });
                   }}
                 >
-                  Connects <span className="badge badge-primary">{selectedConnect}</span>
-                </Link>
+                  <span className="badge badge-primary clusters">{selectedConnect}</span>
+                </div>
               </NavText>
 
               {listConnects}

diff --git a/client/src/containers/SideBar/styles.scss b/client/src/containers/SideBar/styles.scss
@@ -37,8 +37,15 @@ $sidebarTransition: 0.5s;
   white-space: nowrap;
   overflow: hidden;
   max-width: 90px;
+  font-size: $font-size-base;
+  vertical-align: middle;
 }
+.sidenav-subnav---1EN61 {
+    background-color: $primary !important;
 
-.sidenav-subnav---1EN61{
-  background-color: $primary !important;
+}
+
+.sidenav---sidenav-subnav---1EN61 {
+    max-height: calc(30vh);
+    overflow: auto !important;
 }