Skip to content

Add search to the navigation bar and align the layout - #70

Open
vlnst wants to merge 14 commits into
Insprill:masterfrom
vlnst:nav-search
Open

vlnst wants to merge 14 commits into
Insprill:masterfrom
vlnst:nav-search

Conversation

@vlnst

@vlnst vlnst commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Right now you can only search from the home page, so to search again you have to go back there first. The header also doesn't line up with the page: the navigation bar is wider than the content, each page box has its own width, the right side of the bar changes on every page, and the Settings link only shows on the home page.

This adds a search field to the navigation bar and gives the bar and the page content the same width, so their edges line up. The bar looks the same on every page, with Settings always on the right, and the Genius links moved into the page itself. Song, album and artist headers and the song cards line up their text with the image. Spacing between sections is even, all inputs get the same focus outline in every theme, and cards no longer move up on hover.

Closes #56

@vlnst

This comment was marked as outdated.

@vlnst

This comment was marked as outdated.

@vlnst vlnst changed the title Add search field to the navigation bar WIP: Add search field to the navigation bar Oct 18, 2026
@vlnst
vlnst marked this pull request as draft October 18, 2026 00:28
@vlnst vlnst changed the title WIP: Add search field to the navigation bar Add search to the navigation bar and align the layout Oct 18, 2026
@vlnst
vlnst marked this pull request as ready for review October 18, 2026 00:34
@vlnst

vlnst commented Oct 18, 2026

Copy link
Copy Markdown
Contributor Author

Final result

Desktop

Home

Search results

Search results

Song

Song

Album

Album

Artist

Artist

Mobile

Search results Song Artist
Search results Song Artist

@Insprill

Copy link
Copy Markdown
Owner

This is looking very nice! Just a couple of nitpicks:

  1. Intellectual should appear in the middle of the homepage, only on desktop, like before, if it doesn't get too messy to implement. It looks awkward with it off to the left and no search bar filling the space, but it looks much better on mobile.
  2. The cursor should change to pointer when hovering over the X in the search bar.

@vlnst

This comment was marked as outdated.

@Insprill

Copy link
Copy Markdown
Owner

Either version below, or all the way to the left like before. I think either will be alright.

@vlnst

vlnst commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor Author

Done, version is on the left again.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a search field to the navigation bar

2 participants