Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: navbar offset on modal open #467

Merged
merged 11 commits into from
Sep 4, 2023
Merged

fix: navbar offset on modal open #467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c11f682
fix: navbar offset on modal open
alexbarnsley Aug 3, 2023
211048d
generic navbar component
alexbarnsley Aug 3, 2023
0fa8157
style: resolve style guide violations
alexbarnsley Aug 3, 2023
ffb5353
scrub
alexbarnsley Aug 3, 2023
0bb6435
chore: rebuild assets
alexbarnsley Aug 3, 2023
5a41e00
chore: update foundation dependency
alexbarnsley Aug 3, 2023
b040e7c
chore: update public
alexbarnsley Aug 3, 2023
fdc3af4
Merge branch 'fix/navbar-offset-on-modal-open' of github.com:ArdentHQ…
alexbarnsley Aug 3, 2023
1d42c2f
chore: rebuild assets
ItsANameToo Aug 3, 2023
1109d92
fix dropdown behind desktop navbar
alexbarnsley Aug 3, 2023
3cd41ce
Merge remote-tracking branch 'origin/develop' into fix/navbar-offset-…
alexbarnsley Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,4 +115,4 @@
"./vendor/bin/pest --coverage --min=100 --coverage-html=.coverage --coverage-clover=coverage.xml"
]
}
}
}
79 changes: 79 additions & 0 deletions resources/views/components/navbar/desktop.blade.php
View file
Open in desktop
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>
135 changes: 135 additions & 0 deletions resources/views/components/navbar/mobile.blade.php
View file
Open in desktop
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>
Loading
Loading