Dependencies
This component uses the following to create the full UI.
JS: Note:
This component *needs* javascript to be enabled and to load correctly to work.
Basic Example
A typical "sidebar" type modal, using Alpine JS to toggle state between open and closed. Includes all necessary adjustment of aria attributes for accessibility.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>Alignment
The sidebar modal can be aligned on the left or the right of the viewport.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>Modal Header and Footer
Add a header and/or footer area to the sidebar body.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-header | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow">
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
</div>
<div class="c-modal__body-footer | u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-header | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow">
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
</div>
<div class="c-modal__body-footer | u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>Close
Add a close button to the modal, inside and outside the main body.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
>
<div class="c-modal__body-close">
<button class="c-btn c-btn--clear" type="button" @click="modalOpen = false">
<span class="u-hidden">Close</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-close">
<button class="c-btn c-btn--clear" type="button" @click="modalOpen = false">
<span class="u-hidden">Close</span>
<svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</div>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__close">
<button class="c-btn c-btn--clear" type="button" @click="modalOpen = false">
<span class="u-hidden">Close Dialog</span>
<svg class="c-icon c-icon--lg" viewbox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__close">
<button class="c-btn c-btn--clear" type="button" @click="modalOpen = false">
<span class="u-hidden">Close Dialog</span>
<svg class="c-icon c-icon--lg" viewbox="0 0 24 24" width="16" height="16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
</svg>
</button>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>Modal Bar
Add a separated "bar" to the side of a modal, used for displaying extra buttons.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
<div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__wrapper"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-n100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-n100%"
>
<div class="c-modal__body">
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
<div class="c-modal__bar">
<ul class="c-modal__tabs c-modal__tabs--top | o-list-stacked">
<li class="c-modal__tab-item | o-list__item">
<button class="c-modal__tab-close c-link-bare" @click="navOpen = false">
<span class="u-hidden">Close Menu</span>
<svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div><div x-data="{ modalOpen : false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__wrapper"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<div class="c-modal__body">
<div class="c-modal__body-content | o-flow">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
<div class="c-modal__bar">
<ul class="c-modal__tabs c-modal__tabs--top | o-list-stacked">
<li class="c-modal__tab-item | o-list__item">
<button class="c-modal__tab-close c-link-bare" @click="navOpen = false">
<span class="u-hidden">Close Menu</span>
<svg class="c-icon c-icon--md" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
</div>Nested Drawers
Deeper section drawers to break up content into smaller chunks.
Title
Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.
Section 1
Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.
Section 2
Man your ships! And may the Force be with you! Orbiting the planet at maximum velocity. The moon with the Rebel base will be in range in thirty minutes. This will be a day long remembered. It has seen the end of Kenobi and it will soon see the end of the Rebellion. All flight trooper, man your stations.
<div x-data="{ modalOpen : false, selected: false }">
<!-- Trigger -->
<button class="c-btn" @click="modalOpen = true" type="button">Open Sidebar</button>
<!-- Modal -->
<div class="c-modal c-modal--sidebar c-modal--right" role="dialog" aria-modal="true" style="display: none;"
x-show="modalOpen"
x-id="['modal-title']"
x-on:keydown.escape.prevent.stop="modalOpen = false"
:aria-labelledby="$id('modal-title')"
>
<div class="c-modal__overlay"
x-show="modalOpen"
x-transition.opacity.duration.400
@click="modalOpen = false"
>
</div>
<div class="c-modal__body"
x-show="modalOpen"
@click.outside="modalOpen = false"
x-trap.noautofocus.noscroll.inert="modalOpen"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
x-on:keydown.escape.prevent.stop="selected = false"
:class="selected && 'is-open-drawer'"
>
<div class="c-modal__body-header">
<h2 class="u-heading u-gamma u-fw-500" :id="$id('modal-title')">Title</h2>
</div>
<div class="c-modal__body-content | o-flow">
<p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
<div class="u-space-x-sm">
<button class="c-btn" id="drawer-1" type="button"
@click="selected = $el.id"
>
Open Drawer 1
</button>
<button class="c-btn" id="drawer-2" type="button"
@click="selected = $el.id"
>
Open Drawer 2
</button>
</div>
</div>
<!-- Drawer 1 -->
<div class="c-modal__body-drawer" id="drawer_1"
x-show="selected === 'drawer-1'"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<button class="c-link-bare" type="button"
@click="selected = null"
>
Back
</button>
<div class="o-flow">
<strong>Section 1</strong>
<p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction.</p>
</div>
</div>
<!-- Drawer 2 -->
<div class="c-modal__body-drawer" id="drawer_2"
x-show="selected === 'drawer-2'"
x-transition:enter="u-transition"
x-transition:enter-start="u-translate-x-100%"
x-transition:enter-end="u-translate-x-0"
x-transition:leave="u-transition"
x-transition:leave-start="u-translate-x-0"
x-transition:leave-end="u-translate-x-100%"
>
<button class="c-link-bare" type="button"
@click="selected = null"
>
Back
</button>
<div class="o-flow">
<strong>Section 2</strong>
<p>Man your ships! And may the Force be with you! Orbiting the planet at maximum velocity. The moon with the Rebel base will be in range in thirty minutes. This will be a day long remembered. It has seen the end of Kenobi and it will soon see the end of the Rebellion. All flight trooper, man your stations.</p>
</div>
</div>
<!-- Footer -->
<div class="c-modal__body-footer | u-space-x-xs">
<button class="c-btn c-btn--primary" type="button" @click="modalOpen = false">Confirm</button>
<button class="c-btn c-btn--tertiary" type="button" @click="modalOpen = false">Cancel</button>
</div>
</div>
</div>
</div>