mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2025-12-23 16:50:16 +00:00
first copies from portal
This commit is contained in:
fsociety
135
resources/views/components/layouts/app.blade.php
Normal file
135
resources/views/components/layouts/app.blade.php
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>{{ $title ?? 'Page Title' }}</title>
|
||||
@vite(['resources/js/app.js','resources/css/app.css'])
|
||||
@googlefonts
|
||||
<script src="https://kit.fontawesome.com/866fd3d0ab.js" crossorigin="anonymous"></script>
|
||||
<script src='https://www.unpkg.com/nostr-login@latest/dist/unpkg.js' data-perms="sign_event:1,sign_event:0"
|
||||
data-theme="default" data-dark-mode="true"></script>
|
||||
@stack('scripts')
|
||||
</head>
|
||||
<body
|
||||
class="font-sans antialiased bg-gray-100 dark:bg-[#222222] text-gray-600 dark:text-gray-400"
|
||||
:class="{ 'sidebar-expanded': sidebarExpanded }"
|
||||
x-data="{ sidebarOpen: false, sidebarExpanded: localStorage.getItem('sidebar-expanded') == 'true' }"
|
||||
x-init="$watch('sidebarExpanded', value => localStorage.setItem('sidebar-expanded', value))"
|
||||
>
|
||||
<script>
|
||||
if (localStorage.getItem('sidebar-expanded') == 'true') {
|
||||
document.querySelector('body').classList.add('sidebar-expanded');
|
||||
} else {
|
||||
document.querySelector('body').classList.remove('sidebar-expanded');
|
||||
}
|
||||
</script>
|
||||
<div class="flex h-[100dvh] overflow-hidden">
|
||||
@include('components.layouts.sidebar')
|
||||
<div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<!-- Site header -->
|
||||
<header
|
||||
class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md before:bg-white/90 dark:before:bg-[#222222]/90 lg:before:bg-[#222222]/90 dark:lg:before:bg-[#222222]/90 before:-z-10 max-lg:shadow-sm z-30">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 lg:border-b border-gray-200 dark:border-gray-700/60">
|
||||
|
||||
<!-- Header: Left side -->
|
||||
<div class="flex">
|
||||
<!-- Hamburger button -->
|
||||
<button
|
||||
class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 lg:hidden"
|
||||
@click.stop="sidebarOpen = !sidebarOpen"
|
||||
aria-controls="sidebar"
|
||||
:aria-expanded="sidebarOpen"
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="5" width="16" height="2"/>
|
||||
<rect x="4" y="11" width="16" height="2"/>
|
||||
<rect x="4" y="17" width="16" height="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Header: Right side -->
|
||||
<div class="flex items-center space-x-3">
|
||||
|
||||
{{--@include('components.layouts.partials.search-button')--}}
|
||||
|
||||
{{--@include('components.layouts.partials.notification-buttons')--}}
|
||||
|
||||
<!-- Info button -->
|
||||
<div class="relative inline-flex" x-data="{ open: false }">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center hover:bg-[#1B1B1B] lg:hover:bg-[#1B1B1B] dark:hover:bg-[#1B1B1B]/50 dark:lg:hover:bg-[#1B1B1B] rounded-full"
|
||||
:class="{ 'bg-gray-200 dark:bg-[#1B1B1B]': open }"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="open = !open"
|
||||
:aria-expanded="open"
|
||||
>
|
||||
<span class="sr-only">Info</span>
|
||||
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
|
||||
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9 7.5a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0v-4ZM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
|
||||
<path fill-rule="evenodd"
|
||||
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm6-8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="origin-top-right z-10 absolute top-full right-0 min-w-44 bg-white dark:bg-[#1B1B1B] border border-gray-200 dark:border-[#1B1B1B]/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1"
|
||||
@click.outside="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200 transform"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-out duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-3">
|
||||
Information
|
||||
</div>
|
||||
<ul>
|
||||
{{--<li>
|
||||
<a class="font-medium text-sm text-amber-500 hover:text-amber-600 dark:hover:text-amber-400 flex items-center py-1 px-3"
|
||||
href="#0" @click="open = false" @focus="open = true"
|
||||
@focusout="open = false">
|
||||
<svg class="w-3 h-3 fill-current text-amber-500 shrink-0 mr-2"
|
||||
viewBox="0 0 12 12">
|
||||
<rect y="3" width="12" height="9" rx="1"/>
|
||||
<path d="M2 0h8v2H2z"/>
|
||||
</svg>
|
||||
<span>Documentation</span>
|
||||
</a>
|
||||
</li>--}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{--@include('components.layouts.partials.dark-mode-toggle')--}}
|
||||
|
||||
<!-- Divider -->
|
||||
{{--<hr class="w-px h-6 bg-gray-200 dark:bg-gray-700/60 border-none"/>--}}
|
||||
|
||||
{{--@include('components.layouts.partials.user-button')--}}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="grow">
|
||||
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- Courses group -->
|
||||
<div>
|
||||
<h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
|
||||
<span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
|
||||
aria-hidden="true">•••</span>
|
||||
<span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Courses</span>
|
||||
</h3>
|
||||
<ul class="mt-3">
|
||||
<!-- Browse -->
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0"
|
||||
x-data="{ open: false }">
|
||||
<a class="block text-gray-800 dark:text-gray-100 truncate transition" href="#0"
|
||||
@click.prevent="open = !open; sidebarExpanded = true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-graduation-cap h-6 w-6"></i>
|
||||
<span
|
||||
class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Browse</span>
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex shrink-0 ml-2 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
:class="open ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul class="pl-8 mt-1" :class="open ? '!block' : 'hidden'">
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-amber-500 transition truncate" href="index.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Main</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="analytics.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="fintech.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Fintech</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Manage -->
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0" x-data="{ open: false }">
|
||||
<a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition"
|
||||
href="#0" @click.prevent="open = !open; sidebarExpanded = true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-pencil h-6 w-6"></i>
|
||||
<span
|
||||
class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Manage</span>
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex shrink-0 ml-2 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
:class="open ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul class="pl-8 mt-1 hidden" :class="open ? '!block' : 'hidden'">
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="customers.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Manage cities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!-- Events group -->
|
||||
<div>
|
||||
<h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
|
||||
<span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
|
||||
aria-hidden="true">•••</span>
|
||||
<span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Events</span>
|
||||
</h3>
|
||||
<ul class="mt-3">
|
||||
<!-- Browse -->
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0"
|
||||
x-data="{ open: false }">
|
||||
<a class="block text-gray-800 dark:text-gray-100 truncate transition" href="#0"
|
||||
@click.prevent="open = !open; sidebarExpanded = true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-calendar h-6 w-6"></i>
|
||||
<span
|
||||
class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Browse</span>
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex shrink-0 ml-2 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
:class="open ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul class="pl-8 mt-1" :class="open ? '!block' : 'hidden'">
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-amber-500 transition truncate" href="index.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Main</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="analytics.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Analytics</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="fintech.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Fintech</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Manage -->
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0" x-data="{ open: false }">
|
||||
<a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition"
|
||||
href="#0" @click.prevent="open = !open; sidebarExpanded = true">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-pencil h-6 w-6"></i>
|
||||
<span
|
||||
class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Manage</span>
|
||||
</div>
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="flex shrink-0 ml-2 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
:class="open ? 'rotate-180' : 'rotate-0'" viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
|
||||
<ul class="pl-8 mt-1 hidden" :class="open ? '!block' : 'hidden'">
|
||||
<li class="mb-1 last:mb-0">
|
||||
<a class="block text-gray-500/90 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition truncate"
|
||||
href="customers.html">
|
||||
<span
|
||||
class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Manage cities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!-- Legacy group -->
|
||||
<div>
|
||||
<h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
|
||||
<span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
|
||||
aria-hidden="true">•••</span>
|
||||
<span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Legacy</span>
|
||||
</h3>
|
||||
<ul class="mt-3">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!-- Meetups group -->
|
||||
<div>
|
||||
<h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
|
||||
<span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
|
||||
aria-hidden="true">•••</span>
|
||||
<span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Meetups</span>
|
||||
</h3>
|
||||
<ul class="mt-3">
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0">
|
||||
<a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition" href="{{ route('meetups.worldmap') }}">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-map h-6 w-6"></i>
|
||||
<span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">World Map</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="pl-4 pr-3 py-2 rounded-lg mb-0.5 last:mb-0">
|
||||
<a class="block text-gray-800 dark:text-gray-100 hover:text-gray-900 dark:hover:text-white truncate transition" href="{{ route('meetups.table') }}">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-sharp-duotone fa-solid fa-handshake-angle h-6 w-6"></i>
|
||||
<span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Alle Meetups</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!-- Nostr group -->
|
||||
<div>
|
||||
<h3 class="text-xs uppercase text-gray-400 dark:text-gray-500 font-semibold pl-3">
|
||||
<span class="hidden lg:block lg:sidebar-expanded:hidden 2xl:hidden text-center w-6"
|
||||
aria-hidden="true">•••</span>
|
||||
<span class="lg:hidden lg:sidebar-expanded:block 2xl:block">Nostr</span>
|
||||
</h3>
|
||||
<ul class="mt-3">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div>
|
||||
<input type="checkbox" name="light-switch" id="light-switch" class="light-switch sr-only"/>
|
||||
<label
|
||||
class="flex items-center justify-center cursor-pointer w-8 h-8 hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
for="light-switch">
|
||||
<svg class="dark:hidden fill-current text-gray-500/80 dark:text-gray-400/80" width="16"
|
||||
height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 0a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z"/>
|
||||
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
|
||||
<path
|
||||
d="M13.657 3.757a1 1 0 0 0-1.414-1.414l-.354.354a1 1 0 0 0 1.414 1.414l.354-.354ZM13.5 8a1 1 0 0 1 1-1h.5a1 1 0 1 1 0 2h-.5a1 1 0 0 1-1-1ZM13.303 11.889a1 1 0 0 0-1.414 1.414l.354.354a1 1 0 0 0 1.414-1.414l-.354-.354ZM8 13.5a1 1 0 0 1 1 1v.5a1 1 0 1 1-2 0v-.5a1 1 0 0 1 1-1ZM4.111 13.303a1 1 0 1 0-1.414-1.414l-.354.354a1 1 0 1 0 1.414 1.414l.354-.354ZM0 8a1 1 0 0 1 1-1h.5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1ZM3.757 2.343a1 1 0 1 0-1.414 1.414l.354.354A1 1 0 1 0 4.11 2.697l-.354-.354Z"/>
|
||||
</svg>
|
||||
<svg class="hidden dark:block fill-current text-gray-500/80 dark:text-gray-400/80"
|
||||
width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.875 4.375a.625.625 0 1 0 1.25 0c.001-.69.56-1.249 1.25-1.25a.625.625 0 1 0 0-1.25 1.252 1.252 0 0 1-1.25-1.25.625.625 0 1 0-1.25 0 1.252 1.252 0 0 1-1.25 1.25.625.625 0 1 0 0 1.25c.69.001 1.249.56 1.25 1.25Z"/>
|
||||
<path
|
||||
d="M7.019 1.985a1.55 1.55 0 0 0-.483-1.36 1.44 1.44 0 0 0-1.53-.277C2.056 1.553 0 4.5 0 7.9 0 12.352 3.648 16 8.1 16c3.407 0 6.246-2.058 7.51-4.963a1.446 1.446 0 0 0-.25-1.55 1.554 1.554 0 0 0-1.372-.502c-4.01.552-7.539-2.987-6.97-7ZM2 7.9C2 5.64 3.193 3.664 4.961 2.6 4.82 7.245 8.72 11.158 13.36 11.04 12.265 12.822 10.341 14 8.1 14 4.752 14 2 11.248 2 7.9Z"/>
|
||||
</svg>
|
||||
<span class="sr-only">Switch to light / dark version</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -0,0 +1,64 @@
|
||||
<div class="relative inline-flex" x-data="{ open: false }">
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-800': open }"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="open = !open"
|
||||
:aria-expanded="open"
|
||||
>
|
||||
<span class="sr-only">Notifications</span>
|
||||
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
|
||||
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 0a7 7 0 0 0-7 7c0 1.202.308 2.33.84 3.316l-.789 2.368a1 1 0 0 0 1.265 1.265l2.595-.865a1 1 0 0 0-.632-1.898l-.698.233.3-.9a1 1 0 0 0-.104-.85A4.97 4.97 0 0 1 2 7a5 5 0 0 1 5-5 4.99 4.99 0 0 1 4.093 2.135 1 1 0 1 0 1.638-1.148A6.99 6.99 0 0 0 7 0Z"/>
|
||||
<path
|
||||
d="M11 6a5 5 0 0 0 0 10c.807 0 1.567-.194 2.24-.533l1.444.482a1 1 0 0 0 1.265-1.265l-.482-1.444A4.962 4.962 0 0 0 16 11a5 5 0 0 0-5-5Zm-3 5a3 3 0 0 1 6 0c0 .588-.171 1.134-.466 1.6a1 1 0 0 0-.115.82 1 1 0 0 0-.82.114A2.973 2.973 0 0 1 11 14a3 3 0 0 1-3-3Z"/>
|
||||
</svg>
|
||||
<div
|
||||
class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500 border-2 border-gray-100 dark:border-gray-900 rounded-full"></div>
|
||||
</button>
|
||||
<div
|
||||
class="origin-top-right z-10 absolute top-full right-0 -mr-48 sm:mr-0 min-w-80 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1"
|
||||
@click.outside="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200 transform"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-out duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase pt-1.5 pb-2 px-4">
|
||||
Notifications
|
||||
</div>
|
||||
<ul>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">📣 <span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 12, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">📣 <span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Feb 9, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="border-b border-gray-200 dark:border-gray-700/60 last:border-0">
|
||||
<a class="block py-2 px-4 hover:bg-gray-50 dark:hover:bg-gray-700/20" href="#0"
|
||||
@click="open = false" @focus="open = true" @focusout="open = false">
|
||||
<span class="block text-sm mb-2">🚀<span
|
||||
class="font-medium text-gray-800 dark:text-gray-100">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
|
||||
<span class="block text-xs font-medium text-gray-400 dark:text-gray-500">Jan 24, 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!-- Search button -->
|
||||
<div x-data="{ searchOpen: false }">
|
||||
<!-- Button -->
|
||||
<button
|
||||
class="w-8 h-8 flex items-center justify-center hover:bg-gray-100 lg:hover:bg-gray-200 dark:hover:bg-gray-700/50 dark:lg:hover:bg-gray-800 rounded-full"
|
||||
:class="{ 'bg-gray-200 dark:bg-gray-800': searchOpen }"
|
||||
@click.prevent="searchOpen = true;if (searchOpen) $nextTick(()=>{$refs.searchInput.focus();});"
|
||||
aria-controls="search-modal"
|
||||
>
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="fill-current text-gray-500/80 dark:text-gray-400/80" width="16" height="16"
|
||||
viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Z"/>
|
||||
<path
|
||||
d="m13.314 11.9 2.393 2.393a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Modal backdrop -->
|
||||
<div
|
||||
class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity"
|
||||
x-show="searchOpen"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-out duration-100"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
aria-hidden="true"
|
||||
x-cloak
|
||||
></div>
|
||||
<!-- Modal dialog -->
|
||||
<div
|
||||
id="search-modal"
|
||||
class="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center px-4 sm:px-6"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
x-show="searchOpen"
|
||||
x-transition:enter="transition ease-in-out duration-200"
|
||||
x-transition:enter-start="opacity-0 translate-y-4"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in-out duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 translate-y-4"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 border border-transparent dark:border-gray-700/60 overflow-auto max-w-2xl w-full max-h-full rounded-lg shadow-lg"
|
||||
@click.outside="searchOpen = false"
|
||||
@keydown.escape.window="searchOpen = false"
|
||||
>
|
||||
<!-- Search form -->
|
||||
<form class="border-b border-gray-200 dark:border-gray-700/60">
|
||||
<div class="relative">
|
||||
<label for="modal-search" class="sr-only">Search</label>
|
||||
<input id="modal-search"
|
||||
class="w-full dark:text-gray-300 bg-white dark:bg-gray-800 border-0 focus:ring-transparent placeholder-gray-400 dark:placeholder-gray-500 appearance-none py-3 pl-10 pr-4"
|
||||
type="search" placeholder="Search Anything…" x-ref="searchInput"/>
|
||||
<button class="absolute inset-0 right-auto group" type="submit"
|
||||
aria-label="Search">
|
||||
<svg
|
||||
class="shrink-0 fill-current text-gray-400 dark:text-gray-500 group-hover:text-gray-500 dark:group-hover:text-gray-400 ml-4 mr-2"
|
||||
width="16" height="16" viewBox="0 0 16 16"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"/>
|
||||
<path
|
||||
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="py-4 px-2">
|
||||
<!-- Recent searches -->
|
||||
<div class="mb-3 last:mb-0">
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">
|
||||
Recent searches
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Form Builder - 23 hours on-demand video</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Access Mosaic on mobile and TV</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Product Update - Q4 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Master Digital Marketing Strategy course</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Dedicated forms for products</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z"/>
|
||||
</svg>
|
||||
<span>Product Update - Q4 2024</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Recent pages -->
|
||||
<div class="mb-3 last:mb-0">
|
||||
<div
|
||||
class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase px-2 mb-2">
|
||||
Recent pages
|
||||
</div>
|
||||
<ul class="text-sm">
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z"/>
|
||||
</svg>
|
||||
<span><span class="font-medium">Messages</span> - <span
|
||||
class="text-gray-600 dark:text-gray-400">Conversation / … / Mike Mills</span></span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="flex items-center p-2 text-gray-800 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700/20 rounded-lg"
|
||||
href="#0" @click="searchOpen = false" @focus="searchOpen = true"
|
||||
@focusout="searchOpen = false">
|
||||
<svg
|
||||
class="fill-current text-gray-400 dark:text-gray-500 shrink-0 mr-3"
|
||||
width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z"/>
|
||||
</svg>
|
||||
<span><span class="font-medium">Messages</span> - <span
|
||||
class="text-gray-600 dark:text-gray-400">Conversation / … / Eva Patrick</span></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,49 @@
|
||||
<div class="relative inline-flex" x-data="{ open: false }">
|
||||
<button
|
||||
class="inline-flex justify-center items-center group"
|
||||
aria-haspopup="true"
|
||||
@click.prevent="open = !open"
|
||||
:aria-expanded="open"
|
||||
>
|
||||
<img class="w-8 h-8 rounded-full" src="./images/user-avatar-32.png" width="32"
|
||||
height="32" alt="User"/>
|
||||
<div class="flex items-center truncate">
|
||||
<span
|
||||
class="truncate ml-2 text-sm font-medium text-gray-600 dark:text-gray-100 group-hover:text-gray-800 dark:group-hover:text-white">Acme Inc.</span>
|
||||
<svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400 dark:text-gray-500"
|
||||
viewBox="0 0 12 12">
|
||||
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<div
|
||||
class="origin-top-right z-10 absolute top-full right-0 min-w-44 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 py-1.5 rounded-lg shadow-lg overflow-hidden mt-1"
|
||||
@click.outside="open = false"
|
||||
@keydown.escape.window="open = false"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-200 transform"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-out duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
x-cloak
|
||||
>
|
||||
<div class="pt-0.5 pb-2 px-3 mb-1 border-b border-gray-200 dark:border-gray-700/60">
|
||||
<div class="font-medium text-gray-800 dark:text-gray-100">Acme Inc.</div>
|
||||
<div class="text-xs text-gray-500 dark:text-gray-400 italic">Administrator</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3"
|
||||
href="settings.html" @click="open = false" @focus="open = true"
|
||||
@focusout="open = false">Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="font-medium text-sm text-violet-500 hover:text-violet-600 dark:hover:text-violet-400 flex items-center py-1 px-3"
|
||||
href="signin.html" @click="open = false" @focus="open = true"
|
||||
@focusout="open = false">Sign Out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
65
resources/views/components/layouts/sidebar.blade.php
Normal file
65
resources/views/components/layouts/sidebar.blade.php
Normal file
@@ -0,0 +1,65 @@
|
||||
<div class="min-w-fit">
|
||||
<!-- Sidebar backdrop (mobile only) -->
|
||||
<div
|
||||
class="fixed inset-0 bg-gray-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200"
|
||||
:class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'"
|
||||
aria-hidden="true"
|
||||
x-cloak
|
||||
></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div
|
||||
id="sidebar"
|
||||
class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-white dark:bg-[#1B1B1B] shadow-sm rounded-r-2xl p-4 transition-all duration-200 ease-in-out"
|
||||
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'"
|
||||
@click.outside="sidebarOpen = false"
|
||||
@keydown.escape.window="sidebarOpen = false"
|
||||
x-cloak="lg"
|
||||
>
|
||||
|
||||
<!-- Sidebar header -->
|
||||
<div class="flex justify-between mb-10 pr-3 sm:px-2">
|
||||
<!-- Close button -->
|
||||
<button class="lg:hidden text-gray-500 hover:text-gray-400" @click.stop="sidebarOpen = !sidebarOpen"
|
||||
aria-controls="sidebar" :aria-expanded="sidebarOpen">
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Logo -->
|
||||
<img src="{{ asset('img/einundzwanzig-horizontal-inverted.svg') }}" alt="Logo" width="auto" height="32">
|
||||
</div>
|
||||
|
||||
@php
|
||||
$activeLinkGroupClass = ' bg-[linear-gradient(135deg,var(--tw-gradient-stops))] from-amber-500/[0.12] dark:from-amber-500/[0.24] to-amber-500/[0.04]';
|
||||
$activeItemClass = 'block text-amber-500 transition truncate';
|
||||
@endphp
|
||||
|
||||
<!-- Links -->
|
||||
<div class="space-y-8">
|
||||
@include('components.layouts.navigation.meetups')
|
||||
{{--@include('components.layouts.navigation.events')
|
||||
@include('components.layouts.navigation.courses')
|
||||
@include('components.layouts.navigation.nostr')
|
||||
@include('components.layouts.navigation.legacy')--}}
|
||||
</div>
|
||||
|
||||
<!-- Expand / collapse button -->
|
||||
<div class="pt-3 hidden lg:inline-flex 2xl:hidden justify-end mt-auto">
|
||||
<div class="w-12 pl-4 pr-3 py-2">
|
||||
<button
|
||||
class="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors"
|
||||
@click="sidebarExpanded = !sidebarExpanded">
|
||||
<span class="sr-only">Expand / collapse sidebar</span>
|
||||
<svg class="shrink-0 fill-current text-gray-400 dark:text-gray-500 sidebar-expanded:rotate-180"
|
||||
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15 16a1 1 0 0 1-1-1V1a1 1 0 1 1 2 0v14a1 1 0 0 1-1 1ZM8.586 7H1a1 1 0 1 0 0 2h7.586l-2.793 2.793a1 1 0 1 0 1.414 1.414l4.5-4.5A.997.997 0 0 0 12 8.01M11.924 7.617a.997.997 0 0 0-.217-.324l-4.5-4.5a1 1 0 0 0-1.414 1.414L8.586 7M12 7.99a.996.996 0 0 0-.076-.373Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user