Add css styling to Fast Template for "active" menu item.

[MarcSkovMadsen]

The FastTemplate supports adding a nice menu to the sidebar as shown in the menu below. But it does not include css styling to support marking a menu item as "menu-item-active", i.e.

<li class="menu-item-active"><a href="/">ML Explainability</a></li>

please support this.

Menu Example

import panel as pn

pn.extension()

template=pn.template.FastListTemplate(title="App with Menu")

ACCENT_BASE_COLOR = template.accent_base_color

COLLAPSED_ICON = f"""<svg style="stroke: { ACCENT_BASE_COLOR }" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" slot="collapsed-icon">
<path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>"""

EXPANDED_ICON = f"""<svg style="stroke: { ACCENT_BASE_COLOR }" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" slot="expanded-icon">
<path d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
"""

MENU_HTML=f"""
<fast-accordion id="menu">
    <fast-accordion-item slot="item" expanded>
        <h3 slot="heading" style="margin:0px">Introduction</h3>{ COLLAPSED_ICON }{ EXPANDED_ICON }
        <ul>
            <li><a href="introduction">Introduction</a></li>
        </ul>
    </fast-accordion-item>
    <fast-accordion-item slot="item" expanded>
        <h3 slot="heading" style="margin:0px">Example Apps</h3>{ COLLAPSED_ICON }{ EXPANDED_ICON }
        <ul>
            <li class="menu-item-active"><a href="/">ML Explainability</a></li>
            <li><a href="/">Plots and Tables with Events</a></li>
            <li><a href="/">Cross Filtering</a></li>
            <li><a href="/">Streaming Data</a></li>
        </ul>
    </fast-accordion-item>
</fast-according>
"""

template.sidebar_footer=MENU_HTML

template.servable()

[Stubatiger]

Hey Marc,

what exactly do you mean by that?

Is this about adding the missing css to the templates or about setting the ''menu-item-active" css-class to the correct list item?

For the css i guess some basic

.menu-item-active
{
 background: #d3d3d3;
 border-radius: 35px;
 padding: 0px 20px;
 line-height: 50px;
}

would be enough already, though i do not know how to access the fast colors

For setting the correct css class, im not sure how to do that with panel, best way would be i guess some javascript which i have no clue of :(

( With the awesome-panel-extensions and the site/application pattern currently i can do that with using the register_post_view function and setting there a specific HTML for the current application into the sidebar with the correct list-item set.)

[MarcSkovMadsen]

It’s something like that. I have the css somewhere already. Will make PR ASAP.