-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: navbar offset on modal open (#467)
- Loading branch information
Showing
5 changed files
with
225 additions
and
196 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -115,4 +115,4 @@ | |
| "./vendor/bin/pest --coverage --min=100 --coverage-html=.coverage --coverage-clover=coverage.xml" | ||
| ] | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <div | ||
| x-data="Navbar.dropdown({ | ||
| dark: window.getThemeMode() === 'dark', | ||
| open: false, | ||
| showSettings: false | ||
| })" | ||
| @theme-changed.window="dark = $event.detail.theme === 'dark'" | ||
| x-ref="nav" | ||
| class="hidden relative z-30 bg-white border-b md:flex md:flex-col border-theme-secondary-300 dark:bg-theme-secondary-900 dark:border-theme-secondary-800" | ||
| > | ||
| <div | ||
| class="flex justify-between items-center w-full content-container" | ||
| > | ||
| <div class="flex items-center"> | ||
| <div class="flex flex-shrink-0 items-center"> | ||
| <a class="flex items-center" href="{{ route('home') }}"> | ||
| <x-navbar.logo /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="flex items-center space-x-3" @click.outside="open = false"> | ||
| <div class="flex justify-end"> | ||
| <div class="flex flex-1 justify-end items-center sm:justify-between sm:items-stretch"> | ||
| <div class="hidden items-center -mx-4 sm:h-16 md:flex h-[3.25rem]"> | ||
| @foreach ($navigation as $navItem) | ||
| @if (Arr::exists($navItem, 'children')) | ||
| <div | ||
| class="relative h-full" | ||
| @click.outside="() => { | ||
| if (openDropdown === '{{ $navItem['label'] }}') { | ||
| openDropdown = null; | ||
| } | ||
| }" | ||
| > | ||
| <a | ||
| href="javascript:void(0)" | ||
| class="inline-flex relative justify-center items-center px-1 pt-px mr-6 h-full font-semibold leading-5 border-b-2 border-transparent transition duration-150 ease-in-out focus:ring-inset focus:outline-none text-theme-secondary-700 dark:text-theme-secondary-400 hover:text-theme-secondary-800" | ||
| :class="openDropdown === '{{ $navItem['label'] }}' ? '!border-theme-primary-600' : 'dark:hover:border-theme-secondary-600 hover:border-theme-primary-300'" | ||
| @click="openDropdown = openDropdown === '{{ $navItem['label'] }}' ? null : '{{ $navItem['label'] }}'" | ||
| > | ||
| <span :class="{ 'text-theme-secondary-700 dark:text-theme-secondary-200': openDropdown === '{{ $navItem['label'] }}' }">{{ $navItem['label'] }}</span> | ||
| <span class="ml-2 transition duration-150 ease-in-out text-theme-secondary-700 dark:text-theme-secondary-400" :class="{ 'rotate-180': openDropdown === '{{ $navItem['label'] }}' }"> | ||
| <x-ark-icon name="arrows.chevron-down-small" size="xs" /> | ||
| </span> | ||
| </a> | ||
|
|
||
| <div | ||
| x-show="openDropdown === '{{ $navItem['label'] }}'" | ||
| class="absolute z-30 max-w-4xl whitespace-nowrap bg-white rounded-lg shadow-lg top-[4.5rem] dark:bg-theme-secondary-800" | ||
| x-transition.origin.top | ||
| x-cloak | ||
| > | ||
| <div class="flex flex-col pt-2 pb-2"> | ||
| @foreach ($navItem['children'] as $menuItem) | ||
| <x-navbar.list-item | ||
| :route="$menuItem['route'] ?? null" | ||
| :params="$menuItem['params'] ?? null" | ||
| :label="$menuItem['label']" | ||
| :url="$menuItem['url'] ?? null" | ||
| /> | ||
| @endforeach | ||
| </div> | ||
| </div> | ||
| </div> | ||
| @else | ||
| <x-navbar.item | ||
| :route="$navItem['route']" | ||
| :params="$navItem['params'] ?? null" | ||
| :label="$navItem['label']" | ||
| /> | ||
| @endif | ||
| @endforeach | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <header class="flex flex-col md:hidden"> | ||
| <div | ||
| id="navbar" | ||
| class="fixed z-20 w-full md:relative" | ||
| x-data="Navbar.dropdown({ | ||
| dark: window.getThemeMode() === 'dark', | ||
| open: false, | ||
| showSettings: false | ||
| })" | ||
| @theme-changed.window="dark = $event.detail.theme === 'dark'" | ||
| > | ||
| <div | ||
| x-show="openDropdown !== null || open" | ||
| class="overflow-y-auto fixed inset-0 z-30 md:relative" | ||
| @click="openDropdown = null; open = false;" | ||
| x-cloak | ||
| ></div> | ||
|
|
||
| <nav | ||
| x-ref="nav" | ||
| class="relative z-30 bg-white border-b border-theme-secondary-300 dark:bg-theme-secondary-900 dark:border-theme-secondary-800" | ||
| @click.outside="open = false" | ||
| > | ||
| <div class="flex relative justify-between w-full sm:h-16 h-[3.25rem] content-container"> | ||
| <div class="flex flex-shrink-0 items-center"> | ||
| <a class="flex items-center" href="{{ route('home') }}"> | ||
| <x-navbar.logo /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div class="flex justify-end"> | ||
| <div class="flex justify-end"> | ||
| <div class="flex items-center space-x-1"> | ||
| <x-navbar.button | ||
| @click="Livewire.emit('openSearchModal')" | ||
| dusk="navigation-search-modal-trigger" | ||
| :disabled="app()->isDownForMaintenance()" | ||
| > | ||
| <x-ark-icon name="magnifying-glass" /> | ||
|
|
||
| <span class="sr-only"> | ||
| @lang('actions.search') | ||
| </span> | ||
| </x-navbar.button> | ||
|
|
||
| <x-navbar.button @click="toggle"> | ||
| <span :class="{'hidden': open, 'inline-flex': !open }"> | ||
| <x-ark-icon name="menu" /> | ||
| </span> | ||
|
|
||
| <span :class="{'hidden': !open, 'inline-flex': open }" x-cloak> | ||
| <x-ark-icon name="menu-show" /> | ||
| </span> | ||
| </x-navbar.button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div | ||
| x-show="open" | ||
| x-transition.opacity | ||
| x-cloak | ||
| > | ||
| <div class="border-t-2 shadow-xl border-theme-secondary-200 dark:border-theme-secondary-800"> | ||
| <div class="pt-2 bg-white rounded-b-lg dark:bg-theme-secondary-800"> | ||
| @foreach ($navigation as $navItem) | ||
| @if (Arr::exists($navItem, 'children')) | ||
| <div class="relative h-full dark:bg-theme-secondary-800"> | ||
| <a | ||
| href="#" | ||
| class="inline-flex relative justify-between items-center py-3 px-6 w-full h-full font-semibold leading-5 focus:ring-inset focus:outline-none text-theme-secondary-700 dark:text-theme-secondary-200 hover:text-theme-secondary-800" | ||
| @click="openDropdown = openDropdown === '{{ $navItem['label'] }}' ? null : '{{ $navItem['label'] }}'" | ||
| > | ||
| <span :class="{ 'text-theme-secondary-700 dark:text-theme-secondary-200': openDropdown === '{{ $navItem['label'] }}' }">{{ $navItem['label'] }}</span> | ||
| <span class="ml-2 text-theme-secondary-700 dark:text-theme-secondary-400" :class="{ 'rotate-180': openDropdown === '{{ $navItem['label'] }}' }"> | ||
| <x-ark-icon name="arrows.chevron-down-small" size="xs" /> | ||
| </span> | ||
| </a> | ||
|
|
||
| <div | ||
| x-show="openDropdown === '{{ $navItem['label'] }}'" | ||
| class="bg-white dark:bg-theme-secondary-800" | ||
| x-cloak | ||
| > | ||
| <div class="flex flex-col pt-2 pb-2 w-full"> | ||
| @foreach ($navItem['children'] as $menuItem) | ||
| <x-navbar.mobile.list-item | ||
| :route="$menuItem['route'] ?? null" | ||
| :params="$menuItem['params'] ?? null" | ||
| :label="$menuItem['label']" | ||
| :url="$menuItem['url'] ?? null" | ||
| /> | ||
| @endforeach | ||
| </div> | ||
| </div> | ||
| </div> | ||
| @else | ||
| <x-navbar.mobile.item | ||
| :route="$navItem['route']" | ||
| :params="$navItem['params'] ?? null" | ||
| :label="$navItem['label']" | ||
| /> | ||
| @endif | ||
| @endforeach | ||
|
|
||
| <div class="py-4 dark:bg-black bg-theme-secondary-100"> | ||
| <div class="mx-6 space-y-3 divide-y divide-dashed divide-theme-secondary-300 dark:divide-theme-secondary-800"> | ||
| <x-navbar.mobile.setting-item title="{{ trans('general.select_theme') }}"> | ||
| <livewire:navbar.dark-mode-toggle | ||
| active-icon="underline-moon" | ||
| inactive-icon="underline-sun" | ||
| setting="darkTheme" | ||
| mobile | ||
| /> | ||
| </x-navbar.mobile.setting-item> | ||
|
|
||
| <x-navbar.mobile.setting-item | ||
| title="{{ trans('general.select_network') }}" | ||
| class="pt-3" | ||
| > | ||
| <x-navbar.network-dropdown /> | ||
| </x-navbar.mobile.setting-item> | ||
|
|
||
| <div class="flex pt-3 font-semibold dark:text-theme-secondary-500"> | ||
| <livewire:price-ticker /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </header> |
Oops, something went wrong.