Do we have a vertical menubar widget?

[Tim-Cao]

The TabbedContent widget provide horizontal tabs. Is there a vertical menubar widget to switch content?
For example,

[davep]

You could easily build something like that based around the ContentSwitcher.

[Tim-Cao]

@davep
The ContentSwitcher is horizonal, how to make it vertial?

[davep]

It's neither horizontal nor vertical, it's a content switching widget that could form the heart of what you're asking about. Pair it with a collection of buttons or perhaps an option list and you'd have something similar to what you posted.

[Tim-Cao]

I'm stuck in how to set the switch content, how to set initial content, and content in other switched panel.
For example,

    def compose(self) -> ComposeResult:
        with Vertical(id="buttons"):
            yield Static()
            yield Button("Forward Failure PR", id="nav-1")
            yield Static()
            yield Button("Create PR And Forward", id="nav-2")
            yield Static()
            yield Button("Create TF Ticket", id="nav-3")
            yield Static()
            yield Button("Write Comments", id="nav-4")
            yield Static()
            yield Button("Write Description", id="nav-5")

        with ContentSwitcher(initial="nav-1"):  
            with Container(id="nav-1"):
                yield Label("Enter the failure Pull Request Number: ")
                yield Input(id='failure-pull-request-number')
                yield Static()
                yield Button("Submit", variant="primary", id='button-1')

                yield Label("Local Branch Name: ")
                yield Input(id='local-branch')
                yield Label("Jira Ticket Number: ")
                yield Input(id='jira-ticket-number-2')
                yield Static()
                yield Button("Submit", variant="primary", id='button-2')


    def on_button_pressed(self, event: Button.Pressed) -> None:
        self.query_one(ContentSwitcher).current = event.button.id

[davep]

From what I can see you were doing it correctly, albeit the above code seems to be incomplete so I can't actually test it. Here's an example I've just written to create something similar to what you're asking about (albeit it uses OptionList rather than Button for the "menu"):

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import OptionList, Label, Input, ContentSwitcher
from textual.widgets.option_list import Option

class ContentSwitchApp(App[None]):

    CSS = """
    OptionList {
        width: 1fr;
    }

    OptionList:focus {
        border: blank;
    }

    ContentSwitcher {
        width: 4fr;
    }

    Label {
        padding-left: 1;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield OptionList(
                Option("First", "nav-1"),
                Option("Second", "nav-2"),
                Option("Third", "nav-3"),
            )
            with ContentSwitcher(initial="nav-1"):
                with Vertical(id="nav-1"):
                    yield Label("Some input:")
                    yield Input()
                    yield Label("Some other input:")
                    yield Input()
                with Vertical(id="nav-2"):
                    yield Label("A second set of some input:")
                    yield Input()
                    yield Label("A second set of some other input:")
                    yield Input()
                with Vertical(id="nav-3"):
                    yield Label("Hey look a third set of some input:")
                    yield Input()
                    yield Label("Hey look a third set of some other input:")
                    yield Input()

    @on(OptionList.OptionSelected)
    def switch(self, event: OptionList.OptionSelected) -> None:
        self.query_one(ContentSwitcher).current = event.option_id

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

[Tim-Cao]

Many thanks @davep. I understood the vertial and horizonal layout.

class ContentSwitcherApp(App[None]):
    CSS = '''
        Button {
            align: center middle;
            width: 25;
        }

        #menubar {
            width: 30;
        }

        
    '''

    def compose(self) -> ComposeResult:
        with Horizontal():
            with Vertical(id='menubar'):
                yield Static()
                yield Button("Forward Failure PR", id="nav-1")
                yield Static()
                yield Button("Create PR And Forward", id="nav-2")
                yield Static()
                yield Button("Create TF Ticket", id="nav-3")

            with ContentSwitcher(initial="nav-1"):
                with Vertical(id="nav-1"):
                    yield Label("Enter the failure Pull Request Number: ")
                    yield Input(id='failure-pull-request-number')
                    yield Static()
                    yield Button("Submit", variant="primary", id='button-1')
                with Vertical(id="nav-2"):
                    yield Label("Local Branch Name: ")
                    yield Input(id='local-branch')
                    yield Label("Jira Ticket Number: ")
                    yield Input(id='jira-ticket-number-2')
                    yield Static()
                    yield Button("Submit", variant="primary", id='button-2')
                with Vertical(id="nav-3"):
                    PROJECT_KEY = [
                        ("LPS", "LPS"),
                        ("LRQA", "LRQA"),
                        ("LRAC", "LRAC"),
                        ("COMMERCE", "COMMERCE")
                    ]

                    yield Label("Enter the Case Result Id: ")
                    yield Input(id='case-result-id')
                    yield Label("Select the Project Key: ")
                    yield Select(PROJECT_KEY, id='project-key', value="LPS")
                    yield Label("Assign to me (Optional)")
                    yield Checkbox(id='assign-to-me')
                    yield Label("Add label (Optional)")
                    yield Input(id='add-label')
                    yield Static()
                    yield Button("Submit", variant="primary", id='button-3')