Layout logo on left, menu on right in main screen

Use Horizontal container with logo-panel and menu-panel side by side,
centered vertically in the terminal.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shuki
2026-03-05 23:50:07 +02:00
parent b13514e478
commit 85eb4232c8
2 changed files with 21 additions and 9 deletions

View File

@@ -12,11 +12,24 @@ Screen {
} }
/* Main menu */ /* Main menu */
#main-menu { #main-layout {
width: 1fr; width: 100%;
max-width: 60; height: 1fr;
align: center middle;
}
#logo-panel {
width: auto;
height: auto;
padding: 1 2;
align: center middle;
}
#menu-panel {
width: 1fr;
max-width: 40;
height: auto;
padding: 1 2; padding: 1 2;
overflow-y: auto;
} }
#menu-list { #menu-list {
@@ -26,9 +39,7 @@ Screen {
} }
#logo { #logo {
text-align: center;
height: auto; height: auto;
padding: 0;
} }
/* Data tables */ /* Data tables */

View File

@@ -2,7 +2,7 @@ from textual.app import ComposeResult
from textual.screen import Screen from textual.screen import Screen
from textual.widgets import Header, Footer, Static, OptionList from textual.widgets import Header, Footer, Static, OptionList
from textual.widgets.option_list import Option from textual.widgets.option_list import Option
from textual.containers import Vertical, Center from textual.containers import Horizontal, Vertical
LOGO = """\ LOGO = """\
[green] [green]
@@ -35,9 +35,10 @@ class MainMenuScreen(Screen):
def compose(self) -> ComposeResult: def compose(self) -> ComposeResult:
yield Header() yield Header()
with Center(): with Horizontal(id="main-layout"):
with Vertical(id="main-menu"): with Vertical(id="logo-panel"):
yield Static(LOGO, id="logo", markup=True) yield Static(LOGO, id="logo", markup=True)
with Vertical(id="menu-panel"):
yield OptionList( yield OptionList(
*[Option(label, id=mid) for mid, label in MENU_ITEMS], *[Option(label, id=mid) for mid, label in MENU_ITEMS],
id="menu-list", id="menu-list",