Prev
19
Next

Day 19 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 19

Day 19

Context Menu & Spoiler

Right-click context menu with precise positioning and hide/reveal content with transitions

Context Menu

Custom right-click context menu with Alpine.js positioning, keyboard shortcuts, and nested submenus.

Features

  • Right-click trigger with x-on:contextmenu.prevent
  • Precise positioning at cursor location
  • Nested submenu support
  • Keyboard shortcuts display
  • Click-away and escape to close

File Explorer Menu

project-proposal.pdf

Right-click to see options

Text Editor Menu

The douala city is the economic capital of Cameroon, famous for its vibrant markets and bustling port. Right-click on this text to see formatting options and actions available.

Spoiler / Accordion

Hide and reveal content with smooth transitions using Alpine.js x-collapse.

Features

  • Smooth collapse/expand animation
  • Multiple variants (warning, info, success, danger)
  • FAQ accordion with single/multiple open
  • Rotated icon indicator
  • Default open state option

Spoiler Variants

The hero saves the world at the last second thanks to friendship and the power of love. Plot twist: the villain was his father all along!
The answer is 42. But the real treasure is the journey taken to find that answer.
Here is the code: CAMEROON2024. Use it to unlock the bonus level!

FAQ Accordion

Install Livewire via Composer with the command: `composer require livewire/livewire`. Then, include the @livewireStyles and @livewireScripts directives in your Blade layout.
Livewire handles server-side logic with PHP and synchronizes state via AJAX, while Alpine.js is a lightweight JavaScript framework for client-side interactions. They complement each other perfectly!
Technically yes, but it is not recommended as they have different philosophies. Livewire uses partial AJAX requests, Inertia replaces the entire page. Choose one or the other based on your needs.
Use wire:model.lazy to reduce requests, implement pagination, use Laravel cache, and enable wire:loading to improve UX during loading.

Multiple Open Allowed

This accordion allows multiple sections to be open at the same time.
Try opening this while the first one is still open!
All three can be expanded simultaneously.

Usage Examples

Context Menu Usage

{{-- Basic Context Menu --}}
<x-ui.context-menu :items="$menuItems">
    <div class="p-4 border rounded-lg">
        Right-click here to see the menu
    </div>
</x-ui.context-menu>
 
{{-- Menu Items Array Structure --}}
@php
$menuItems = [
    // Regular item with icon
    [
        'icon' => 'copy',
        'label' => 'Copy',
        'action' => 'copy',
        'shortcut' => 'Ctrl+C'
    ],
 
    // Separator
    ['type' => 'separator'],
 
    // Item with submenu
    [
        'icon' => 'share-2',
        'label' => 'Share',
        'action' => 'share',
        'children' => [
            ['icon' => 'link', 'label' => 'Copy link', 'action' => 'copy-link'],
            ['icon' => 'mail', 'label' => 'Send by email', 'action' => 'email'],
        ]
    ],
 
    // Danger variant
    [
        'icon' => 'trash-2',
        'label' => 'Delete',
        'action' => 'delete',
        'variant' => 'danger'
    ],
];
@endphp
 
{{-- Handle Action in Livewire --}}
{{-- In your Livewire component: --}}
public function handleContextAction(string $action): void
{
    match($action) {
        'copy' => $this->copyToClipboard(),
        'delete' => $this->deleteItem(),
        default => null,
    };
}

Spoiler & Accordion Usage

{{-- Basic Spoiler --}}
<x-ui.spoiler title="Click to reveal">
    Hidden content here...
</x-ui.spoiler>
 
{{-- Spoiler with Variant --}}
<x-ui.spoiler
    title="Spoiler Alert!"
    variant="warning"
>
    The movie ending is revealed here.
</x-ui.spoiler>
 
{{-- Available Variants --}}
{{-- default, warning, info, success, danger --}}
 
{{-- Default Open --}}
<x-ui.spoiler
    title="Already Open"
    :default-open="true"
>
    This content is visible by default.
</x-ui.spoiler>
 
{{-- FAQ Accordion --}}
@php
$faqItems = [
    [
        'question' => 'How to install?',
        'answer' => 'Run composer require...'
    ],
    [
        'question' => 'Is it free?',
        'answer' => 'Yes, it is open source!'
    ],
];
@endphp
 
{{-- Single open at a time --}}
<x-ui.accordion
    :items="$faqItems"
    :multiple="false"
/>
 
{{-- Multiple sections open --}}
<x-ui.accordion
    :items="$faqItems"
    :multiple="true"
/>