{{-- Mobile Toggle Tab (แถบแนวตั้งติดขอบซ้าย) --}}
<div class="sidemenu-toggle-tab d-md-none" data-bs-toggle="offcanvas" data-bs-target="#sideMenuOffcanvas" aria-controls="sideMenuOffcanvas">
    
    <span>เมนู</span>
</div>

{{-- Desktop Sidemenu - Hidden on Mobile --}}
<div class="col-md-3 col-lg-2 bg-secondary text-white min-vh-100 p-4 d-none d-md-block sidemenu-desktop">
    <h5 class="fw-bold mb-4">{{ __('frontend::lang.member.sidemenu.title') }}</h5>
    <ul class="nav flex-column">
        @php
            $sidemenu = ['profile', 'souvenirs', 'tour', 'accommodation', 'place'];
            $sidemenuIcons = [
                'profile' => 'fa-user-circle',
                'souvenirs' => 'fa-gift',
                'tour' => 'fa-route',
                'accommodation' => 'fa-bed',
                'place' => 'fa-map-marker-alt'
            ];
        @endphp
        @foreach ($sidemenu as $s)
            <li class="nav-item mb-2">
                <a class="nav-link text-white px-0" href="{{ route('frontend.member', ['slug' => $s]) }}">
                    <i class="fas {{ $sidemenuIcons[$s] ?? 'fa-circle' }} me-2"></i>
                    {{ __('frontend::lang.member.sidemenu.' . $s) }}
                </a>
            </li>
        @endforeach
    </ul>
</div>

{{-- Mobile Offcanvas Sidemenu --}}
<div class="offcanvas offcanvas-start d-md-none sidemenu-offcanvas" tabindex="-1" id="sideMenuOffcanvas" aria-labelledby="sideMenuOffcanvasLabel">
    <div class="offcanvas-header sidemenu-offcanvas-header">
        <h5 class="offcanvas-title fw-bold" id="sideMenuOffcanvasLabel">
            <i class="fas fa-th-large me-2"></i>
            {{ __('frontend::lang.member.sidemenu.title') }}
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body sidemenu-offcanvas-body p-0">
        <ul class="nav flex-column sidemenu-nav">
            @php
                $sidemenu = ['profile', 'souvenirs', 'tour', 'accommodation', 'place'];
                $sidemenuIcons = [
                    'profile' => 'fa-user-circle',
                    'souvenirs' => 'fa-gift',
                    'tour' => 'fa-route',
                    'accommodation' => 'fa-bed',
                    'place' => 'fa-map-marker-alt'
                ];
            @endphp
            @foreach ($sidemenu as $s)
                <li class="nav-item">
                    <a class="nav-link sidemenu-nav-link" href="{{ route('frontend.member', ['slug' => $s]) }}">
                        <i class="fas {{ $sidemenuIcons[$s] ?? 'fa-circle' }} sidemenu-icon"></i>
                        <span>{{ __('frontend::lang.member.sidemenu.' . $s) }}</span>
                        <i class="fas fa-chevron-right sidemenu-arrow"></i>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</div>

<style>
    /* Mobile Toggle Tab - แถบแนวตั้งติดขอบซ้าย */
    
    .sidemenu-toggle-tab {
    position: fixed;
    left: -82%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1040;
    background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
    color: #fff;
    /* writing-mode: vertical-rl; */
    /* text-orientation: mixed; */
    padding: 15px 20px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: right;
    /* align-items: center; */
    gap: 0px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0px;
}
    
    .sidemenu-toggle-tab i {
        writing-mode: horizontal-tb;
        font-size: 16px;
    }
    
    .sidemenu-toggle-tab:hover,
    .sidemenu-toggle-tab:active {
        padding-right: 12px;
        background: linear-gradient(180deg, #34495e 0%, #2c3e50 100%);
    }
    
    /* Offcanvas Styles */
    .sidemenu-offcanvas {
        width: 300px !important;
        background: linear-gradient(180deg, #2c3e50 0%, #1a252f 100%);
        border-right: none;
    }
    
    .sidemenu-offcanvas-header {
        background: rgba(0,0,0,0.2);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 18px 20px;
        color: #fff;
    }
    
    .sidemenu-offcanvas-header .offcanvas-title {
        font-size: 18px;
    }
    
    .sidemenu-offcanvas-body {
        padding: 0;
    }
    
    /* Navigation Links */
    .sidemenu-nav {
        margin: 0;
        padding: 0;
    }
    
    .sidemenu-nav .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    
    .sidemenu-nav-link {
        display: flex;
        align-items: center;
        padding: 16px 20px !important;
        color: #fff !important;
        text-decoration: none;
        transition: all 0.25s ease;
        font-size: 15px;
    }
    
    .sidemenu-nav-link:hover,
    .sidemenu-nav-link:focus {
        background: rgba(255,255,255,0.1);
        padding-left: 25px !important;
        color: #fff !important;
    }
    
    .sidemenu-icon {
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        border-radius: 8px;
        margin-right: 15px;
        font-size: 16px;
        transition: all 0.25s ease;
    }
    
    .sidemenu-nav-link:hover .sidemenu-icon {
        background: rgba(255,255,255,0.2);
        transform: scale(1.05);
    }
    
    .sidemenu-arrow {
        margin-left: auto;
        font-size: 12px;
        opacity: 0.5;
        transition: all 0.25s ease;
    }
    
    .sidemenu-nav-link:hover .sidemenu-arrow {
        opacity: 1;
        transform: translateX(3px);
    }
    
    /* Active State */
    .sidemenu-nav-link.active {
        background: rgba(255,255,255,0.15);
    }
    
    .sidemenu-nav-link.active .sidemenu-icon {
        background: #3498db;
    }
</style>