Add sidebar and search box layout

Introduce a `sidebarContent` field to the `model` and update the `View`
function to render a sidebar alongside the text input, creating a basic
two-pane layout.
This commit is contained in:
vaibhav
2026-01-14 11:44:24 +05:30
parent 7fa9e9b1bd
commit 9dc394ad5c

16
main.go
View File

@@ -13,6 +13,7 @@ type model struct {
textInput textinput.Model textInput textinput.Model
width int width int
height int height int
sidebarContent string
} }
func initialModel() model { func initialModel() model {
@@ -24,6 +25,7 @@ func initialModel() model {
ti.Focus() ti.Focus()
return model{ return model{
textInput: ti, textInput: ti,
sidebarContent: "Library\n\nPlaylist 1\nPlaylist 2\nFavorites",
} }
} }
@@ -51,12 +53,22 @@ func (m model) View() string {
if m.width == 0 { if m.width == 0 {
return "loading..." return "loading..."
} }
// Create search box
searchBox := lipgloss.NewStyle().BorderStyle(lipgloss.ThickBorder()).Padding(0, 1).Render(m.textInput.View())
// Create sidebar
sidebar := lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(1, 2).Render(m.sidebarContent)
// Combine search and sidebar vertically
content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", sidebar)
return lipgloss.Place( return lipgloss.Place(
m.width, m.width,
m.height, m.height,
lipgloss.Center, lipgloss.Center,
0, lipgloss.Center,
lipgloss.NewStyle().BorderStyle(lipgloss.ThickBorder()).Padding(0, 1).Render(m.textInput.View()), content,
) )
} }