### Install NapTab via Composer

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Add the NapTab package to your Laravel project using Composer and then run the installation command.

```Bash
composer require hdaklue/naptab
```

```Bash
php artisan naptab:install
```

--------------------------------

### Install NapTab via Composer

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This command installs the NapTab package using Composer, the dependency manager for PHP. Ensure you have Composer installed and configured for your Laravel project.

```bash
composer require hdaklue/naptab
```

--------------------------------

### Install NapTab via Composer

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Installs the NapTab package using Composer and runs the necessary Artisan command to set up the configuration provider, publish assets, and register the service provider.

```bash
composer require hdaklue/naptap
php artisan naptab:install
```

--------------------------------

### Install NapTab CSS Files

Source: https://github.com/hdaklue/naptap/blob/main/README.md

The `naptab:install` command publishes core component styles and Tailwind CSS safelist files to the public vendor directory.

```CSS
/* Core tab navigation styles */
.naptab-scroll-behavior {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
```

```CSS
/* Prevents Tailwind from purging dynamic color classes */
@source inline("{hover:,focus:,dark:}bg-blue-{50,500,900/20}");
```

--------------------------------

### Install NapTab Package

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Installs the NapTab package using Composer. This is the first step in integrating NapTab into your Laravel project.

```bash
composer require hdaklue/naptap
```

--------------------------------

### Install NapTab Assets and Configuration

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Publishes NapTab's assets (CSS) and configuration files. This command also registers the service provider, setting up NapTab for use.

```bash
php artisan naptab:install
```

--------------------------------

### Add NapTab Service Provider to app.php

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Manually adds the NapTab Service Provider to the `providers` array in `config/app.php`. This is typically handled automatically by the `naptab:install` command.

```php
// config/app.php
'providers' => [
    // ...
    App\Providers\NapTabServiceProvider::class,
],
```

--------------------------------

### PHP E-commerce Product Tabs: Reviews Section with Hooks

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Example of using content hooks for an e-commerce product 'reviews' tab. It includes a `beforeContent` hook to render trust badges and an `afterContent` hook for a verification message.

```php
Tab::make('reviews')
    ->beforeContent(fn() => $this->renderTrustBadges())
    ->afterContent('<div class="mt-4 p-3 bg-blue-50 rounded">
        <p class="text-sm text-blue-700">All reviews are verified purchases</p>
    </div>')
    ->content(fn() => view('product.reviews'));
```

--------------------------------

### PHP: NapTab Available Direction Options

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Provides examples of setting the layout direction for NapTab, including the default 'Horizontal' and the 'Aside' layout for sidebar interfaces.

```php
// Traditional horizontal layout (default)
protected function direction(): Direction
{
    return Direction::Horizontal;
}

```

```php
// Modern aside/sidebar layout  
protected function direction(): Direction
{
    return Direction::Aside;
}

```

--------------------------------

### PHP Blade View for Tab Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This example illustrates how to render a Blade view as the content for a tab. It allows for complex UI structures and data binding within the tab.

```php
Tab::make('faq')
    ->label('FAQ')
    ->content(view('pages.faq', ['categories' => $this->getFaqCategories()]))
```

--------------------------------

### NapTab with Lazy Loaded Content (Closure)

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This example shows how to use NapTab with lazy-loaded content using a Closure. The content for 'Lazy Tab' will only be executed and rendered when the tab is activated, improving initial page load performance.

```Blade
<x-naptab::tabs>
    <x-naptab::tab name="Lazy Tab" lazy>
        {{-- Content will be loaded only when the tab is clicked --}}
        @php
            // Simulate a heavy operation
            sleep(2);
            echo 'This content was loaded lazily!';
        @endphp
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### NapTab with URL Routing

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This example shows how to enable URL routing for NapTab, allowing users to bookmark specific tabs. The `route` attribute is used to define the URL segment for each tab.

```Blade
<x-naptab::tabs>
    <x-naptab::tab name="Profile" route="profile">
        User Profile Content
    </x-naptab::tab>
    <x-naptab::tab name="Account" route="account">
        Account Settings Content
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### PHP Admin Dashboard Hooks: Breadcrumbs and Session Timer

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Provides examples for admin dashboard sections. `beforeContent` renders breadcrumbs using a view, and `afterContent` uses a Closure to display a dynamic session timer.

```php
public function beforeContent(): string
{
    return view('admin.breadcrumbs', ['section' => 'Dashboard'])->render();
}

public function afterContent(): Closure
{
    return fn() => '<div class="mt-8 text-xs text-gray-500 text-center">
        Session expires in: <span id="session-timer">' . session()->getMaxLifetime() . '</span> minutes
    </div>';
}
```

--------------------------------

### NapTab with Tab-Level Hook

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This example demonstrates a tab-level hook in NapTab. The 'Tab Hook Content' will be rendered specifically within the 'Tab C' container, allowing for content specific to that tab.

```Blade
<x-naptab::tabs>
    <x-naptab::tab name="Tab C">
        <x-naptab::hook type="tab">
            Tab Hook Content
        </x-naptab::hook>
        Content for Tab C
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### Run NapTab Package Tests

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Execute the package's test suite using Composer to ensure its functionality and stability.

```Bash
composer test
```

--------------------------------

### NapTab: Load Tab Content via Livewire Component

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates loading interactive tab content using a Livewire component. Includes configuration for visibility and error handling.

```php
Tab::make('settings')
    ->icon('cog-6-tooth')
    ->livewire(UserSettings::class, ['userId' => auth()->id()])
    ->visible(fn() => auth()->user()->can('manage-settings'))
    ->onError(fn(Tab $tab, Exception $error) => logger()->error('Settings tab error', [
        'tab' => $tab->getId(),
        'error' => $error->getMessage()
    ]))
```

--------------------------------

### Create a Dashboard Tab Component with NapTab

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates how to create a Livewire component that utilizes NapTab to manage tabbed content. It shows how to define tab layouts, content hooks (before/after content), and integrate dynamic data or other Livewire components within tabs.

```php
<?php

namespace App\Livewire;

use Hdaklue\NapTab\Livewire\NapTab;
use Hdaklue\NapTab\UI\Tab;
use Hdaklue\NapTab\Enums\Direction;

class DashboardTabs extends NapTab
{
    // Choose your preferred layout direction
    protected function direction(): Direction
    {
        return Direction::Horizontal; // Default: traditional top tabs
        // return Direction::Aside;   // Modern sidebar layout for dashboard-style interfaces
    }
    
    // CONTAINER-LEVEL CONTENT HOOKS (NEW FEATURE!)
    public function beforeContent(): string
    {
        return '<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
            <p class="text-blue-700">🚀 Welcome to your performance dashboard!</p>
        </div>';
    }
    
    public function afterContent(): \Closure
    {
        return fn() => view('partials.dashboard-footer', [
            'totalUsers' => \App\Models\User::count(),
            'lastUpdate' => now()
        ]);
    }
    
    protected function tabs(): array
    {
        return [
            // Controller method approach (recommended for dynamic content)
            Tab::make('overview')
                ->label('Overview')
                ->icon('chart-bar')
                ->beforeContent('<p class="text-sm text-gray-600 mb-4">📊 Real-time overview</p>'),
                
            // Direct content with live data + tab-level hooks
            Tab::make('analytics')
                ->label('Analytics')
                ->icon('presentation-chart-line')
                ->badge(fn() => $this->getPendingReports())
                ->beforeContent('<div class="alert alert-info mb-4">Analytics updated every 5 min</div>')
                ->afterContent(fn() => '<small class="text-gray-500">Last sync: ' . now()->format('H:i') . '</small>')
                ->content(fn() => view('dashboard.analytics', [
                    'data' => $this->getAnalyticsData() // Only loads when clicked!
                ])),
                
            // Livewire component integration
            Tab::make('settings')
                ->label('Settings')
                ->icon('cog-6-tooth')
                ->afterContent('<div class="mt-4 p-3 bg-gray-50 rounded">
                    <p class="text-xs text-gray-600">Changes are saved automatically</p>
                </div>')
                ->livewire(\App\Livewire\UserSettings::class, ['userId' => auth()->id()]),
        ];
    }

    // This method only runs when the Overview tab is clicked
    public function overview()
    {
        $metrics = [
            'users' => \App\Models\User::count(),
            'orders' => \App\Models\Order::today()->count(),
            'revenue' => \App\Models\Order::today()->sum('total'),
        ];
        
        return view('dashboard.overview', compact('metrics'));
    }
    
    private function getAnalyticsData()
    {
        // Complex analytics only computed when user accesses this tab
        return collect([
            'pageviews' => 15420,
            'conversions' => 342,
            'revenue' => 28750
        ]);
    }
    
    private function getPendingReports()
    {
        return \App\Models\Report::where('status', 'pending')->count();
    }
}

```

--------------------------------

### PHP: NapTab Tab API Core Configuration

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Illustrates the core configuration methods for creating and customizing NapTab tabs, including setting IDs, labels, icons, badges, and disabling tabs.

```php
Tab::make('id')           // Creates a new tab instance
    ->label('Custom Label')        // Set tab label (string|Closure)
    ->icon('heroicon-name')        // Set Heroicon name (string|Closure|null)  
    ->badge('New')                 // Display badge text (string|Closure|null)
    ->disabled(true)               // Disable tab (bool|Closure, default: false)

```

--------------------------------

### NapTab Livewire Component with Content Hooks

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP code defines a Livewire component extending NapTab. It showcases container-level hooks (`beforeContent`, `afterContent`) and tab-level hooks (`beforeContent`, `afterContent`) for injecting custom content around tab elements. It also demonstrates defining tabs with labels, custom content views, and integrating other Livewire components.

```PHP
<?php

namespace App\Livewire;

use Hdaklue\NapTab\Livewire\NapTab;
use Hdaklue\NapTab\UI\Tab;
use Illuminate\View\View;
use Closure;

class DashboardTabs extends NapTab
{
    // CONTAINER-LEVEL HOOKS - Applied to entire tabs container
    
    public function beforeContent(): View
    {
        return view('partials.dashboard-header', [
            'user' => auth()->user(),
            'lastLogin' => auth()->user()->last_login_at
        ]);
    }
    
    public function afterContent(): Closure
    {
        return fn() => view('partials.dashboard-stats', [
            'totalTabs' => count($this->tabs()),
            'activeUsers' => \App\Models\User::online()->count(),
            'systemStatus' => $this->getSystemStatus()
        ]);
    }
    
    protected function tabs(): array
    {
        return [
            // TAB-LEVEL HOOKS - Applied to individual tab content
            Tab::make('analytics')
                ->label('Analytics Dashboard')
                ->beforeContent('<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
                    <p class="text-sm text-blue-700">📊 Analytics data is updated every 5 minutes</p>
                </div>')
                ->afterContent(fn() => '<div class="mt-4 text-sm text-gray-500 text-center">
                    Last updated: ' . now()->format('M j, Y \a\t g:i A') . '
                </div>')
                ->content(fn() => view('dashboard.analytics', [
                    'metrics' => $this->calculateAnalytics() // Only loads when clicked!
                ])),
                
            Tab::make('users')
                ->label('User Management') 
                ->beforeContent(fn() => $this->renderUserAlert())
                ->afterContent('<div class="bg-gray-50 p-3 rounded mt-4">
                    <p class="text-xs text-gray-600">Need help? Contact support</p>
                </div>')
                ->livewire(\App\Livewire\UserManagement::class),
        ];
    }
    
    private function renderUserAlert(): string
    {
        $pendingUsers = \App\Models\User::where('status', 'pending')->count();
        
        if ($pendingUsers > 0) {
            return "<div class='bg-yellow-50 border border-yellow-200 rounded-md p-3 mb-4'>
                <p class='text-sm text-yellow-800'>⚠️ {$pendingUsers} users pending approval</p>
            </div>";
        }
        
        return '';
    }
}
```

--------------------------------

### PHP Tab-Level Hooks: Reports Tab with Before and After Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates configuring a 'reports' tab using `Tab::make`. It includes a `beforeContent` hook with static HTML for an alert and an `afterContent` hook using a Closure to render a dynamic footer with report data.

```php
Tab::make('reports')
    ->label('Reports')
    
    // Alert header for this tab only
    ->beforeContent('<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        Reports are generated in real-time
    </div>')
    
    // Dynamic footer with live data
    ->afterContent(fn() => view('components.report-footer', [
        'totalReports' => \App\Models\Report::count(),
        'lastGenerated' => \App\Models\Report::latest()->first()?->created_at
    ]))
    
    ->content(fn() => view('reports.index'));
```

--------------------------------

### PHP Multi-step Forms: Progress Bar and Navigation Hooks

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Illustrates using content hooks in a multi-step form context. `beforeContent` displays a progress bar, and `afterContent` provides navigation buttons for moving between steps.

```php
Tab::make('step-2')
    ->beforeContent('<div class="progress-bar mb-4">
        <div class="progress-fill" style="width: 40%"></div>
    </div>')
    ->afterContent('<div class="flex justify-between mt-6">
        <button wire:click="previousStep" class="btn-secondary">Previous</button>  
        <button wire:click="nextStep" class="btn-primary">Next Step</button>
    </div>');
```

--------------------------------

### Apply Minimal Tab Style

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Applies the 'Minimal' preset style, featuring a clean design with no shadows, thin borders, small badges, and compact spacing.

```php
->style(TabStyle::Minimal)
// Clean design with no shadows, thin borders, small badges, compact spacing
```

--------------------------------

### PHP: NapTab Tab API Content Definition

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates different ways to define the content for NapTab tabs, including calling controller methods, rendering views with closures, and using Livewire components.

```php
// Option 1: Controller method (recommended for dynamic content)
Tab::make('dashboard') // Automatically calls $this->dashboard() method

```

```php
// Option 2: Direct content with closure
Tab::make('about')
    ->label('About')
    ->content(fn() => view('pages.about'))  // Returns Htmlable content

```

```php
// Option 3: Livewire component
Tab::make('settings')
    ->label('Settings')
    ->livewire(UserSettings::class, ['userId' => 123]) // Component class and params

```

--------------------------------

### PHP NapTab Core Configuration Methods

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP code lists and describes the core configuration methods available in NapTabConfig for customizing tab appearance, including style, color, radius, shadow, border, spacing, and transitions.

```php
NapTabConfig::create()                              // Create new config instance
    ->style(TabStyle $style)                        // Modern | Minimal | Sharp | Pills preset
    ->color(TabColor $primary, TabColor $secondary) // Theme colors  
    ->radius(TabBorderRadius $radius)               // Border radius
    ->shadow(Shadow $shadow, ?string $color)        // Shadow size and custom color
    ->border(TabBorderWidth $width, ?bool $double)  // Border width and double border
    ->spacing(TabSpacing $spacing)                  // Small | Normal | Large
    ->transition(TabTransition $duration, ?TabTransitionTiming $timing)
```

--------------------------------

### PHP Tab-Level Hooks: Settings Tab with Conditional Warning and Help Link

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Configures a 'settings' tab with a conditional `beforeContent` hook that displays a warning if the user's email is not verified. The `afterContent` hook adds a help link.

```php
Tab::make('settings')
    ->label('Settings')
    
    // Conditional warning
    ->beforeContent(function() {
        if (!auth()->user()->hasVerifiedEmail()) {
            return '<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
                Please verify your email address to access all features.
            </div>';
        }
        return null;
    })
    
    // Help link
    ->afterContent('<div class="mt-6 text-center">
        <a href="/help/settings" class="text-blue-600 hover:text-blue-800">Need help with settings?</a>
    </div>')
    
    ->livewire(App\Livewire\UserSettings::class);
```

--------------------------------

### NapTab: Load Tab Content via Controller Method

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates loading tab content using a controller method, suitable for complex logic. Includes configuration for icons, badges, visibility, disabling, and before/after load callbacks.

```php
<?php

namespace App\Livewire;

use Hdaklue\NapTab\Livewire\NapTab;
use Hdaklue\NapTab\UI\Tab;
use App\Livewire\UserSettings;
use Illuminate\Support\Facades\Gate;

class ComprehensiveTabs extends NapTab
{
    protected function tabs(): array
    {
        return [
            // Method 1: Controller Method (Recommended for complex logic)
            Tab::make('dashboard')
                ->icon('chart-bar')
                ->badge(fn() => $this->getNotificationCount())
                ->visible(fn() => auth()->check())
                ->disabled(fn() => $this->isMaintenanceMode())
                ->beforeLoad(fn(Tab $tab) => $this->logTabAccess($tab->getId()))
                ->afterLoad(fn(Tab $tab, string $content) => $this->trackPerformance($tab->getId())),
                
            // Method 2: Direct Content (Simple HTML/Blade)
            Tab::make('about')
                ->icon('information-circle')
                ->content(fn() => '<div class="p-4">
                    <h2>About Our Company</h2>
                    <p>We are a leading provider...</p>
                </div>'),
                
            // Method 3: Blade View (Static content)
            Tab::make('contact')
                ->icon('envelope')
                ->content(fn() => view('pages.contact')),
                
            // Method 4: Livewire Component (Interactive content)
            Tab::make('settings')
                ->icon('cog-6-tooth')
                ->livewire(UserSettings::class, ['userId' => auth()->id()])
                ->visible(fn() => auth()->user()->can('manage-settings'))
                ->onError(fn(Tab $tab, Exception $error) => logger()->error('Settings tab error', [
                    'tab' => $tab->getId(),
                    'error' => $error->getMessage()
                ])),
                
            // Method 5: Advanced Configuration with Authorization
            Tab::make('analytics')
                ->icon('presentation-chart-line')
                ->badge('Pro')
                ->onSwitch(fn(Tab $tab, string $from, string $to) => $this->trackTabSwitch($from, $to)),
        ];
    }

    // Controller method for Method 1
    public function dashboard()
    {
        // Heavy computation only runs when tab is clicked
        $metrics = $this->calculateDashboardMetrics();
        $charts = $this->generateChartData();
        
        return view('dashboard.overview', compact('metrics', 'charts'));
    }
}

```

--------------------------------

### PHP Livewire Component for Tab Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP code demonstrates integrating a Livewire component into a tab. This is ideal for interactive tab content that requires real-time updates and server-side logic.

```php
Tab::make('chat')
    ->label('Live Chat')
    ->livewire(ChatWidget::class, [
        'room' => 'support',
        'user' => auth()->user()
    ])
```

--------------------------------

### Apply Sharp Tab Style

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Applies the 'Sharp' preset style, characterized by a bold geometric design with no shadows, no borders, and no rounded corners.

```php
->style(TabStyle::Sharp) 
// Bold geometric design with no shadows, no borders, no rounded corners
```

--------------------------------

### NapTab: Advanced Tab Configuration

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Shows advanced configuration options for tabs, including badges and handling tab switches. This allows for dynamic information display and tracking user interactions.

```php
Tab::make('analytics')
    ->icon('presentation-chart-line')
    ->badge('Pro')
    ->onSwitch(fn(Tab $tab, string $from, string $to) => $this->trackTabSwitch($from, $to))
```

--------------------------------

### PHP Container-Level Hooks: Static HTML and Blade View

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates how to implement container-level hooks in PHP using static HTML strings and dynamic Blade views. The `beforeContent` method returns an HTML string, while `afterContent` returns a Blade view instance with passed data.

```php
public function beforeContent(): string
{
    return '<div class="alert alert-info">Welcome to your dashboard!</div>';
}

public function afterContent(): View
{
    return view('partials.footer', [
        'timestamp' => now(),
        'version' => config('app.version')
    ]);
}
```

--------------------------------

### Register NapTab Configuration Singleton

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Registers the NapTab configuration as a singleton in the service container, creating a new instance and applying the 'Pills' style. This ensures efficient configuration management.

```php
// Configuration is cached as singleton in service container
$this->app->singleton('naptab.config', function () {
    return NapTabConfig::create()->style(TabStyle::Pills);
});
```

--------------------------------

### PHP: NapTab Tab API Content Hooks

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Explains how to inject custom HTML or dynamic content before or after the main tab content using the `beforeContent` and `afterContent` methods.

```php
Tab::make('profile')
    ->label('Profile')
    // Content placed before tab content
    ->beforeContent('<div class="alert alert-info mb-4">Profile information</div>')
    
    // Content placed after tab content (supports closures)
    ->afterContent(fn() => view('components.profile-footer', [
        'lastUpdated' => $user->updated_at
    ]))

```

--------------------------------

### PHP NapTab Service Provider Configuration

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP code defines a Service Provider to configure NapTab globally. It demonstrates setting various visual aspects like styles, colors, borders, shadows, and animations for tabs.

```php
<?php

namespace App\Providers;

use Hdaklue\NapTab\Services\NapTabConfig;
use Hdaklue\NapTab\Enums\{
    TabStyle, TabColor, TabBorderRadius, Shadow, 
    TabSpacing, TabBorderWidth, TabTransition, 
    TabTransitionTiming, BadgeSize, ContentAnimation, Direction
};
use Illuminate\Support\ServiceProvider;

class NapTabServiceProvider extends ServiceProvider
{
    public function register()
    {
        $this->app->singleton('naptab.config', function () {
            return NapTabConfig::create()
                // Preset styles - applies multiple settings at once
                ->style(TabStyle::Modern)                    // Modern | Minimal | Sharp | Pills
                
                // Visual customization
                ->color(TabColor::Blue, TabColor::Gray)      // Primary & secondary colors
                ->radius(TabBorderRadius::Medium)            // Border radius
                ->shadow(Shadow::Large, 'shadow-blue-500/20 dark:shadow-blue-400/30')
                ->border(TabBorderWidth::Thick, true)        // Width & double border
                ->spacing(TabSpacing::Normal)                // Tab spacing
                ->transition(TabTransition::Duration300, TabTransitionTiming::EaseInOut)
                
                // Badge customization  
                ->badgeRadius(TabBorderRadius::Full)
                ->badgeSize(BadgeSize::Medium)
                
                // Content animation
                ->contentAnimation(ContentAnimation::Fade)
                
                // Mobile navigation
                ->navModalOnMobile(false);                   // true = modal, false = scroll
        });
    }
    
    public function boot()
    {
        // Service provider boot logic
    }
}
```

--------------------------------

### PHP NapTab Badge and Content Configuration

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP snippet outlines methods for configuring tab badges and content animations, including setting badge radius, size, and the type of animation for content transitions.

```php
->badgeRadius(TabBorderRadius $radius)              // Badge border radius
->badgeSize(BadgeSize $size)                        // Small | Medium | Large

->contentAnimation(ContentAnimation $animation)     // Content transition animation
->navModalOnMobile(bool $useModal = true)          // Mobile modal navigation
```

--------------------------------

### PHP: NapTab Tab API Lifecycle Hooks

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Details the lifecycle hooks available for NapTab tabs, including `beforeLoad`, `afterLoad`, `onError`, and `onSwitch`, allowing for custom logic during tab events.

```php
Tab::make('analytics')
    ->label('Analytics')
    ->beforeLoad(function(Tab $tab) {
        // Called before tab content loads
        logger()->info("Loading tab: {$tab->getId()}");
    })
    ->afterLoad(function(Tab $tab, string $content) {
        // Called after content is loaded
        $this->trackTabView($tab->getId());
    })
    ->onError(function(Tab $tab, Exception $error) {
        // Called when tab loading fails
        $this->logTabError($tab->getId(), $error->getMessage());
    })
    ->onSwitch(function(Tab $tab, string $fromTabId, string $toTabId) {
        // Called when switching to this tab
        $this->analyzeTabFlow($fromTabId, $toTabId);
    });

```

--------------------------------

### Basic NapTab Usage in Blade

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This Blade snippet demonstrates the basic usage of NapTab, creating a tabbed interface with two tabs: 'Tab 1' and 'Tab 2'. Each tab's content is defined within its respective section.

```Blade
<x-naptab::tabs>
    <x-naptab::tab name="Tab 1">
        Content for Tab 1
    </x-naptab::tab>
    <x-naptab::tab name="Tab 2">
        Content for Tab 2
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### Apply Modern Tab Style

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Applies the 'Modern' preset style to the tabs, offering a rich visual experience with shadows, thick borders, and large badges.

```php
->style(TabStyle::Modern)
// Rich visual experience with shadows, thick borders, large badges
```

--------------------------------

### NapTab: Load Tab Content Directly

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Shows how to load tab content directly using simple HTML or Blade strings. This method is suitable for static or easily constructible content within the tab.

```php
Tab::make('about')
    ->icon('information-circle')
    ->content(fn() => '<div class="p-4">
        <h2>About Our Company</h2>
        <p>We are a leading provider...</p>
    </div>')
```

--------------------------------

### Clear Application and Config Cache

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Commands to clear the application cache and specifically the configuration cache if `config:cache` has been used. Also includes restarting the development server.

```bash
# Clear application cache
php artisan cache:clear

# Clear config cache (if using config:cache)
php artisan config:clear

# Restart development server
php artisan serve
```

--------------------------------

### Include NapTab CSS Assets in Layout

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Includes the necessary NapTab CSS files in your main application layout file (`app.blade.php`) using Vite for asset management.

```blade
{{-- In resources/views/layouts/app.blade.php --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="{{ asset('vendor/naptab/naptab.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/naptab/naptab-safelist.css') }}" rel="stylesheet">
```

--------------------------------

### Apply Pills Tab Style

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Applies the 'Pills' preset style, creating modern pill-shaped tabs with full borders, rounded corners, and no container underline.

```php
->style(TabStyle::Pills)
// Modern pill-shaped tabs with full borders, rounded corners, and no container underline
```

--------------------------------

### NapTab: Load Tab Content via Blade View

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Illustrates loading tab content by rendering a Blade view. This is useful for organizing static content into separate view files.

```php
Tab::make('contact')
    ->icon('envelope')
    ->content(fn() => view('pages.contact'))
```

--------------------------------

### PHP: Set NapTab Layout Direction to Aside

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates how to override the default direction in a Livewire component to use the 'Aside' layout, suitable for sidebar navigation.

```php
<?php

namespace App\Livewire;

use Hdaklue\NapTab\Livewire\NapTab;
use Hdaklue\NapTab\Enums\Direction;
use Hdaklue\NapTab\UI\Tab;

class ResponsiveSettings extends NapTab
{
    // Override the direction method to control layout
    protected function direction(): Direction
    {
        return Direction::Aside; // Sidebar layout for dashboard-style interfaces
        // return Direction::Horizontal; // Traditional top tabs (default)
    }
    
    protected function tabs(): array
    {
        return [
            Tab::make('profile')
                ->icon('user-circle'),
            Tab::make('privacy')
                ->label('Privacy')
                ->icon('shield-check'),
            Tab::make('billing')
                ->label('Billing')
                ->icon('credit-card')
                ->badge(fn() => $this->hasPendingInvoices() ? 'Action Required' : null),
        ];
    }
}

```

--------------------------------

### Add Custom Colors to NapTab Safelist

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Customize NapTab's appearance by adding custom color classes to the `naptab-safelist.css` file, ensuring Tailwind CSS includes them.

```CSS
/* public/vendor/naptab/naptab-safelist.css */
@source inline("{hover:,focus:,dark:}bg-purple-{50,500,900/20}");
@source inline("{hover:,focus:,dark:}text-purple-{200,600,700}");
```

--------------------------------

### Control Routing Flexibility for Tab Components

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Demonstrates how to selectively enable or disable URL routing for different NapTab components. `DashboardTabs` are configured to be routable, while `UserSettingsTabs` are not.

```php
// Dashboard with routing (bookmarkable tabs)
class DashboardTabs extends NapTab
{
    protected function isRoutable(): bool
    {
        return true;
    }
}

// Modal or sidebar tabs without routing
class UserSettingsTabs extends NapTab
{
    protected function isRoutable(): bool
    {
        return false; // No URL changes for these tabs
    }
}
```

--------------------------------

### Include NapTab Assets and Usage in Blade

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This snippet demonstrates how to include NapTab's CSS assets in your Blade layout and how to use the `livewire:dashboard-tabs` component, both in a simple manner and with custom styling applied to the container.

```Blade
{{-- Include CSS assets in your layout --}}
<link href="{{ asset('vendor/naptab/naptab.css') }}" rel="stylesheet">
<link href="{{ asset('vendor/naptab/naptab-safelist.css') }}" rel="stylesheet">

{{-- Simple usage --}}
<livewire:dashboard-tabs />

{{-- With custom styling --}}
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6">
    <livewire:dashboard-tabs />
</div>
```

--------------------------------

### PHP Direct Tab Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP snippet shows how to define tab content directly using HTML strings. It's suitable for static content that doesn't require complex data fetching or dynamic rendering.

```php
Tab::make('terms')
    ->label('Terms of Service')
    ->content('<div class="prose max-w-none">
        <h1>Terms of Service</h1>
        <p>By using our service...</p>
    </div>')
```

--------------------------------

### PHP Dynamic Tab Badges and Visibility

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP snippet shows how to dynamically set a badge count and control tab visibility based on conditions. It's useful for displaying notifications or user-specific content.

```php
Tab::make('inbox')
    ->label('Messages')
    ->badge(fn() => auth()->user()->unreadMessages()->count())
    ->visible(fn() => auth()->check())
    
Tab::make('notifications')
    ->label('Notifications')
    ->badge(function() {
        $count = auth()->user()->unreadNotifications()->count();
        return $count > 99 ? '99+' : (string) $count;
    })
    ->beforeLoad(fn(Tab $tab) => $this->markNotificationsAsRead())
```

--------------------------------

### PHP Container-Level Hook: Closure for Conditional Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Shows how to use a Closure for the `beforeContent` hook to render dynamic HTML based on application state, such as user notifications. The Closure returns an HTML string or an empty string if conditions are not met.

```php
public function beforeContent(): Closure
{
    return function() {
        if (auth()->user()->hasUnreadNotifications()) {
            return '<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                You have ' . auth()->user()->unreadNotifications()->count() . ' unread notifications.
            </div>';
        }
        
        return '';
    };
}
```

--------------------------------

### PHP Controller Method for Tab Content

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This PHP code demonstrates how to fetch data (e.g., reports) within a controller method to be displayed in a tab. It utilizes Eloquent for database queries and pagination, returning the data to a Blade view.

```php
public function reports()
{
    // Database queries only execute when user clicks this tab
    $reports = Report::with('author')
        ->where('status', 'published')
        ->latest()
        ->paginate(20);
        
    return view('tabs.reports', compact('reports'));
}
```

--------------------------------

### Enable Routing for a Tab Component

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Enables URL routing for a specific tab component by overriding the `isRoutable` method and returning `true`. This makes tabs bookmarkable and SEO-friendly.

```php
// In your tab component class
class DashboardTabs extends NapTab
{
    protected function isRoutable(): bool
    {
        return true; // Enable routing for this component
    }
    
    // Or disable routing for specific components
    protected function isRoutable(): bool
    {
        return false; // This component won't use URL routing
    }
}
```

--------------------------------

### NapTab with Container-Level Hook

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This Blade snippet illustrates using a container-level hook in NapTab. The 'Container Hook Content' will be rendered around the entire tab container, providing a way to add global elements or information.

```Blade
<x-naptab::tabs>
    <x-naptab::hook type="container">
        Container Hook Content
    </x-naptab::hook>
    <x-naptab::tab name="Tab A">
        Content for Tab A
    </x-naptab::tab>
    <x-naptab::tab name="Tab B">
        Content for Tab B
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### PHP Container-Level Hook: Htmlable Object

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Illustrates using an `Htmlable` object for the `afterContent` hook to return custom HTML content. This method leverages Laravel's `HtmlString` class for safe HTML rendering.

```php
public function afterContent(): \Illuminate\Support\HtmlString
{
    return new \Illuminate\Support\HtmlString('<div>Custom HTML content</div>');
}
```

--------------------------------

### PHP: NapTab Tab API Access Control

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Shows how to control the visibility of NapTab tabs based on user roles or permissions using a closure that returns a boolean.

```php
Tab::make('admin')
    ->label('Admin Panel')
    ->visible(fn() => auth()->user()->isAdmin())           // Control visibility (bool|Closure)

```

--------------------------------

### Add Route Parameter for Dashboard Tabs

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Defines a route for the dashboard that accepts an optional `activeTab` parameter. This parameter is used by NapTab to manage the active tab via the URL.

```php
// routes/web.php
Route::get('/dashboard/{activeTab?}', DashboardTabs::class)->name('dashboard');
```

--------------------------------

### NapTab with Aside Layout

Source: https://github.com/hdaklue/naptap/blob/main/README.md

This Blade code configures NapTab to use an 'aside' layout, typically used for sidebar navigation. This is useful for dashboard-style interfaces where tabs are presented vertically.

```Blade
<x-naptab::tabs layout="aside">
    <x-naptab::tab name="Dashboard">
        Dashboard Content
    </x-naptab::tab>
    <x-naptab::tab name="Settings">
        Settings Content
    </x-naptab::tab>
</x-naptab::tabs>
```

--------------------------------

### Enable Modal Navigation on Mobile

Source: https://github.com/hdaklue/naptap/blob/main/README.md

Configures NapTab to use modal navigation on mobile devices. This displays the active tab button with a hamburger icon and a bottom sheet modal for all tabs.

```php
->navModalOnMobile(true)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.