How to make sidebar overlay on ListView

[Tim-Cao]

When open sidebar, the sidebar is hidden under ListView

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import *
from textual.reactive import reactive
from textual.widgets import *

class Sidebar(Container):
    def compose(self) -> ComposeResult:
        yield Static("Textual Demo")

class ScriptApp(App):
    CSS = """

    Sidebar {
        width: 40;
        background: $panel;
        transition: offset 500ms in_out_cubic;
        layer: overlay;

    }

    Sidebar:focus-within {
        offset: 0 0 !important;
    }

    Sidebar.-hidden {
        offset-x: -100%;
    }

    Sidebar Static {
        background: $boost;
        color: $secondary;
        padding: 2 4;
        border-right: vkey $background;
        dock: top;
        text-align: center;
        text-style: bold;
    }
    """

    TITLE = "Work with script"

    BINDINGS = [
        ("ctrl+b", "toggle_sidebar", "Sidebar"),
        Binding("ctrl+c", "app.quit", "Quit", show=True),
    ]

    show_sidebar = reactive(False)

    def compose(self) -> ComposeResult:
        yield Sidebar(classes="-hidden")
        yield Header()
        yield ListView(
            ListItem(Static("Forward Failure PR", classes="nav-item"), id="nav-1"),
            ListItem(
                Static("Create PR and Forward", classes="nav-item"), id="nav-2"
            ),
            ListItem(Static("Create TF Ticket", classes="nav-item"), id="nav-3"),
            ListItem(Static("Write Comments", classes="nav-item"), id="nav-4"),
            ListItem(Static("Write Description", classes="nav-item"), id="nav-5"),
            ListItem(Static("Trigger Gauntlet", classes="nav-item"), id="nav-6"),
            ListItem(Static("Create Issue", classes="nav-item"), id="nav-7"),
        )
        yield Footer()

    def action_toggle_sidebar(self) -> None:
        sidebar = self.query_one(Sidebar)
        self.set_focus(None)
        if sidebar.has_class("-hidden"):
            sidebar.remove_class("-hidden")
        else:
            if sidebar.query("*:focus"):
                self.screen.set_focus(None)
            sidebar.add_class("-hidden")


app = ScriptApp()

if __name__ == "__main__":
    app.run()

[Tim-Cao]

I figured out

    Sidebar {
        width: 40;
        background: $panel;
        transition: offset 500ms in_out_cubic;
        layer: overlay;
        dock: left;
    }