xchpc-website/components/navbar.php

<?php
$navItems = [
  ["name" => "首页", "url" => "/"],
  ["name" => "党建工作", "url" => "/dangnJianGongZuo.php"],
  ["name" => "单位概况", "url" => "/danWeiGaiKuang.php"],
  ["name" => "工作动态", "url" => "/gongZuoDongTai.php"],
  ["name" => "文保家园", "url" => "/wenBaoJiaYuan.php"],
  ["name" => "鹭岛文脉", "url" => "/luDaoWenMai.php"],
  ["name" => "政策法规", "url" => "/zhengCeFaGui.php"],
  ["name" => "联系我们", "url" => "/lianXiWoMeng.php"]
];
?>
<!-- 头部 -->
<header>
  <div class="inner">
    <div class="logo">厦门市文化遗产保护中心</div>
    <!-- 导航 -->
    <nav class="main-nav">
      <div class="container">
        <ul class="nav-list">
          <?php foreach ($navItems as $item): ?>
            <li class="nav-item <?php echo strpos($_SERVER['REQUEST_URI'], $item['url']) !== false ? 'active' : ''; ?>">
              <a href="<?php echo $item['url']; ?>"><?php echo $item['name']; ?></a>
            </li>
          <?php endforeach; ?>
        </ul>
      </div>
    </nav>
    <div class="d-flex flex-row align-items-center">
      <button class="mobile-menu-toggle"><i class="fa fa-bars"></i></button>
      <div class="search-bar">
        <button><i class="fa fa-search"></i></button>
        <input type="text" placeholder="搜索...">
      </div>
    </div>
  </div>
</header>

<script>
  function goSearch() {
    var keyword = $('.search-bar input').val();
    if (keyword) {
      window.location.href = '/search.php?keyword=' + keyword;
    }
  }
  $(document).ready(function() {
    $('.search-bar button').click(function() {
      if ($('.search-bar input').hasClass('show')) {
        goSearch();
      } else {
        $('.search-bar input').addClass('show').focus();
      }
    })
    $('.search-bar input').blur(function() {
      $(this).removeClass('show');
    }).keydown(function(e) {
      if (e.keyCode == 13) {
        goSearch();
      }
    });
    $('.mobile-menu-toggle').click(function() {
      $('nav').toggleClass('show');
    });
    $('nav a').click(function() {
      $('nav').removeClass('show');
    });
  });
</script>