Differentiate sub-menus in vertical menu at smaller breakpoints

Problem/Motivation

The following applies only to the Gin toolbar at breakpoints < 976px, when toolbar-tray switches from horizontal to vertical.

When the Gin toolbar is set to either Horizontal, Modern OR Legacy, Classic, Gin applies background shading to sub-menus to help illustrate the parent/child relationship, and distinguish the active menu items from other items in the toolbar (since they all have identical margins).

Shaded Sub-Menus in Horizontal or Legacy toolbars below 976px

When the Sidebar, Vertical Toolbar is selected, this shading is not applied to the sub-menus. See the screenshot below:

Un-shaded Sub-Menus in Vertical or toolbar below 976px

Steps to reproduce

• Enable Gin (and Gin Toolbar to test on the front-end)
• Select 'Sidebar, Vertical Toolbar' for the Navigation setting (/admin/appearance/settings/gin)
• Set the browser window to a width of less than 976px
• Click 'Manage' and navigate down the menu structure.

Proposed resolution

Copy the CSS that provides sub-menu background shading from horizontal_toolbar.css, e.g.

.toolbar .level-2 > ul,
.gin--dark-mode .toolbar .toolbar-toggle-orientation {
  background-color: var(--gin-bg-layer2);
}

.toolbar .level-3 > ul {
  background-color: var(--gin-bg-app);
}

Remaining tasks

Patch
Review
Commit

User interface changes

Add sub-menu background colors for the Vertical toolbar at breakpoints < 976px.

API changes

None

Data model changes

None