Improve mobile dashboard menus and keyword actions

This commit is contained in:
Dwindi Ramadhana
2026-02-21 00:32:33 +07:00
parent 05376bff2b
commit 9be883cbaf
2 changed files with 58 additions and 21 deletions

View File

@@ -105,47 +105,47 @@
<button id="quick-action-btn" class="rounded-full bg-white/10 text-white border border-white/10 px-5 py-2 text-sm font-semibold hover:bg-white/20 transition-colors">
Quick action
</button>
<div id="quick-action-menu" class="hidden absolute right-0 mt-2 w-60 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
<div id="quick-action-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-60 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
<div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Actions</div>
@if ($isAdmin)
<a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.users') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="users" class="w-4 h-4"></i><span>Manage users</span>
</a>
<a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.subscriptions') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="credit-card" class="w-4 h-4"></i><span>Grant subscription</span>
</a>
<a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.catalog') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="package-search" class="w-4 h-4"></i><span>Manage catalog</span>
</a>
<a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.webhooks') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="webhook" class="w-4 h-4"></i><span>Review webhooks</span>
</a>
<a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.audit_logs') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="list-checks" class="w-4 h-4"></i><span>Audit logs</span>
</a>
<a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.settings') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="settings" class="w-4 h-4"></i><span>Update settings</span>
</a>
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
</a>
@else
<a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.keywords') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="hash" class="w-4 h-4"></i><span>My keywords</span>
</a>
<a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.keywords') }}#add" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="plus-circle" class="w-4 h-4"></i><span>Add keyword</span>
</a>
<a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.api-keys') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="key-round" class="w-4 h-4"></i><span>Manage API keys</span>
</a>
<a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.billing') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="badge-dollar-sign" class="w-4 h-4"></i><span>Billing overview</span>
</a>
<a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.preferences') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="settings-2" class="w-4 h-4"></i><span>Preferences</span>
</a>
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="user-round" class="w-4 h-4"></i><span>Edit profile</span>
</a>
@endif
@@ -156,15 +156,15 @@
<button id="export-btn" class="rounded-full border border-white/10 px-5 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">
Export
</button>
<div id="export-menu" class="hidden absolute right-0 mt-2 w-56 rounded-2xl border border-slate-200 bg-white p-2 shadow-xl dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
<div id="export-menu" class="hidden absolute left-0 sm:left-auto sm:right-0 mt-2 w-56 max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white p-2 shadow-xl z-50 dark:border-white/10 dark:bg-[#0b0b0f]/95 dark:backdrop-blur">
<div class="text-[11px] uppercase tracking-[0.3em] text-slate-500 px-3 py-2 dark:text-gray-500">Export CSV</div>
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'users'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="users" class="w-4 h-4"></i><span>Users</span>
</a>
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'subscriptions'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="credit-card" class="w-4 h-4"></i><span>Subscriptions</span>
</a>
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 px-3 py-2 rounded-xl text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<a href="{{ route('dashboard.admin.export', array_merge(['type' => 'webhooks'], $exportQuery)) }}" class="flex items-center gap-3 rounded-xl px-4 py-3 min-h-11 text-base sm:text-sm text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10">
<i data-lucide="webhook" class="w-4 h-4"></i><span>Webhooks</span>
</a>
</div>