导航栏的修改

Mon, Nov 25, 2019

  @media (max-width: 48em) {
    .sidevbar-logo__img {
      max-width: 50%;
      margin: 0 auto;
    }
    .sidebar-nav-item a img,.sidebar-nav-item a svg {
      display: none;
    }
  }
  @media (min-width: 48em) {
    .sidevbar-logo__img {
      margin-left: -5%;
    }
    .sidebar-nav {
      text-align: left;
    }
    .sidebar-nav-item a img,.sidebar-nav-item a svg {
      display: inline-block;
      margin: 0 .5em 0 0;
      vertical-align: middle;
      object-fit: contain;
    }
  }
  
  .sidebar-nav-item {
    position: relative;
    padding-left: 5%;
    border-right: 1.25rem solid transparent;
  }
  .sidebar-nav-item.active{
    background: skyblue;
    background-clip: content-box;
    -webkit-filter: hue-rotate(45deg);
    filter: hue-rotate(45deg)
  }
  .sidebar-nav-item::before {
    display: inline-block;
    width: 5%;
    content: '';
  }
  .sidebar-nav-item.active:after {
    position: absolute;
    left: 100%;
    border: 1.25rem solid skyblue;
    border-top-color: transparent;
    border-right: 0 none;
    border-bottom-color: transparent;
    background: inherit;
    content: '';
  }
  .sidebar-nav-item.active a {
    color:  #2b6b84;
  }

<aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidevbar-logo">
      <img
        src="{{ .Site.BaseURL }}images/logo.png"
        alt="logo"
        class="sidevbar-logo__img"
      />
    </div>
    <!-- <div class="sidebar-about">
      <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
      <p class="lead"></p>
    </div> -->

    <nav>
      <ul class="sidebar-nav">
        <!-- <li><a href="{{ .Site.BaseURL }}">Home</a></li> -->
        {{ $currentPage := . }}
        {{ range .Site.Menus.main -}}
        <!--给导航栏添加选中类-->
        <li class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}"><a href="{{.URL}}"> {{ .Name }} </a></li>
        {{- end }}
      </ul>
    </nav>

    <!--去除copyright-->
    <!-- <p>{{ with .Site.Params.copyright }}{{.}}{{ else }}&copy; {{ now.Format "2006"}}. All rights reserved. {{end}}</p> -->
  </div>
</aside>