浪子
04a2034975
- storefront 全站改为极简黑白配色:直角、细线分隔、卡片 hover 浅底、深色模式(跟随系统+手动切换) - 抽出 storefront/partials/card 复用卡片 - 一并提交此前暂存的客户端注册 API、站点设置、后台页面与测试 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
311 lines
23 KiB
PHP
311 lines
23 KiB
PHP
@php
|
|
$layoutMode = $layoutMode ?? 'app';
|
|
$pageTitle = $pageTitle ?? 'Tstore Admin';
|
|
$pageSubtitle = $pageSubtitle ?? '统一管理扩展、版本与站点接入。';
|
|
$pageBadge = $pageBadge ?? ($layoutMode === 'guest' ? 'Tstore Service' : '管理后台');
|
|
$routeType = (string) (request()->route('type') ?: request()->query('type', ''));
|
|
$siteHost = parse_url(url('/'), PHP_URL_HOST) ?: 'local';
|
|
@endphp
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ $title ?? 'Tstore Admin' }}</title>
|
|
<style>
|
|
:root{--bg:#edf4f7;--bg-deep:#102637;--bg-mid:#174c66;--panel:#ffffff;--panel-soft:#f7fbfc;--line:#d6e3ea;--ink:#132736;--ink-soft:#607484;--accent:#1c7d85;--accent-deep:#0f5060;--accent-soft:#e6f4f5;--warm:#c49152;--ok:#1c8a56;--warn:#b87218;--danger:#c05050;--shadow-lg:0 28px 58px rgba(10,26,38,.12);--shadow-md:0 16px 34px rgba(13,29,40,.08)}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(196,145,82,.14),transparent 24%),radial-gradient(circle at bottom right,rgba(28,125,133,.12),transparent 28%),linear-gradient(180deg,#f7fafb 0,#edf4f7 100%);color:var(--ink);font:14px/1.65 "Segoe UI Variable","PingFang SC","Microsoft YaHei UI",sans-serif}
|
|
a{color:inherit;text-decoration:none}
|
|
button,input,select,textarea{font:inherit}
|
|
code{padding:2px 6px;border-radius:8px;background:#edf4f6;color:var(--accent-deep)}
|
|
.page{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}
|
|
.sidebar{position:sticky;top:0;height:100vh;overflow:hidden;padding:24px 18px 22px;background:linear-gradient(180deg,#102536 0,#143b52 48%,#1c6f79 100%);color:#fff}
|
|
.sidebar:before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(180deg,rgba(0,0,0,.38),transparent 82%)}
|
|
.sidebar > *{position:relative;z-index:1}
|
|
.sidebar-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
|
|
.brand{display:flex;align-items:center;gap:14px;min-width:0}
|
|
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);font-size:18px;font-weight:900;letter-spacing:.08em}
|
|
.brand-copy strong{display:block;font-size:21px;line-height:1.1}
|
|
.brand-copy span{display:block;margin-top:5px;color:rgba(232,240,244,.7);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
|
|
.sidebar-toggle{display:none;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer}
|
|
.sidebar-body{display:block}
|
|
.sidebar-group{margin-top:28px}
|
|
.sidebar-label{display:block;margin-bottom:12px;color:rgba(228,238,243,.66);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
|
|
.nav{display:grid;gap:8px}
|
|
.nav a{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:16px;color:rgba(240,246,249,.88);font-weight:800;border:1px solid transparent;background:rgba(255,255,255,.03);transition:background .18s ease,border-color .18s ease,transform .18s ease}
|
|
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12);transform:translateX(2px)}
|
|
.sidebar-meta{display:grid;gap:10px;margin-top:28px}
|
|
.meta-card{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10)}
|
|
.meta-label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,240,244,.68)}
|
|
.meta-value{display:block;margin-top:6px;font-size:16px;font-weight:900;line-height:1.35;word-break:break-word}
|
|
.content-shell{min-width:0}
|
|
.content-inner{width:min(1600px,100%);margin:0 auto;padding:30px 32px 42px}
|
|
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:22px}
|
|
.page-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-deep);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
|
|
.headline-block h1{margin:14px 0 0;font-size:38px;line-height:1.02;letter-spacing:-.05em}
|
|
.headline-block p{margin:10px 0 0;color:var(--ink-soft);max-width:760px}
|
|
.top-actions{display:flex;gap:10px;flex-wrap:wrap}
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;border:1px solid transparent;background:linear-gradient(135deg,var(--accent-deep),var(--accent));color:#fff;font-weight:900;cursor:pointer;box-shadow:0 14px 28px rgba(11,79,91,.18)}
|
|
.btn.secondary{background:#fff;color:var(--accent-deep);border-color:#d1e4e7;box-shadow:none}
|
|
.btn.ghost{background:rgba(255,255,255,.76);color:var(--ink);border-color:var(--line);box-shadow:none}
|
|
.btn.danger{background:#fff1f1;color:var(--danger);border-color:#f0cccc;box-shadow:none}
|
|
.btn.small{min-height:38px;padding:0 12px;border-radius:12px;font-size:12px}
|
|
.inline-form{display:inline}
|
|
.flash-stack{display:grid;gap:12px;margin-bottom:18px}
|
|
.flash{padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fff;font-weight:800;box-shadow:var(--shadow-md)}
|
|
.flash.success{background:#edf9f1;border-color:#d2eadb;color:var(--ok)}
|
|
.flash.error{background:#fff4f3;border-color:#f1d5d2;color:var(--danger)}
|
|
.grid{display:grid;gap:20px}
|
|
.stack{display:grid;gap:20px}
|
|
.split{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:20px}
|
|
.panel{padding:22px;border-radius:28px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,252,.98));box-shadow:var(--shadow-lg)}
|
|
.panel.soft{background:linear-gradient(180deg,#fbfdfe 0,#f3f8fa 100%)}
|
|
.section-title{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:18px}
|
|
.section-title h2{margin:0;font-size:24px;line-height:1.1;letter-spacing:-.03em}
|
|
.section-title p{margin:8px 0 0;color:var(--ink-soft)}
|
|
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
|
|
.stat{position:relative;overflow:hidden;padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#fff 0,#f7fbfc 100%);box-shadow:var(--shadow-md)}
|
|
.stat:after{content:'';position:absolute;right:-28px;top:-24px;width:96px;height:96px;border-radius:28px;background:linear-gradient(135deg,rgba(28,125,133,.12),rgba(28,125,133,0))}
|
|
.stat .label{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
|
|
.stat .value{display:block;margin-top:10px;font-size:30px;line-height:1.05;font-weight:900}
|
|
.stat .hint{display:block;margin-top:8px;color:var(--ink-soft);font-size:13px}
|
|
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:22px;background:#fff}
|
|
.table{width:100%;border-collapse:separate;border-spacing:0}
|
|
.table th,.table td{padding:15px 16px;border-bottom:1px solid #ebf1f4;text-align:left;vertical-align:top}
|
|
.table th{background:#f7fafb;color:var(--ink-soft);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
|
|
.table tr:last-child td{border-bottom:none}
|
|
.table tr:hover td{background:#fbfdfe}
|
|
.list{display:grid;gap:14px}
|
|
.row-card{padding:18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#fff 0,#f8fbfc 100%);box-shadow:var(--shadow-md)}
|
|
.row-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
|
|
.row-top h3{margin:0;font-size:18px;line-height:1.18}
|
|
.row-top p{margin:6px 0 0}
|
|
.muted{color:var(--ink-soft)}
|
|
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
|
|
.chip{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;border:1px solid #d7e7eb;background:#eef6f7;color:#215b68;font-size:12px;font-weight:900}
|
|
.chip.ok{background:#edf9f1;border-color:#d2eadb;color:var(--ok)}
|
|
.chip.warn{background:#fff7ea;border-color:#eed8b7;color:var(--warn)}
|
|
.chip.muted{background:#f3f6f8;border-color:#e1e8ec;color:#667b8b}
|
|
.toolbar{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;flex-wrap:wrap}
|
|
.filters{display:flex;gap:12px;flex-wrap:wrap;flex:1 1 auto}
|
|
.field{display:grid;gap:7px}
|
|
.field label{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
|
|
.input,.select,textarea{width:100%;min-width:0;padding:12px 14px;border-radius:16px;border:1px solid #cfdee5;background:#fbfcfd;color:var(--ink);outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
|
|
.input:focus,.select:focus,textarea:focus{background:#fff;border-color:#72acb6;box-shadow:0 0 0 4px rgba(28,125,133,.12)}
|
|
textarea{min-height:110px;resize:vertical}
|
|
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
|
|
.form-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
|
|
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
|
|
.checkbox-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
|
|
.checkbox-row label{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
|
|
.empty{padding:36px 18px;border-radius:22px;border:1px dashed #c8d7dd;background:#fbfdfe;color:var(--ink-soft);text-align:center}
|
|
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
|
|
.kv-card{padding:16px;border-radius:18px;border:1px solid var(--line);background:#fbfdfe}
|
|
.kv-label{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
|
|
.kv-value{display:block;margin-top:6px;font-size:15px;font-weight:800;line-height:1.45;word-break:break-word}
|
|
.entity-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
|
|
.entity-icon{display:grid;place-items:center;width:74px;height:74px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,#eef6f7,#dce9ec);color:var(--accent-deep);font-size:24px;font-weight:900;overflow:hidden}
|
|
.entity-icon img{width:100%;height:100%;object-fit:cover}
|
|
.entity-copy h2{margin:0;font-size:24px;line-height:1.08}
|
|
.entity-copy p{margin:10px 0 0;color:var(--ink-soft)}
|
|
.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
|
|
.preview-card{padding:10px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-md)}
|
|
.preview-shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
|
|
.preview-shot img{width:100%;height:124px;object-fit:cover}
|
|
.preview-shot figcaption{padding:10px 12px;color:var(--ink-soft);font-size:13px}
|
|
.preview-tools{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
|
|
nav[role="navigation"]{margin-top:20px}
|
|
nav[role="navigation"] > div:first-child{display:none}
|
|
nav[role="navigation"] > div:last-child{display:flex;justify-content:center}
|
|
nav[role="navigation"] a,nav[role="navigation"] span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;margin:0 4px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 10px 20px rgba(16,35,49,.06)}
|
|
nav[role="navigation"] span[aria-current="page"]{background:linear-gradient(135deg,var(--accent-deep),var(--accent));border-color:transparent;color:#fff}
|
|
nav[role="navigation"] svg{display:none}
|
|
.guest-mode{background:radial-gradient(circle at top left,rgba(196,145,82,.18),transparent 26%),radial-gradient(circle at bottom right,rgba(28,125,133,.16),transparent 28%),linear-gradient(180deg,#f6f9fa 0,#eef4f6 100%)}
|
|
.guest-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
|
|
.guest-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);width:min(1260px,100%);border-radius:34px;overflow:hidden;border:1px solid #d5e3e8;box-shadow:0 32px 72px rgba(12,26,37,.14);background:#fff}
|
|
.guest-hero{padding:34px;background:linear-gradient(145deg,#102536 0,#16445c 52%,#1c7d85 100%);color:#fff;position:relative;overflow:hidden}
|
|
.guest-hero:after{content:'';position:absolute;right:-70px;bottom:-90px;width:220px;height:220px;border-radius:56px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0));transform:rotate(16deg)}
|
|
.guest-hero > *{position:relative;z-index:1}
|
|
.guest-hero .page-badge{background:rgba(255,255,255,.12);color:#fff}
|
|
.guest-hero h1{margin:18px 0 0;font-size:44px;line-height:1.02;letter-spacing:-.05em}
|
|
.guest-hero p{margin:12px 0 0;color:rgba(230,239,244,.84);max-width:560px}
|
|
.auth-points{display:grid;gap:12px;margin-top:28px}
|
|
.auth-point{padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.10)}
|
|
.auth-point strong{display:block;font-size:16px}
|
|
.auth-point span{display:block;margin-top:6px;color:rgba(230,239,244,.78)}
|
|
.guest-note{margin-top:20px;color:rgba(230,239,244,.78)}
|
|
.guest-panel{padding:34px;background:linear-gradient(180deg,#fff 0,#f7fbfc 100%)}
|
|
.login-sheet{display:grid;gap:18px}
|
|
@media (max-width:1240px){.page,.guest-stage,.split{grid-template-columns:1fr}.sidebar{position:static;height:auto;overflow:visible;padding:18px}.sidebar-toggle{display:inline-flex}.sidebar-body{display:none;width:100%;padding-top:18px}.sidebar.is-open .sidebar-body{display:block}.content-inner{padding:22px}.guest-hero,.guest-panel{padding:26px}}
|
|
@media (max-width:860px){.topbar{flex-direction:column;align-items:flex-start}.form-grid,.form-grid.compact,.kv-grid,.preview-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.filters,.form-actions,.checkbox-row{width:100%}.filters{flex-direction:column}.field{width:100%}}
|
|
@media (max-width:560px){.guest-shell{padding:12px}.guest-hero h1,.headline-block h1{font-size:34px}.stats{grid-template-columns:1fr}.panel,.guest-hero,.guest-panel{padding:20px}.content-inner{padding:16px}.top-actions{width:100%}.top-actions > *{flex:1 1 auto}}
|
|
</style>
|
|
@stack('styles')
|
|
</head>
|
|
<body @class(['guest-mode' => $layoutMode === 'guest'])>
|
|
@if ($layoutMode === 'guest')
|
|
<div class="guest-shell">
|
|
<div class="guest-stage">
|
|
<section class="guest-hero">
|
|
<a class="brand" href="{{ route('storefront.home') }}">
|
|
<span class="brand-mark">TS</span>
|
|
<span class="brand-copy">
|
|
<strong>{{ $storeSettings['site_name'] ?? config('app.name', 'Tstore') }}</strong>
|
|
<span>Service Console</span>
|
|
</span>
|
|
</a>
|
|
<span class="page-badge">{{ $pageBadge }}</span>
|
|
<h1>{{ $pageTitle }}</h1>
|
|
<p>{{ $pageSubtitle }}</p>
|
|
<div class="auth-points">
|
|
<div class="auth-point">
|
|
<strong>公开展示与后台维护拆开</strong>
|
|
<span>前台负责扩展展示，后台负责发布、分类和站点接入。</span>
|
|
</div>
|
|
<div class="auth-point">
|
|
<strong>登录后统一处理服务端数据</strong>
|
|
<span>版本、分类、站点注册状态和后台发布入口都集中在一个控制台里。</span>
|
|
</div>
|
|
<div class="auth-point">
|
|
<strong>默认先进入本地控制台</strong>
|
|
<span>如果你已经初始化管理员账号，可以直接登录继续维护服务端。</span>
|
|
</div>
|
|
</div>
|
|
<div class="guest-note">公开站点：<a href="{{ route('storefront.home') }}">返回首页</a></div>
|
|
</section>
|
|
<main class="guest-panel">
|
|
@if (session('success') || session('error') || $errors->any())
|
|
<div class="flash-stack">
|
|
@if (session('success'))
|
|
<div class="flash success">{{ session('success') }}</div>
|
|
@endif
|
|
@if (session('error'))
|
|
<div class="flash error">{{ session('error') }}</div>
|
|
@endif
|
|
@if ($errors->any())
|
|
<div class="flash error">{{ $errors->first() }}</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</main>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="page">
|
|
<aside class="sidebar" data-sidebar>
|
|
<div class="sidebar-top">
|
|
<a class="brand" href="{{ route('webadmin.home') }}">
|
|
<span class="brand-mark">TS</span>
|
|
<span class="brand-copy">
|
|
<strong>{{ $storeSettings['site_name'] ?? config('app.name', 'Tstore') }}</strong>
|
|
<span>Admin Console</span>
|
|
</span>
|
|
</a>
|
|
<button class="sidebar-toggle" type="button" data-sidebar-toggle aria-expanded="false" aria-controls="admin-sidebar-body">菜单</button>
|
|
</div>
|
|
|
|
<div class="sidebar-body" id="admin-sidebar-body">
|
|
<div class="sidebar-group">
|
|
<span class="sidebar-label">控制台</span>
|
|
<nav class="nav">
|
|
<a href="{{ route('webadmin.home') }}" class="{{ request()->routeIs('webadmin.home') ? 'active' : '' }}">概览</a>
|
|
<a href="{{ route('webadmin.packages') }}" class="{{ request()->routeIs('webadmin.packages*') && $routeType === '' ? 'active' : '' }}">扩展管理</a>
|
|
<a href="{{ route('webadmin.categories') }}" class="{{ request()->routeIs('webadmin.categories*') ? 'active' : '' }}">分类管理</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="sidebar-group">
|
|
<span class="sidebar-label">按类型</span>
|
|
<nav class="nav">
|
|
<a href="{{ route('webadmin.packages', ['type' => 'plugin']) }}" class="{{ request()->routeIs('webadmin.packages*') && $routeType === 'plugin' ? 'active' : '' }}">插件列表</a>
|
|
<a href="{{ route('webadmin.packages', ['type' => 'theme']) }}" class="{{ request()->routeIs('webadmin.packages*') && $routeType === 'theme' ? 'active' : '' }}">主题列表</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="sidebar-meta">
|
|
<div class="meta-card">
|
|
<span class="meta-label">当前用户</span>
|
|
<span class="meta-value">{{ auth()->user()?->email ?: '管理员' }}</span>
|
|
</div>
|
|
<div class="meta-card">
|
|
<span class="meta-label">运行环境</span>
|
|
<span class="meta-value">{{ strtoupper(app()->environment()) }}</span>
|
|
</div>
|
|
<div class="meta-card">
|
|
<span class="meta-label">站点域名</span>
|
|
<span class="meta-value">{{ $siteHost }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="content-shell">
|
|
<div class="content-inner">
|
|
<div class="topbar">
|
|
<div class="headline-block">
|
|
<span class="page-badge">{{ $pageBadge }}</span>
|
|
<h1>{{ $pageTitle }}</h1>
|
|
<p>{{ $pageSubtitle }}</p>
|
|
</div>
|
|
<div class="top-actions">
|
|
<a class="btn secondary" href="{{ route('storefront.home') }}">公开前台</a>
|
|
<a class="btn ghost" href="{{ route('webadmin.account') }}">账户安全</a>
|
|
<a class="btn ghost" href="{{ route('webadmin.settings') }}">站点设置</a>
|
|
<a class="btn ghost" href="{{ route('webadmin.clients') }}">站点接入</a>
|
|
<form class="inline-form" method="post" action="{{ route('webadmin.logout') }}">
|
|
@csrf
|
|
<button class="btn ghost" type="submit">退出登录</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success') || session('error') || $errors->any())
|
|
<div class="flash-stack">
|
|
@if (session('success'))
|
|
<div class="flash success">{{ session('success') }}</div>
|
|
@endif
|
|
@if (session('error'))
|
|
<div class="flash error">{{ session('error') }}</div>
|
|
@endif
|
|
@if ($errors->any())
|
|
<div class="flash error">{{ $errors->first() }}</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@yield('content')
|
|
</div>
|
|
</main>
|
|
</div>
|
|
@endif
|
|
<script>
|
|
(() => {
|
|
const sidebar = document.querySelector('[data-sidebar]');
|
|
const toggle = document.querySelector('[data-sidebar-toggle]');
|
|
|
|
if (!sidebar || !toggle) {
|
|
return;
|
|
}
|
|
|
|
const syncSidebarState = () => {
|
|
if (window.innerWidth > 1240) {
|
|
sidebar.classList.remove('is-open');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
};
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const open = sidebar.classList.toggle('is-open');
|
|
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
|
|
});
|
|
|
|
window.addEventListener('resize', syncSidebarState);
|
|
syncSidebarState();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|