<?php
// header_5.html 悬浮胶囊：圆角悬浮导航条（吸顶跟随）、胶囊形选中项
$h5_nav = isset($nav) && is_array($nav) ? $nav : array();
$h5_active = isset($active) ? (string)$active : 'home';
$h5_logo = trim(site_config('logo', ''));
$h5_name = site_config('company_name', '炎酷CMS');
?>
<style>
.yk-header5{position:sticky;top:12px;z-index:50;padding:0 20px;margin-top:12px}
.yk-h5-bar{max-width:1200px;margin:0 auto;background:var(--yk-nav-bg,#fff);border-radius:14px;box-shadow:0 6px 24px rgba(15,23,42,.10),0 0 0 1px rgba(15,23,42,.05);height:64px;padding:0 12px 0 20px;display:flex;align-items:center;justify-content:space-between}
.yk-h5-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.yk-h5-logo img{max-height:38px;max-width:170px;display:block}
.yk-h5-logo .yk-h5-mark{width:12px;height:12px;border-radius:4px;background:var(--yk-accent,#e63946);transform:rotate(45deg);flex:none}
.yk-h5-logo .yk-h5-name{font-size:19px;font-weight:700;color:#0f172a;letter-spacing:1px}
.yk-h5-right{display:flex;align-items:center;gap:8px}
.yk-header5 .yk-nav{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.yk-header5 .yk-nav a{display:block;padding:9px 18px;border-radius:999px;font-size:14px;color:var(--yk-nav-color,#475569);text-decoration:none;transition:all .2s}
.yk-header5 .yk-nav a:hover{color:var(--yk-nav-active,#0f172a);background:rgba(15,23,42,.06)}
.yk-header5 .yk-nav a.on{color:var(--yk-nav-active,#fff);background:var(--yk-nav-active-bg,#0f172a);font-weight:600}
.yk-header5 .yk-nav-toggle{display:none;background:rgba(15,23,42,.05);border:none;border-radius:10px;width:42px;height:40px;cursor:pointer}
.yk-header5 .yk-nav-toggle span{display:block;width:20px;height:2px;background:#0f172a;margin:4px auto;border-radius:2px}
@media (max-width:1199px){
  .yk-h5-bar{height:58px}
  .yk-header5 .yk-nav a{padding:8px 13px;font-size:13px}
}
@media (max-width:767px){
  .yk-header5{top:8px;margin-top:8px;padding:0 12px}
  .yk-h5-bar{height:52px;padding:0 8px 0 14px;border-radius:12px}
  .yk-h5-logo img{max-height:30px}
  .yk-h5-logo .yk-h5-name{font-size:16px}
  .yk-header5 .yk-nav-toggle{display:block}
  .yk-header5 .yk-nav{display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;background:var(--yk-nav-bg,#fff);flex-direction:column;align-items:stretch;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:8px}
  .yk-header5 .yk-nav.open{display:flex}
  .yk-header5 .yk-nav a{padding:12px 16px;border-radius:8px}
  .yk-header5 .yk-nav a:hover{background:rgba(15,23,42,.05)}
  .yk-header5 .yk-nav a.on{background:var(--yk-nav-active-bg,#0f172a)}
}
</style>
<header class="yk-header5">
  <div class="yk-h5-bar">
    <a class="yk-h5-logo" href="<?php echo e(url_home()); ?>">
      <?php if ($h5_logo !== '') { ?><img src="<?php echo e($h5_logo); ?>" alt="<?php echo e($h5_name); ?>"><?php } else { ?><span class="yk-h5-mark"></span><span class="yk-h5-name"><?php echo e($h5_name); ?></span><?php } ?>
    </a>
    <div class="yk-h5-right">
      <ul class="yk-nav">
        <li><a href="<?php echo e(url_home()); ?>"<?php echo $h5_active === 'home' ? ' class="on"' : ''; ?>>首页</a></li>
        <?php foreach ($h5_nav as $h5_n) { ?>
        <li><a href="<?php echo e(isset($h5_n['url']) ? $h5_n['url'] : url_col(isset($h5_n['id']) ? $h5_n['id'] : 0)); ?>"<?php echo (isset($h5_n['key']) && $h5_n['key'] === $h5_active) ? ' class="on"' : ''; ?>><?php echo e(isset($h5_n['name']) ? $h5_n['name'] : ''); ?></a></li>
        <?php } ?>
      </ul>
      <button type="button" class="yk-nav-toggle" aria-label="菜单"><span></span><span></span><span></span></button>
    </div>
  </div>
</header>
