<div id="admin-bar">
  <div class="nav flex-column nav-pills">
    <a class="nav-link active" role="tab" href="/admin">
      <img
        src="{{ asset('/bundles/autoadmin/front/images/gda-logo-picto.png')|webp() }}"
        width="20"
        alt="Admin"
        loading="lazy"
      /> Admin
    </a>
    {#    <a class="nav-link">Profile</a> #}
    {#    <a class="nav-link">Messages</a> #}
    {#    <a class="nav-link">Settings</a> #}
  </div>
</div>
<style type="text/css">
  #admin-bar {
    background: #22428f;
    color: #fff;
    position: fixed;
    left: 0;
    top: 50vh;
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(90deg) translate(calc(-50%), 0px);
    transform-origin: 0 calc(100%);
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    box-shadow: 2px 6px 5px 2px rgb(38 38 38 / 30%);
    font-family: Arial, serif;
    letter-spacing: 1px;
    z-index: 1000000;
  }

  #admin-bar img {
    max-width: 20px;
    height: auto;
  }
</style>