mirror of
https://github.com/filamentphp/filament.git
synced 2026-10-24 23:35:30 +08:00
Mobile menu
This commit is contained in:
Ryan Scherler
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"sources":["webpack:///./resources/css/base.css","webpack:///./<no source>","webpack:///./resources/css/components/buttons.css","webpack:///./resources/css/components/lists.css","webpack:///./node_modules/tailwindcss/base.css","webpack:///./node_modules/tailwindcss/components.css","webpack:///./node_modules/tailwindcss/utilities.css"],"names":[],"mappings":"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","file":"css/filament.css","sourcesContent":["/**\n * Smoothly animate the scroll position, instead of a straight jump.\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * ::selection selector: color, background, cursor, and outline.\n */\n::selection {\n @apply bg-blue-600 text-white;\n}\n\n/**\n * `x-cloak` attributes are removed from elements when Alpine initializes.\n * This is useful for hiding pre-initialized DOM.\n *\n * @link https://github.com/alpinejs/alpine#x-cloak\n *\n */\n[x-cloak] {\n @apply hidden;\n}\n\n/**\n * Selectively disable the default focus style by selecting for the case when the polyfill\n * is loaded and [data-focus-visible-added] attribute is not applied to the element:\n *\n * @link https://github.com/WICG/focus-visible#2-update-your-css\n */\n.js-focus-visible :focus:not([data-focus-visible-added]) {\n @apply outline-none;\n}\n",null,".btn {\n @apply font-medium py-2 px-4 bg-orange-800 text-white rounded transition duration-200 shadow inline-block relative;\n\n &:focus {\n @apply shadow-outline outline-none;\n }\n\n &:hover {\n @apply bg-orange-900;\n }\n\n &[disabled] {\n @apply opacity-50;\n }\n}\n",".list-dropdown {\n @apply bg-white shadow rounded text-sm leading-tight text-left overflow-hidden;\n\n > li {\n @apply whitespace-no-wrap;\n\n & + * {\n @apply border-t border-gray-300;\n }\n }\n\n a,\n button,\n [role='menuitem'] {\n @apply inline-block w-full py-2 px-4 transition-colors duration-200 text-gray-600;\n\n &:hover {\n @apply bg-gray-200;\n }\n }\n}\n","@tailwind base;\n","@tailwind components;\n","@tailwind utilities;\n"],"sourceRoot":""}
|
||||
{"version":3,"sources":["webpack:///./resources/css/base.css","webpack:///./<no source>","webpack:///./resources/css/components/buttons.css","webpack:///./resources/css/components/lists.css","webpack:///./node_modules/tailwindcss/base.css","webpack:///./node_modules/tailwindcss/components.css","webpack:///./node_modules/tailwindcss/utilities.css"],"names":[],"mappings":"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","file":"css/filament.css","sourcesContent":["/**\n * Smoothly animate the scroll position, instead of a straight jump.\n */\nhtml {\n scroll-behavior: smooth;\n}\n\n/**\n * ::selection selector: color, background, cursor, and outline.\n */\n::selection {\n @apply bg-blue-600 text-white;\n}\n\n/**\n * `x-cloak` attributes are removed from elements when Alpine initializes.\n * This is useful for hiding pre-initialized DOM.\n *\n * @link https://github.com/alpinejs/alpine#x-cloak\n *\n */\n[x-cloak] {\n @apply hidden;\n}\n\n/**\n * Selectively disable the default focus style by selecting for the case when the polyfill\n * is loaded and [data-focus-visible-added] attribute is not applied to the element:\n *\n * @link https://github.com/WICG/focus-visible#2-update-your-css\n */\n.js-focus-visible :focus:not([data-focus-visible-added]) {\n @apply outline-none;\n}\n",null,".btn {\n @apply font-medium py-2 px-4 bg-orange-800 text-white rounded transition duration-200 shadow inline-block relative;\n\n &:focus {\n @apply shadow-outline outline-none;\n }\n\n &:hover {\n @apply bg-orange-900;\n }\n\n &[disabled] {\n @apply opacity-50;\n }\n}\n",".list-dropdown {\n @apply bg-white shadow rounded text-sm leading-tight text-left overflow-hidden;\n\n > li {\n @apply whitespace-no-wrap;\n\n & + * {\n @apply border-t border-gray-300;\n }\n }\n\n a,\n button,\n [role='menuitem'] {\n @apply inline-block w-full py-2 px-4 transition-colors duration-200 text-gray-600;\n\n &:hover {\n @apply bg-gray-200;\n }\n }\n}\n","@tailwind base;\n","@tailwind components;\n","@tailwind utilities;\n"],"sourceRoot":""}
|
||||
Vendored
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"/js/filament.js": "/js/filament.js?id=95e9d8553e1a16eaf577",
|
||||
"/css/filament.css": "/css/filament.css?id=83115acb991be9d43e94",
|
||||
"/css/filament.css": "/css/filament.css?id=d8e5fbcf73641cd030e7",
|
||||
"/js/filament.js.map": "/js/filament.js.map?id=505ce87b37d22cb42dfc",
|
||||
"/css/filament.css.map": "/css/filament.css.map?id=d2f3f9e439287aa8e133"
|
||||
"/css/filament.css.map": "/css/filament.css.map?id=9518e200cefd65394ab8"
|
||||
}
|
||||
|
||||
@@ -4,8 +4,17 @@
|
||||
|
||||
@section('content')
|
||||
<a href="#content" class="sr-only">Skip to content</a>
|
||||
<div class="flex min-h-screen" role="group" tabindex="-1">
|
||||
<header role="banner" class="bg-gray-900 text-gray-500 w-56 flex flex-col space-y-4">
|
||||
<div class="relative overflow-hidden flex min-h-screen"
|
||||
role="group"
|
||||
tabindex="-1"
|
||||
x-data="{ headerIsOpen: false }"
|
||||
x-on:keydown.escape="headerIsOpen = false"
|
||||
x-on:resize.window="if (window.outerWidth > 768) headerIsOpen = false">
|
||||
<header role="banner"
|
||||
class="bg-gray-900 text-gray-500 w-56 flex flex-col space-y-4 shadow-lg md:shadow-none absolute z-10 inset-y-0 md:static transform transition-transform duration-200 md:translate-x-0"
|
||||
:class="headerIsOpen ? 'translate-x-0' : '-translate-x-full'"
|
||||
tabindex="-1"
|
||||
id="banner">
|
||||
<a href="{{ url('/') }}" rel="home" class="px-4 py-3 flex items-center space-x-4 transition-colors duration-200 hover:text-white" target="_blank" rel="noopener noreferrer">
|
||||
<x-filament::app-icon class="w-10 h-10 fill-current" />
|
||||
<span class="text-sm leading-tight font-semibold">{{ config('app.name') }}</span>
|
||||
@@ -17,21 +26,30 @@
|
||||
|
||||
<x-slot name="content">
|
||||
<ul class="list-dropdown" aria-label="{{ __('User actions') }}">
|
||||
<li><a href="#">{{ __('Edit Profile') }}</a></li>
|
||||
{{-- <li><a href="#">{{ __('Edit Profile') }}</a></li> --}}
|
||||
<li><livewire:filament-logout /></li>
|
||||
</ul>
|
||||
</x-slot>
|
||||
</x-filament::dropdown>
|
||||
<button type="button" aria-controls="banner" @click.prevent="headerIsOpen = false" :aria-expanded="headerIsOpen" x-cloak x-show.opacity="headerIsOpen" class="md:hidden absolute top-0 right-0 transform translate-x-full -translate-y-2 p-3 text-gray-400 hover:text-white transition-colors duration-200">
|
||||
<x-heroicon-o-x class="w-6 h-6" />
|
||||
</button>
|
||||
</header>
|
||||
<span class="absolute z-0 inset-0 bg-black opacity-50 md:hidden flex items-start justify-end" x-cloak x-show="headerIsOpen" @click="headerIsOpen = false"></span>
|
||||
<div class="flex-grow flex flex-col">
|
||||
<header class="p-6 flex justify-between items-center space-x-4">
|
||||
<h1 class="font-light text-2xl leading-tight text-orange-700">{{ $title }}</h1>
|
||||
<header class="p-4 md:p-6 flex justify-between items-center space-x-4">
|
||||
<div class="flex items-center">
|
||||
<button type="button" aria-controls="banner" @click.prevent="headerIsOpen = true" :aria-expanded="headerIsOpen" class="md:hidden text-blue-500 hover:text-blue-800 transition-colors duration-200 mr-4">
|
||||
<x-heroicon-o-menu-alt-2 class="w-6 h-6" />
|
||||
</button>
|
||||
<h1 class="font-light text-2xl leading-tight text-orange-700">{{ $title }}</h1>
|
||||
</div>
|
||||
{{ $actions ?? null }}
|
||||
</header>
|
||||
<main id="content" class="flex-grow flex flex-col">
|
||||
{{ $slot }}
|
||||
</main>
|
||||
<footer role="contentinfo" class="p-6 flex items-center justify-between">
|
||||
<footer role="contentinfo" class="p-4 md:p-6 flex items-center justify-between">
|
||||
<span class="text-xs font-mono text-gray-500">{{ config('filament.name') }}</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user