Skip to content

Commit

Permalink
Refactor Navbar for Enhanced User Experience (#2235)
Browse files Browse the repository at this point in the history 
* navbar changes

* minor fixes of navbar
  • Loading branch information
@jainampatel22
jainampatel22 authored Feb 8, 2025
1 parent 4143ac1 commit 14ab876
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 43 deletions.
89 changes: 89 additions & 0 deletions _css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -753,3 +753,92 @@ pre .bash-block::before {
margin-left: 5px;
color: rgb(127, 127, 127);
}
.navbar {
padding: 1rem 0;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.nav-link {
position: relative;
padding: 0.5rem 1rem !important;
color: #444 !important;
font-weight: 500;
transition: color 0.3s ease;
}

.nav-link:hover {
color: #CB3C33 !important;
}

.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: #CB3C33;
transition: all 0.3s ease;
}

.nav-link:hover::after {
width: 100%;
left: 0;
}

.navbar-brand img {
transition: transform 0.3s ease;
}

.navbar-brand:hover img {
transform: scale(1.05);
}

.btn-star, .btn-sponsor {
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-weight: 500;
}

.btn-star:hover, .btn-sponsor:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-sponsor {
background-color: #CB3C33;
border-color: #CB3C33;
}

.btn-sponsor:hover {
background-color: #b93530;
border-color: #b93530;
}

/* Improve mobile menu styles */
@media (max-width: 991.98px) {
.navbar-collapse {
background: white;
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
}

.navbar-action-buttons {
margin-top: 1rem;
justify-content: center;
}

.nav-link {
padding: 0.75rem 1rem !important;
}

.navbar-toggler {
border: none;
padding: 0.5rem;
}

.navbar-toggler:focus {
box-shadow: none;
outline: none;
}
}
84 changes: 41 additions & 43 deletions _layout/navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
<div class="container py-3 py-lg-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="main-menu">
<!-- LOGO -->
<a class="navbar-brand" href="/">
<img class="julialogo" src="/assets/infra/logo.svg" alt="JuliaLang Logo">
</a>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="/">
<img src="/assets/infra/logo.svg" alt="JuliaLang Logo" height="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/downloads/">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.julialang.org">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/learning/">Learn</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog/">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/community/">Community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contribute/">Contribute</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/jsoc/">JSoC</a>
</li>
</ul>
<div class="navbar-action-buttons d-flex gap-4">
<a class="btn btn-outline-dark btn-sm btn-star" href="https://github.com/JuliaLang/julia" target="_blank">⭐ Star</a>
<a class="btn btn-danger btn-sm btn-sponsor" href="https://github.com/sponsors/julialang" target="_blank">❤️ Sponsor</a>
</div>
</div>
</div>
</nav>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<button class="navbar-toggler ml-auto hidden-sm-up float-xs-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- MENU: DOWNLOAD | DOCUMENTATION | BLOG ... -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item {{ispage /downloads/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/downloads/">Download</a>
</li>
<li class="nav-item flex-md-fill text-md-center">
<a class="nav-link" href="https://docs.julialang.org">Documentation</a>
</li>
<li class="nav-item {{ispage /learning/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/learning/">Learn</a>
</li>
<li class="nav-item {{ispage /blog/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/blog/">Blog</a>
</li>
<li class="nav-item {{ispage /community/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/community/">Community</a>
</li>
<li class="nav-item {{ispage /contribute/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/contribute/">Contribute</a>
</li>
<li class="nav-item {{ispage /jsoc/*}}active{{end}} flex-md-fill text-md-center">
<a class="nav-link" href="/jsoc/">JSoC</a>
</li>
</ul>
<span class="navbar-right">
<a class="github-button" href="https://github.com/JuliaLang/julia" data-size="large" data-show-count="true" aria-label="Star JuliaLang/julia on GitHub">Star</a>
<a class="github-button" href="https://github.com/sponsors/julialang" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @julialang on GitHub">Sponsor</a>
</span>
</div>

</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

0 comments on commit 14ab876

Please sign in to comment.