77 lines
3.9 KiB
PHP
77 lines
3.9 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
$currentView = (string) ($currentView ?? 'preview');
|
|
$homeUrl = (string) ($homeUrl ?? '?view=preview');
|
|
$tableUrl = (string) ($tableUrl ?? '?view=table');
|
|
$exportUrl = (string) ($exportUrl ?? '?view=export');
|
|
$appName = (string) ($appName ?? 'Spreadsheet Importer');
|
|
|
|
$previewActive = $currentView === 'preview';
|
|
$tableActive = $currentView === 'table';
|
|
$exportActive = $currentView === 'export';
|
|
?>
|
|
<nav class="app-navbar sticky top-0 z-30 border-b border-white/60 shadow-[0_10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl" aria-label="Primary">
|
|
<div class="mx-auto flex max-w-7xl flex-col gap-4 px-4 py-4 lg:flex-row lg:items-center lg:justify-between lg:px-8">
|
|
<a href="<?= h($homeUrl) ?>" class="inline-flex items-center gap-3 self-start">
|
|
<span class="flex h-10 w-10 items-center justify-center rounded-md bg-sky-600 text-sm font-semibold text-white shadow-lg shadow-sky-500/25">W</span>
|
|
<div>
|
|
<div class="text-sm font-semibold uppercase tracking-[0.24em] text-slate-400">Warner</div>
|
|
<div class="text-lg font-semibold text-slate-900"><?= h($appName) ?></div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<ul class="flex flex-wrap gap-2">
|
|
<li>
|
|
<a
|
|
class="inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold transition
|
|
<?= $previewActive ? 'bg-slate-900 text-white shadow-lg shadow-slate-900/20' : 'bg-white/90 text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50' ?>"
|
|
href="<?= h($homeUrl) ?>"
|
|
<?= $previewActive ? 'aria-current="page"' : '' ?>
|
|
>
|
|
Preview
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold transition
|
|
<?= $tableActive ? 'bg-sky-600 text-white shadow-lg shadow-sky-500/20' : 'bg-white/90 text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50' ?>"
|
|
href="<?= h($tableUrl) ?>"
|
|
<?= $tableActive ? 'aria-current="page"' : '' ?>
|
|
>
|
|
Full table
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
class="inline-flex items-center rounded-md px-4 py-2 text-sm font-semibold transition
|
|
<?= $exportActive ? 'bg-sky-600 text-white shadow-lg shadow-sky-500/20' : 'bg-white/90 text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50' ?>"
|
|
href="<?= h($exportUrl) ?>"
|
|
<?= $exportActive ? 'aria-current="page"' : '' ?>
|
|
>
|
|
Export
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<?php if ($tableActive): ?>
|
|
<button
|
|
type="button"
|
|
id="blurToggleButton"
|
|
class="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white/90 px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50"
|
|
aria-pressed="false"
|
|
title="Blur table data for privacy"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"></path>
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
</svg>
|
|
<span data-blur-label>Blur data</span>
|
|
</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</nav>
|