Group tabs on desktop menu tab bar using CSS

[Himaladin]

MOBILE

DESKTOP:

/*NAVIGATION*/
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).menu-item {
margin-left:10px;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4){
margin-left:10px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).active.menu-item::before {
content: '◉';
color: red;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4).selected > button > div::before {
    content: '◉';
    color: red;
    padding-right:5px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+8).menu-item::before {
content: '○';
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+4) > button > div::before {
    content: '○';
    padding-right:5px;
}
#page-root nav > ul > li:nth-child(n+6):nth-child(-n+7).menu-item::after {
    content: '';
    position: absolute;
    margin-top:38px;
    border-left: 2px solid gray;
    height: 30px;
    margin-left:5px;
}
/*Mobile*/
#page-root [aria-label="Side Navigation"] > ul > li:nth-child(n+2):nth-child(-n+3) > button > div::after {
    content: '';
    position: absolute;
    margin-top: 53px;
    border-left: 2px solid gray;
    height: 45px;
    margin-left:5px;
}