
  <style>
    .ui.fixed.menu{
      height:64px;
      background:linear-gradient(170deg,rgba(250,195,83,1) 0%,rgba(249,169,67,1) 100%);
      box-shadow:0px 0px 40px 0px rgba(0,0,0,0.05);
      display:flex;
      justify-content: center
    }
    .content-wrap-1200 {
      width: 100% !important;
      max-width: 1200px !important;
    }
    .flex {
      display:flex;
    }
    .align-item-center {
      align-items: center;
    }
    .ui.message>:last-child{
      display: flex;
      justify-content: space-between;
      width: 100%!important;
    }
    .ui.menu>.content-wrap-1200, .ui.menu>.grid{
      width:100%;
      padding: 0 24px;
    }
    .ui.menu .item:before{
      width:0px;
    }
    .contentList__logo{
      width: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .contentList__nav{
      margin-left: 10%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
    .nav__index{
      position: relative;
    }
    .contentList__nav a{
      height: 100%;
      font-size:20px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      padding-right: 0!important;
      padding-left: 0!important;
      margin-left: 20px;
      margin-right: 20px;
      color: #fff;
      font-size: 16px;
      border-bottom: 4px solid transparent;
      /* transition: 2s; */
      /* transform: 1s; */
    }
    .contentList__nav a:hover{
      border-bottom: 4px solid #333;
    }
    .ui.inverted.menu .dropdown.item:hover, .ui.inverted.menu .link.item:hover, .ui.inverted.menu a.item:hover, .ui.link.inverted.menu .item:hover{
      background: none;
      color: #333;
    }
    .ui.inverted.menu .active.item{
      background: none!important;
      color: #333!important;
      border-bottom: 4px solid #333;
    }
    .ui.inverted.menu .active.item:hover{
      color: #333!important;
    }
    .logo{
      object-fit: contain;
      filter: brightness(0) invert(1);
      margin-right: 5px !important;
    }
    .register{
      padding-right: 0!important;
    }
  </style>
  <div class="ui fixed inverted menu black">
    <div class="ui content-wrap-1200 contentList flex align-item-center">
      <div class="contentList__logo">
        <a href="/docs.php" class="header item" style="color:#fff;font-weight:500">
          <img class="logo" alt="pro" src="<?php echo \PhalApi\DI()->config->get('app.project.ico'); ?>">
          <?php echo $projectName; ?>
        </a>
      </div>
      <div class="contentList__nav">
        <!-- <div class="contentList__nav__index">
          <a href="/" class="item" class="nav__index"><?php echo \PhalApi\T('Home'); ?></a>
          <span class="contentList__nav__i"></span>
        </div> -->
        <a href="/" class="item" class="nav__index"><?php echo \PhalApi\T('Home'); ?></a>
        <a href="/docs.php" class="item"><?php echo \PhalApi\T('Open API'); ?></a>
        <a href="/platform" class="item"><?php echo \PhalApi\T('Open Platform'); ?></a>
        <a href="/wiki/"  target="_blank" class="item"><?php echo \PhalApi\T('Docs'); ?></a>
        <a href="/admin/"  target="_blank"  class="item"><?php echo \PhalApi\T('Management System'); ?></a>
      </div>
          

         
     <div class="right menu">
         <div class="ui dropdown item" style="color: #333;">
          <?php echo \PhalApi\T('Language'); ?> <i class="dropdown icon"></i>
          <div class="menu">
          <?php foreach (\PhalApi\DI()->config->get('app.project.language_list') as $lan => $name) { ?>
            <a class="item" href="/docs.php?language=<?php echo $lan; ?>" ><?php echo $name; ?></a>
          <?php } ?>
          </div>
        </div>
      </div>
              <!-- 欢迎/注册 -->
    <?php if (!empty($_COOKIE['p_username'])) { ?>
    <a class="item" target="_blank" href="/platform" class="item"><?php echo \PhalApi\T('welcome'); ?>: <?php echo $_COOKIE['p_username']; ?></a>
      <?php } else { ?>
      
        <div class="item register">
        <div class="ui black basic button">
          <a  href="/platform" style="color: #333" target="_blank"><?php echo \PhalApi\T('Sign Up'); ?></a>
        </div>
        &nbsp;&nbsp;&nbsp;
        <div class="ui black button">
          <a  href="/platform" style="color: #fff;font-weight:500" target="_blank"><?php echo \PhalApi\T('Sign In'); ?></a>
        </div>
        </div>
    <?php } ?>
    </div>
  </div>
  

<div class="row"></div>

<script>
  window.onload = function() {
    let href = window.location.href
    let $contentList__nav = $(".contentList__nav .item")
    console.log('onload', $contentList__nav)
    $contentList__nav.each(function (params) {
      console.log(href, this.href, href===this.href)
      if (href===this.href) {
        $(this).addClass("active")
      }
    })
  }
</script>
