structables/templates/header.html
Kumi 0f9f8b21a4
refactor(header): streamline navigation and improve form aesthetics
Redesigned the header's navigation layout and search form to enhance user interface consistency and accessibility. Migrated the logo loading to utilize Flask's url_for, ensuring dynamic path resolution which is more maintainable and compatible across different deployment environments. Simplified the navbar structure by consolidating elements under a single navbar-collapse class, aligning with Bootstrap's best practices for responsive design. Upgraded the search button to be more visually appealing and accessible by replacing visibility styles with an outline class, promoting a clearer call-to-action for users to engage with the search functionality.
2024-05-22 18:01:09 +02:00

39 lines
1.2 KiB
HTML

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img
class="navbar-logo"
src="{{ url_for('static', filename='img/logo.png') }}"
alt="Structables Logo"
/>
</a>
<div class="navbar-collapse">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/projects/">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contest/">Contests</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teachers/">Teachers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sitemap/">Sitemap</a>
</li>
</ul>
<form class="d-flex" action="/search" method="post">
<input
class="form-control me-2"
type="search"
placeholder="Search"
name="q"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>