<?php
// header_2.html 居中大气：LOGO 居上、导航居中居下，上下细分割线
$h2_nav = isset($nav) && is_array($nav) ? $nav : array();
$h2_active = isset($active) ? (string)$active : 'home';
$h2_logo = trim(site_config('logo', ''));
$h2_name = site_config('company_name', '炎酷CMS');
$h2_slogan = site_config('slogan', '');
?>
<style>
.yk-header2{background:#fff;position:relative;z-index:50}
.yk-h2-brand{text-align:center;padding:30px 20px 22px;border-bottom:1px solid #e5e2dc}
.yk-h2-logo{display:inline-block;text-decoration:none}
.yk-h2-logo img{max-height:64px;max-width:260px;display:block;margin:0 auto}
.yk-h2-logo .yk-h2-name{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:700;color:#222;letter-spacing:6px}
.yk-h2-slogan{margin-top:8px;font-size:12px;color:#999;letter-spacing:4px}
.yk-h2-navbar{background:var(--yk-nav-bg,#fff);border-bottom:3px double #d8d4cc;position:relative}
.yk-h2-navin{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:center;align-items:center;position:relative}
.yk-header2 .yk-nav{display:flex;list-style:none;margin:0;padding:0}
.yk-header2 .yk-nav a{display:block;padding:16px 26px;font-size:15px;color:var(--yk-nav-color,#444);text-decoration:none;letter-spacing:2px;position:relative;transition:color .2s}
.yk-header2 .yk-nav a::after{content:'';position:absolute;left:50%;bottom:8px;width:0;height:1px;background:#b08d57;transition:width .25s,left .25s}
.yk-header2 .yk-nav a:hover{color:var(--yk-nav-active,#b08d57)}
.yk-header2 .yk-nav a:hover::after{left:26px;right:26px;width:auto}
.yk-header2 .yk-nav a.on{color:var(--yk-nav-active,#b08d57);font-weight:700}
.yk-header2 .yk-nav a.on::after{left:26px;right:26px;width:auto}
.yk-header2 .yk-nav-toggle{display:none;position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:1px solid #ccc;border-radius:3px;width:38px;height:34px;cursor:pointer}
.yk-header2 .yk-nav-toggle span{display:block;width:18px;height:2px;background:var(--yk-nav-color,#444);margin:4px auto}
@media (max-width:1199px){
  .yk-h2-brand{padding:22px 20px 16px}
  .yk-h2-logo .yk-h2-name{font-size:25px;letter-spacing:4px}
  .yk-header2 .yk-nav a{padding:14px 16px;font-size:14px}
}
@media (max-width:767px){
  .yk-h2-brand{padding:16px 14px 12px}
  .yk-h2-logo img{max-height:44px}
  .yk-h2-logo .yk-h2-name{font-size:20px;letter-spacing:2px}
  .yk-h2-slogan{font-size:11px;letter-spacing:2px}
  .yk-h2-navin{justify-content:flex-start;min-height:46px}
  .yk-header2 .yk-nav-toggle{display:block}
  .yk-header2 .yk-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--yk-nav-bg,#fff);flex-direction:column;border-top:1px solid #eee;box-shadow:0 6px 12px rgba(0,0,0,.08)}
  .yk-header2 .yk-nav.open{display:flex}
  .yk-header2 .yk-nav a{padding:13px 20px;border-bottom:1px solid #f3f1ec;letter-spacing:1px}
  .yk-header2 .yk-nav a::after{display:none}
  .yk-header2 .yk-nav a.on{border-left:3px solid #b08d57}
}
</style>
<header class="yk-header2">
  <div class="yk-h2-brand">
    <a class="yk-h2-logo" href="<?php echo e(url_home()); ?>">
      <?php if ($h2_logo !== '') { ?><img src="<?php echo e($h2_logo); ?>" alt="<?php echo e($h2_name); ?>"><?php } else { ?><span class="yk-h2-name"><?php echo e($h2_name); ?></span><?php } ?>
    </a>
    <?php if ($h2_slogan !== '') { ?><div class="yk-h2-slogan"><?php echo e($h2_slogan); ?></div><?php } ?>
  </div>
  <div class="yk-h2-navbar">
    <div class="yk-h2-navin">
      <ul class="yk-nav">
        <li><a href="<?php echo e(url_home()); ?>"<?php echo $h2_active === 'home' ? ' class="on"' : ''; ?>>首页</a></li>
        <?php foreach ($h2_nav as $h2_n) { ?>
        <li><a href="<?php echo e(isset($h2_n['url']) ? $h2_n['url'] : url_col(isset($h2_n['id']) ? $h2_n['id'] : 0)); ?>"<?php echo (isset($h2_n['key']) && $h2_n['key'] === $h2_active) ? ' class="on"' : ''; ?>><?php echo e(isset($h2_n['name']) ? $h2_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>
