Updated to CMS 6

[StevenPaw]

Updated Classnames, changed init to OnInit and cleaned up the code a bit for usage in Silverstripe CMS 6.0

[thats4shaw]

This works great apart from the grouped menu functionality no longer working.

Some inspiration can probably be gleaned from https://github.com/bigfork/silverstripe-grouped-cms-menu-fork in regards to the restoration of the javascript removed from core.

[rosis-sharma-trainor]

I’ve opened a pull request on the forked repository that addresses the grouped menu issue. @StevenPaw Please take a look: StevenPaw#1.

[StevenPaw]

The pull request of @rosis-sharma-trainor was approved and now the grouped menus also work properly again.

[ntd]

Thank your for your work!

Using Silverstripe 6.2.0 without CMS and your master branch (ac9a5ed), I'm experiencing padding issues. The two main problems are:

1. the login link is padded differently than the rest
2. .cms-menu__list li.opened a has a different padding-left (5px vs 26px)

In my YAML I'm just customizing colors, i.e.:

SilverStripe\Admin\LeftAndMain:
  cms_background: '#008a00'
  cms_border_color: '#368b39'
  cms_color: '#fff'
  cms_hover_background: '#007a00'
  cms_hover_color: currentColor
  cms_active_background: '#006a00'
  cms_active_color: currentColor
  cms_drawer_background: '#1a883e'
  cms_drawer_color: currentColor
  cms_icon_color: currentColor

Here are the unbranded vs branded screenshots:

I'm just wondering if I'm the only one with those issues.

[thats4shaw]

@ntd there were some changes that came through in 6.2.0 in regards to CMS menu.

The below will work around it:

// The SS admin CSS sets padding-left: 5px on all .opened a descendants
// (specificity 0,2,2), overriding the cms-theme's padding (0,1,1).
// This collapses text into icons. Restore proper padding for both
// the parent group link and the child items inside.
.cms-menu__list .branded-menu__list-item.opened > a {
  padding-left: 2rem !important;
}

.cms-menu__list .branded-menu__list-item.opened .branded-menu--child a {
  padding-left: 2.5rem !important;
}

// Remove the default left border on opened/current menu items.
.cms-menu__list .opened {
  border-left: none !important;
}

[ntd]

The below will work around it:
...

Yes, that fixes the second problem (the wrong left padding of the selected item).