Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Merge pull request #2365 from avila-gabriel/fix-navbar-scroll

Browse Source 
Enhancement: Preserve scroll position in navbar to improve UX
This commit is contained in:
Andras Bacsai 2024-06-07 11:05:55 +02:00 committed by GitHub
commit 952aed3c49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,8 +44,15 @@
this.theme = 'system'; this.theme = 'system';
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} }
} },
}"> saveScrollPosition() {
localStorage.setItem('navbarScrollPosition', this.$refs.navbar.scrollTop);
},
restoreScrollPosition() {
this.$nextTick(() => {
this.$refs.navbar.scrollTop = localStorage.getItem('navbarScrollPosition') || 0;
});
}}" @livewire:load="restoreScrollPosition()" @livewire:update="saveScrollPosition()">
<div class="flex pt-6 pb-4 pl-3"> <div class="flex pt-6 pb-4 pl-3">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div> <div class="text-2xl font-bold tracking-wide dark:text-white">Coolify</div>
@ -83,7 +90,7 @@
<div class="px-2 pt-2 pb-7"> <div class="px-2 pt-2 pb-7">
<livewire:switch-team /> <livewire:switch-team />
</div> </div>
<ul role="list" class="flex flex-col flex-1 gap-y-7"> <ul role="list" class="flex flex-col flex-1 gap-y-7" x-ref="navbar">
<li class="flex-1 overflow-x-hidden"> <li class="flex-1 overflow-x-hidden">
<ul role="list" class="flex flex-col h-full space-y-1.5"> <ul role="list" class="flex flex-col h-full space-y-1.5">
@if (isSubscribed() || !isCloud()) @if (isSubscribed() || !isCloud())
@ -420,4 +427,4 @@ class="flex items-center px-6 py-3 text-sm font-semibold leading-6 text-gray-900
</a> </a>
</li> --}} </li> --}}
</ul> </ul>
</nav> </nav>