components/navbar.html.twig

<input type="checkbox" id="toggle-aside" />
<nav class="navbar">
  <input type="checkbox" id="toggle-navbar" />
  <div style="display: flex;">
    {% if showSidenav %}
      <label for="toggle-aside" class="label-aside">
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </label>
    {% endif %}
    <a href="{{ path('leaf_home') }}" class="logo">
      <svg id="vector" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 140.2 76.8">
        <path fill="#90ee90" d="M28.88 31.84C35.54 40 45.19 48.78 51 58.5c5.14 10.73 14.22 25.34 -3.33 13.65 -13.43 -6.58 -29.21 -10 -38.22 -22.22C0.3 42.26 -2.77 -3.82 2.74 0.25 24.46 11 48 9.35 60.23 23.48a40.75 40.75 0 0 1 8.15 14.85c2.81 7.88 5.2 -7.21 7.53 -9.22C79.66 22.69 85.58 18 92.06 14.8c14.06 -5.15 29.14 -7 42.88 -13.31 2.26 -1 4.25 -1.55 4.8 -0.43 1.28 18.32 0.77 39.76 -12.86 53.37C114.91 65.51 98 67.91 84.12 76.7c-3.83 1 -0.62 -5.45 0.17 -8 5.56 -16 17.39 -24.86 29.34 -37.27C85.69 39.75 77.73 81 73.41 67.29c-1.25 -2 -0.53 -7.12 -3.5 -7.3 -3.17 0.58 -2.27 13.27 -8.27 7.83C53.88 54 43.86 37.9 28.88 31.84Z" id="path_0"></path>
      </svg>
    </a> 
  </div>
  <ul>
    <li class="nav-logo"></li>
    <li>
      <a href="{{ path('leaf_about') }}" class="{{ route == 'leaf_about' ? 'active' : '' }} nav-link">About</a>
    </li>
    <li>
      <a href="{{ path('leaf_gallery') }}" class="{{ route == 'leaf_gallery' ? 'active' : '' }} nav-link">Gallery</a>
    </li>
    <li>
      <a href="{{ path('leaf_wiki') }}" class="{{ route == 'leaf_wiki' ? 'active' : '' }} nav-link">Wiki</a>
    </li>
    <li>
      <a href="{{ path('leaf_community') }}" class="{{ route == 'leaf_community' ? 'active' : '' }} nav-link">Community</a>
    </li>
  </ul>
  <label for="toggle-navbar" class="label-navbar">
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
  </label>
</nav>