Customize header panel

Panel
8

The Solution - With a Template

from asyncio import sleep
from datetime import datetime

import panel as pn
from panel import HSpacer, Spacer

pn.extension()

image = "https://www.markdownguide.org/assets/images/tux.png"

file_menu = pn.widgets.MenuButton(
    name="File", button_type="primary", items=["Save"], width=60, margin=0, align="center"
)
help_menu = pn.widgets.MenuButton(
    name="Help", button_type="primary", items=["About"], width=60, margin=0, align="center"
)

async def timer():
    while True:
        yield datetime.now().strftime("%H:%M:%S")
        await sleep(1)

action_bar = pn.Row(
    Spacer(width=20, sizing_mode="fixed"),
    file_menu,
    help_menu,
    HSpacer(),
    pn.pane.PNG(image, height=30, width=50, margin=0, sizing_mode="fixed", align="center"),
    HSpacer(),
    pn.panel(timer, width=75, styles={"color": "white"}, align="center"),
    sizing_mode="stretch_width",
    styles={"background": "var( --panel-primary-color )"},
)

pn.template.VanillaTemplate(
    title="Panel App with Header Content",
    header=[action_bar],
    logo = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/SCIPY_2.svg/512px-SCIPY_2.svg.png?20200904111722"
).servable()

Try playing around with this example.

2 Likes