Fix: align sidebar menu items (#6138)

* Introduce sitebar-items.module.scss

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust sidebar item styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Use classnames from a scss module

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set sidebar min width to 150px to keep readability

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Break words in long links

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adjust navigation paddings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused scss file

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating bunch of snapshots

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and GitHub committed 2022-09-01 12:52:55 +03:00
1 parent 2fe7668edc
commit 37318cab4e
23 files changed
+2219 -3938

No files matched your search

@@ -39,7 +39,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
>
<a
aria-current="page"
class="nav-item flex gaps align-center expandable active"
class="navItem active"
data-testid="sidebar-item-link-for-workloads"
href="/"
>
@@ -50,13 +50,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
class="icon"
/>
</i>
<span
class="link-text box grow"
>
<span>
Workloads
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -73,7 +71,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-config"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-config"
href="/"
>
@@ -87,9 +85,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
list
</span>
</i>
<span
class="link-text box grow"
>
<span>
Config
</span>
</a>
@@ -100,7 +96,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-network"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-network"
href="/"
>
@@ -114,13 +110,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
device_hub
</span>
</i>
<span
class="link-text box grow"
>
<span>
Network
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -137,7 +131,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-storage"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-storage"
href="/"
>
@@ -151,9 +145,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
storage
</span>
</i>
<span
class="link-text box grow"
>
<span>
Storage
</span>
</a>
@@ -164,7 +156,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-helm"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-helm"
href="/"
>
@@ -175,13 +167,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
class="icon"
/>
</i>
<span
class="link-text box grow"
>
<span>
Helm
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -198,7 +188,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-user-management"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-user-management"
href="/"
>
@@ -212,9 +202,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
security
</span>
</i>
<span
class="link-text box grow"
>
<span>
Access Control
</span>
</a>
@@ -225,7 +213,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-custom-resources"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-custom-resources"
href="/"
>
@@ -239,13 +227,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
extension
</span>
</i>
<span
class="link-text box grow"
>
<span>
Custom Resources
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -558,7 +544,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
>
<a
aria-current="page"
class="nav-item flex gaps align-center expandable active"
class="navItem active"
data-testid="sidebar-item-link-for-workloads"
href="/"
>
@@ -569,13 +555,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
class="icon"
/>
</i>
<span
class="link-text box grow"
>
<span>
Workloads
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -592,7 +576,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-config"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-config"
href="/"
>
@@ -606,9 +590,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
list
</span>
</i>
<span
class="link-text box grow"
>
<span>
Config
</span>
</a>
@@ -619,13 +601,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-some-item-id"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-some-item-id"
href="/"
>
<span
class="link-text box grow"
>
<span>
Some item
</span>
</a>
@@ -636,7 +616,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-network"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-network"
href="/"
>
@@ -650,13 +630,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
device_hub
</span>
</i>
<span
class="link-text box grow"
>
<span>
Network
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -673,7 +651,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-storage"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-storage"
href="/"
>
@@ -687,9 +665,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
storage
</span>
</i>
<span
class="link-text box grow"
>
<span>
Storage
</span>
</a>
@@ -700,7 +676,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-namespaces"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-namespaces"
href="/"
>
@@ -714,9 +690,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
layers
</span>
</i>
<span
class="link-text box grow"
>
<span>
Namespaces
</span>
</a>
@@ -727,7 +701,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-helm"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-helm"
href="/"
>
@@ -738,13 +712,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
class="icon"
/>
</i>
<span
class="link-text box grow"
>
<span>
Helm
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"
@@ -761,7 +733,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-user-management"
>
<a
class="nav-item flex gaps align-center"
class="navItem"
data-testid="sidebar-item-link-for-user-management"
href="/"
>
@@ -775,9 +747,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
security
</span>
</i>
<span
class="link-text box grow"
>
<span>
Access Control
</span>
</a>
@@ -788,7 +758,7 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
data-testid="sidebar-item-custom-resources"
>
<a
class="nav-item flex gaps align-center expandable"
class="navItem"
data-testid="sidebar-item-link-for-custom-resources"
href="/"
>
@@ -802,13 +772,11 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
extension
</span>
</i>
<span
class="link-text box grow"
>
<span>
Custom Resources
</span>
<i
class="Icon expand-icon box right material focusable"
class="Icon expandIcon material focusable"
>
<span
class="icon"