dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

add slide-over component

Browse Source
This commit is contained in:
Andras Bacsai
2024-01-23 19:01:17 +01:00
parent fb478c79b3
commit 7a51acbf8d
6 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/views/components/slide-over.blade.php
View File

@@ -4,7 +4,7 @@
{{ $slot }}
<template x-teleport="body">
<div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" class="relative z-[99]">
<div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 "></div>
<div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-60"></div>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -15,17 +15,17 @@
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
class="w-screen max-w-md">
<div
class="flex flex-col h-full py-5 overflow-y-scroll border-l shadow-lg bg-primary border-neutral-800">
<div class="px-4 sm:px-5">
class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base-100 border-neutral-800">
<div class="px-4 pb-10 sm:px-5">
<div class="flex items-start justify-between pb-1">
<h2 class="text-base leading-6" id="slide-over-title">
<h2 class="text-2xl leading-6" id="slide-over-title">
{{ $title }}</h2>
<div class="flex items-center h-auto ml-3">
<button @click="slideOverOpen=false"
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-5 space-x-1 text-xs font-normal border-none rounded">
<button class="icon" @click="slideOverOpen=false"
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-3 h-3">
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>