varun-r-mallya/wona.github.com
1
0
Fork 0
mirror of https://github.com/WatchOutNewsAgency/wona.github.com.git synced 2026-01-01 01:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(bug): navigation component position

Browse Source
This commit is contained in:
officiallyutso
2025-06-27 08:42:30 +05:30
parent c12e6c72c6
commit 263d34839d
2 changed files with 225 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
_includes/navbar.html
View File

@ -8,6 +8,15 @@
</div>
</div>
</a>
<!-- Mobile toggle button -->
<button type="button" class="navbar-toggle" id="mobile-menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="social pull-right">
<a href="/about">About</a>
<a href="/guide">Guide</a>
@ -16,6 +25,28 @@
<a href="https://www.youtube.com/channel/UCthZ7tKOzy4EJpuVxtdcp1A"><img src="/images/youtube-play.svg"></a>
<a href="mailto:watchout@iitr.ac.in"><img src="/images/email.png" width="16px"></a>
</div>
<!-- Mobile navigation menu -->
<div class="mobile-nav" id="mobile-nav">
<ul class="nav">
{% for cat in site.data.categories %}
{% if cat.subcategories != nil %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-category="{{ cat.name }}">{{ cat.title }}</a>
<ul class="dropdown-menu">
{% for subcat in cat.subcategories %}
{% if site.categories[subcat.name] != nil %}
<li><a href="/category/{{ subcat.name }}/">{{ subcat.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</li>
{% elsif site.categories[cat.name] != nil%}
<li><a href="/category/{{ cat.name }}/">{{ cat.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="110">
@ -54,3 +85,44 @@
<!--/.nav-collapse -->
</div>
</nav>
<!-- Mobile Navigation JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle functio
const mobileToggle = document.getElementById('mobile-menu-toggle');
const mobileNav = document.getElementById('mobile-nav');
if (mobileToggle && mobileNav) {
mobileToggle.addEventListener('click', function() {
mobileNav.classList.toggle('show');
});
}
// Mobile dropdown functionality
const dropdownToggles = document.querySelectorAll('.mobile-nav .dropdown-toggle');
dropdownToggles.forEach(function(toggleBtn) {
toggleBtn.addEventListener('click', function(e) {
e.preventDefault();
const dropdown = this.parentElement;
// Close other open dropdowns jab some other dropdown is clicked
const otherDropdowns = document.querySelectorAll('.mobile-nav .dropdown.open');
otherDropdowns.forEach(function(otherDropdown) {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('open');
}
});
dropdown.classList.toggle('open');
});
});
// Close mobile menu when clicking outside
document.addEventListener('click', function(e) {
if (mobileNav && !mobileNav.contains(e.target) && !mobileToggle.contains(e.target)) {
mobileNav.classList.remove('show');
}
});
});
</script>