joydip.manna/dealhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(navbar): responsive issue and add logo

Browse Source 
- add logo in both navbar variants
- fix scrolling in mobile view
- fix bleeding of background in mobile view
This commit is contained in:
kusowl 2026-01-09 11:00:10 +05:30
parent ed914b531d
commit bda84a9397
2 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/nav-menu.js
View File

@ -1,11 +1,14 @@
const openBtn = document.getElementById('openBtn'); const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn'); const closeBtn = document.getElementById('closeBtn');
const mobileMenu = document.getElementById('mobileMenu'); const mobileMenu = document.getElementById('mobileMenu');
const body = document.body;
openBtn.addEventListener('click', () => { openBtn.addEventListener('click', () => {
mobileMenu.classList.remove('hidden') mobileMenu.classList.remove('hidden');
body.style.overflow = 'hidden';
}) })
closeBtn.addEventListener('click', () => { closeBtn.addEventListener('click', () => {
mobileMenu.classList.add('hidden') mobileMenu.classList.add('hidden');
body.style.overflow = 'visible';
}) })

34
resources/views/components/navbar.blade.php
View File

@ -1,41 +1,45 @@
<nav class="flex justify-between items-center wrapper py-6 shadow-xl"> <nav class="flex justify-between items-center wrapper py-6 shadow-xl">
<div class="logo"> <div class="logo flex space-x-2 items-center">
<x-logo />
<a href="" class="font-bold text-2xl">{{config('app.name')}}</a> <a href="" class="font-bold text-2xl">{{config('app.name')}}</a>
</div> </div>
<!-- desktop menu --> <!-- desktop menu -->
<div class="nav-links hidden sm:block"> <div class="nav-links hidden md:block">
<ul class="flex space-x-8 text-accent-600"> <ul class="flex space-x-8 text-accent-600">
<x-nav-links :link="route('home')" name="Home" /> <x-nav-links :link="route('home')" name="Home"/>
<x-nav-links :link="route('home')" name="Explore deals" /> <x-nav-links :link="route('home')" name="Explore deals"/>
<x-nav-links :link="route('home')" name="About" /> <x-nav-links :link="route('home')" name="About"/>
<x-nav-links :link="route('home')" name="Contact" /> <x-nav-links :link="route('home')" name="Contact"/>
</ul> </ul>
</div> </div>
<div class="nav-buttons space-x-4 font-medium hidden sm:block "> <div class="nav-buttons space-x-4 font-medium hidden md:block ">
<a href="{{route('login')}}">Login</a> <a href="{{route('login')}}">Login</a>
<a href="{{route('register')}}" class="ui-btn ui-btn-neutral">Register</a> <a href="{{route('register')}}" class="ui-btn ui-btn-neutral">Register</a>
</div> </div>
<!-- mobile menu btn--> <!-- mobile menu btn-->
<x-button class="sm:hidden" id="openBtn"> <x-button class="md:hidden" id="openBtn">
<x-heroicon-o-bars-3 class="w-8" /> <x-heroicon-o-bars-3 class="w-8"/>
</x-button> </x-button>
</nav> </nav>
<!-- mobile menu btn--> <!-- mobile menu btn-->
<div id='mobileMenu' class="hidden absolute top-0 h-full w-full bg-gray-200 text-xl z-1 p-10 pt-20"> <div id='mobileMenu' class="hidden absolute top-0 h-[101vh] overflow-y-hidden w-[101vw] bg-gray-200 text-xl z-1 p-10 pt-20">
<x-button id="closeBtn" class="w-full"> <div class="flex justify-between mb-8">
<x-logo/>
<x-button id="closeBtn">
<x-heroicon-o-x-mark class="w-8 ml-auto"/> <x-heroicon-o-x-mark class="w-8 ml-auto"/>
</x-button> </x-button>
</div>
<div class="nav-links mb-10"> <div class="nav-links mb-10">
<ul class="flex flex-col space-y-8 text-accent-600"> <ul class="flex flex-col space-y-8 text-accent-600">
<x-nav-links :link="route('home')" name="Home" /> <x-nav-links :link="route('home')" name="Home"/>
<x-nav-links :link="route('home')" name="Explore deals" /> <x-nav-links :link="route('home')" name="Explore deals"/>
<x-nav-links :link="route('home')" name="About" /> <x-nav-links :link="route('home')" name="About"/>
<x-nav-links :link="route('home')" name="Contact" /> <x-nav-links :link="route('home')" name="Contact"/>
<a href="{{route('login')}}">Login</a> <a href="{{route('login')}}">Login</a>
<a href="{{route('register')}}" class="ui-btn ui-btn-neutral w-fit">Register</a> <a href="{{route('register')}}" class="ui-btn ui-btn-neutral w-fit">Register</a>
</ul> </ul>