@php
    // List route agar pengecekan lebih dinamis dan bersih
    $routes = ['userarea', 'history', 'memo', 'referal', 'deposit', 'withdraw', 'rekening', 'myaccount'];
    $active = [];
    foreach ($routes as $r) {
        $active[$r] = request()->routeIs($r) ? 'active' : '';
    }
@endphp

@mobile
<div class="row" style="margin-bottom:0px">
    <div class="col-xs-3" style="padding-right:2px">
        <a class="btn btn-default btn-block {{ $active['userarea'] }}" href="{{ route('userarea') }}"><span class="glyphicon glyphicon-calendar"></span>Statement</a>
    </div>
    <div class="col-xs-3" style="padding-right:1px; padding-left: 1px;">
        <a class="btn btn-default btn-block {{ $active['history'] }}" href="{{ route('history') }}"><span class="glyphicon glyphicon-calendar"></span>History</a>
    </div>
    <div class="col-xs-3" style="padding-right:1px; padding-left: 2px;">
        <a class="btn btn-default btn-block {{ $active['memo'] }}" href="{{ route('memo') }}"><span class="glyphicon glyphicon-edit"></span>Memo<span class="badge badgeTotal" style="margin-left:5px; margin-right:10px; font-size:9px; font-weight:bold">1</span></a>
    </div>
    <div class="col-xs-3" style="padding-left:2px">
        <a class="btn btn-default btn-block {{ $active['referal'] }}" href="{{ route('referal') }}"><span class="glyphicon glyphicon-user"></span>Referal</a>
    </div>
</div>
<div class="row" style="margin-bottom:10px">
    <div class="col-xs-3" style="padding-right:2px">
        <a class="btn btn-default btn-block {{ $active['deposit'] }}" href="{{ route('deposit') }}"><span class="glyphicon glyphicon-import"></span>Deposit</a>
    </div>
    <div class="col-xs-3" style="padding-left:1px; padding-right:1px;">
        <a class="btn btn-default btn-block {{ $active['withdraw'] }}" href="{{ route('withdraw') }}"><span class="glyphicon glyphicon-export"></span>Withdraw</a>
    </div>
    <div class="col-xs-3" style="padding-left:2px; padding-right:1px">
        <a class="btn btn-default btn-block {{ $active['rekening'] }}" href="{{ route('rekening') }}"><span class="glyphicon glyphicon-briefcase"></span>Rekening<span style="position:absolute; font-size: 10px; margin-top: -8px; margin-left:-85px">⭐</span></a>
    </div>
    <div class="col-xs-3" style="padding-left:2px">
        <a class="btn btn-default btn-block {{ $active['myaccount'] }}" href="{{ route('myaccount') }}"><span class="glyphicon glyphicon-user"></span>Password</a>
    </div>
</div>
@endmobile

@desktop
<ul class="nav nav-pills" id="menu_dashboard">
    <li class="{{ $active['userarea'] }}"><a href="{{ route('userarea') }}"><strong><span class="glyphicon glyphicon-calendar"></span>Statement</strong></a></li>
    <li class="{{ $active['history'] }}"><a href="{{ route('history') }}"><strong><span class="glyphicon glyphicon-calendar"></span>History Transaksi</strong></a></li>
    <li class="{{ $active['deposit'] }}"><a href="{{ route('deposit') }}"><strong><span class="glyphicon glyphicon-import"></span>Deposit</strong></a></li>
    <li class="{{ $active['withdraw'] }}"><a href="{{ route('withdraw') }}"><strong><span class="glyphicon glyphicon-export"></span>Withdraw</strong></a></li>
    <li class="{{ $active['rekening'] }}">
        <a href="{{ route('rekening') }}"><strong><span class="glyphicon glyphicon-briefcase"></span>Rekening</strong></a>
        <span style="position:absolute; font-size: 10px; margin-top: -37px; margin-left: 8px">⭐</span>
    </li>
    <li class="{{ $active['memo'] }}"><a href="{{ route('memo') }}"><strong><span class="glyphicon glyphicon-envelope"></span>Memo<span class="badge badgeTotal" style="margin-left:5px">2</span></strong></a></li>
    <li class="{{ $active['referal'] }}"><a href="{{ route('referal') }}"><strong><span class="glyphicon glyphicon-duplicate"></span>Referal</strong></a></li>
    <li class="{{ $active['myaccount'] }}"><a href="{{ route('myaccount') }}"><strong><span class="glyphicon glyphicon-user"></span>Ubah Password</strong></a></li>
</ul>
@enddesktop