We are changing the menu and how it is loaded. We will need new controllers in both Hemi UI and the Alpha. In both project we will need a menu that loads it as a JSON with the available links and structure. Both structures are as they are now but since they differ (mostly because of access rights) we cannot use only one of them for now.

The view of the menu is to be done by the Hemi UI project. We will add it as an AJAX POST request in both cases and load it with its styles (provided from the design team and explained below). With this we are doing it’s style only ones.

#Sidebar
display: inline-flex;
padding: var(--Spacing-MD, 16px);
flex-direction: column;
align-items: flex-start;
gap: 16px;

border-right: 1px solid var(--Gray-100, #E5E7E8);
background: var(--White, #FFF);

#Active item
display: flex;
height: var(--Spacing-LG, 32px);
padding: var(--Spacing-SM, 8px);
align-items: center;
gap: var(--Spacing-SM, 8px);
align-self: stretch;

border-radius: var(--Spacing-XXS, 2px);
background: var(--Black, #000);

#Inactive item
display: flex;
height: var(--Spacing-LG, 32px);
padding: var(--Spacing-SM, 8px);
align-items: center;
gap: var(--Spacing-SM, 8px);
align-self: stretch;

border-radius: var(--Spacing-XXS, 2px);
background: var(--White, #FFF);

#Sidebar
display: inline-flex;
padding: var(--Spacing-MD, 16px);
flex-direction: column;
align-items: flex-start;
gap: 16px;

border-right: 1px solid var(--Gray-100, #E5E7E8);
background: var(--White, #FFF);

#Active item
display: flex;
height: var(--Spacing-LG, 32px);
padding: var(--Spacing-SM, 8px);
align-items: center;
gap: var(--Spacing-SM, 8px);
align-self: stretch;

border-radius: var(--Spacing-XXS, 2px) var(--Spacing-XXS, 2px) 0px 0px;
background: var(--Black, #000);

#Active Sub Items frame
display: flex;
padding: 8px 8px 16px var(--Spacing-LG, 32px);
flex-direction: column;
align-items: flex-start;
gap: 4px;
align-self: stretch;

border-radius: 0px 0px var(--Spacing-XXS, 2px) var(--Spacing-XXS, 2px);
background: #000;

#Active Sub Item
align-self: stretch;

color: var(--White, #FFF);
font-feature-settings: 'salt' on;
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */

#Inactive Item
display: flex;
height: var(--Spacing-LG, 32px);
padding: var(--Spacing-SM, 8px);
align-items: center;
gap: var(--Spacing-SM, 8px);
align-self: stretch;

border-radius: var(--Spacing-XXS, 2px);
background: var(--White, #FFF);

The button should have the Custom View Columns Tooltip only on hover

#Button/Icon
display: flex;
width: 26px;
height: 26px;
padding: 4px;
justify-content: center;
align-items: center;
gap: 4px;

border-radius: var(--Elements-Button-Roundness, 50px);
border: 1px solid var(--Gray-200, #CED1D3);
background: var(--base-white, #FFF);

#Custom View Columns Tooltip
display: inline-flex;
align-items: center;
gap: -1px;

Hemi UI / Hemi OS Reskin / Components / Menu

Menu

Menu collapsed

Menu expanded:

Button for creation in the menu: