UI Inserting divider lines after individual top level menu entries on the left navigation bar

Basic Building Blocks Series: Within the basic building blocks series over time I will add all the little things which someone who just starts with Serenity Framework would have to spend a lot of time figuring it out him/herself.

What you get with this article: When implementing this article, you will be able to insert divider lines after individual top level menu entries on the left navigation bar.

The divider line will have a nice left and right spacing so that it looks like this (not a full line, filling the whole width):

Hints:

• The choosen color of cyan looks best on a black menu panel.
• This solution requires the "itemClass" property to be available in NavigationLink and NavigationMenu (NavigationLinkAttribute and NavigationMenuAttribute) in NavigationItems.cs. This is the case in recent Serenity Frameworks. If it is not available, then you will have to backport it from the current Serenity Framework (I have done this myself as I still develop on SF 2.9.24 where it was not available originally). How to to the backport will be subject to another wiki article).

To add a separator line after a specific top level menu entry, do the following:

(1) Define the neccessary css within serenity.css (as this loads early - before the less files compile)

   .navigation-separator {
      box-shadow: 1px 20px 1px -19px cyan;
   }

(2) Set the ItemClass property of the desired top level menu entry within NavigationItems.cs to this class:

   ...
   [assembly: NavigationMenu(30000, "Administration", icon: "icon-screen-desktop", ItemClass = "navigation-separator")]
   ...

(3) "Fix" the spacing between different top-level menu entries so that a hover will not erase a potential separator line of the top-menu entry above the hovered menu entry.

In the sidebar.less file, search for .sidebar-menu and modify it like this:

// Sidebar menu
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    //First Level
    > li {
        position: relative;
	/* margin: 0; */      <----- (Comment this out)
        margin-top: 1px;      <----- (add this)
        margin-bottom: 1px;   <----- (add this)
        padding: 0;

That's it.