Combining tab headers and underline bars, no functionality yet

examples/dev_sandbox.py

@@ -2,7 +2,9 @@ from rich.console import RenderableType
 from rich.panel import Panel
 
 from textual.app import App
+from textual.renderables._tab_headers import Tab
 from textual.widget import Widget
+from textual.widgets.tabs import Tabs
 
 
 class PanelWidget(Widget):
@@ -23,7 +25,16 @@ class BasicApp(App):
     def on_mount(self):
         """Build layout here."""
         self.mount(
-            header=Widget(),
+            header=Tabs(
+                [
+                    Tab("One", active=True),
+                    Tab("Two"),
+                    Tab("Three"),
+                    Tab("Four"),
+                    Tab("Five"),
+                    Tab("Six"),
+                ]
+            ),
             content=PanelWidget(),
             footer=Widget(),
             sidebar=Widget(),

examples/dev_sandbox.scss

@@ -22,7 +22,7 @@ Widget:hover {
 #sidebar {
   text: $primary-style;
   dock: side;
-  width: 30;
+  width: 24;
   offset-x: -100%;
   transition: $animation;
   border-right: outer $secondary;
@@ -34,8 +34,7 @@ Widget:hover {
 
 #header {
   text: $text on $primary;
-  height: 3;
-  border-bottom: hkey $secondary;
+  height: 2;
 }
 
 #header.-visible {
@@ -44,7 +43,6 @@ Widget:hover {
 
 #content {
   text: $text on $background;
-  offset-y: -3;
 }
 
 #content.-content-visible {
@@ -54,7 +52,6 @@ Widget:hover {
 #footer {
   opacity: 1;
   text: $text on $primary;
-  height: 3;
   border-top: hkey $secondary;
 }