<div class="fixed top-0 z-20 flex-none h-screen max-h-screen overflow-x-hidden overflow-y-auto pointer-events-none md:sticky print:hidden">
   <div class="relative flex w-screen h-full max-w-sm -ml-px md:w-64">
      <input
         id="menu_btn"
         class="absolute opacity-0 peer"
         type="checkbox"
         aria-hidden="true"
      >
      <label
         for="menu_btn"
         class="fixed inset-0 transition-opacity duration-300 ease-out bg-stone-600 opacity-0 pointer-events-none md:hidden peer-checked:opacity-75 peer-checked:pointer-events-auto"></label>
      <label
         for="menu_btn"
         class="absolute top-0 z-20 inline-block px-6 py-8 peer-checked:-ml-16 duration-300 ease-out cursor-pointer pointer-events-auto select-none transition-left peer-checked:left-full menu-icon md:hidden *:before:top-5px *:after:-top-5px peer-focus:*:bg-stone-900 dark:peer-focus:*:bg-white peer-focus:*:before:bg-stone-900 dark:peer-focus:*:before:bg-white peer-focus:*:after:bg-stone-900 dark:peer-focus:*:after:bg-white left-0 ml-0 peer-checked:*:bg-transparent! dark:peer-checked:*:bg-transparent! peer-checked:*:before:w-full peer-checked:*:before:-rotate-45 peer-checked:*:before:bg-white dark:peer-checked:*:before:bg-white peer-checked:*:after:rotate-45 peer-checked:*:after:bg-white dark:peer-checked:*:after:bg-white peer-checked:*:before:top-0 peer-checked:*:after:top-0"
      >
         <span class="relative block w-5 transition-colors duration-300 ease-out bg-stone-500 h-2px before:bg-stone-500 before:block before:h-full before:transform before:absolute before:transition-all before:duration-500 before:ease-out before:content-[''] before:w-1/2 before:top-5px after:bg-stone-500 after:block after:h-full after:transform after:absolute after:transition-all after:duration-500 after:ease-out after:content-[''] after:w-full after:-top-5px"></span>
      </label>
      <div class="flex flex-col flex-1 invisible w-full max-w-xs duration-300 ease-out transform -translate-x-full border-r border-stone-200 pointer-events-auto dark:border-stone-700 dark:border-r-2 dark:bg-stone-800 bg-stone-50 md:flex-initial transition-transform-visibility md:transition-none md:w-64 peer-checked:translate-x-0 peer-checked:visible md:translate-x-0 md:visible">
         <!-- Site Title -->
         <div class="flex items-center shrink-0 h-auto px-4 py-5 md:py-0 md:h-16">
            {% if (page.url | pageurlrewrite == "/") %}
            <span
               class="text-lg text-stone-900 underline dark:text-stone-300"
            >
               {{ site.title }}
            </span>
            {% else %}
            <a
               href="{{ '/' | url }}"
               class="text-lg text-stone-900 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white"
            >
               {{ site.title }}
            </a>
            {% endif %}
         </div>
         <div class="flex-1 h-0 overflow-y-auto md:flex md:flex-col">
            <nav class="px-2 space-y-1 md:flex-1 md:py-4">
               <!-- Recursive Sidebar Links -->
               {% macro sidebar(link) %}
               {% if ((page.url | pageurlrewrite) == link.url) %}
               <li class="mt-1">
                  <span class="flex items-center px-2 py-2 text-base font-medium leading-6 text-stone-900 underline dark:text-white md:leading-5 md:text-sm group">
                     {% if link.svg %}
                     <svg
                        fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        class="flex-none w-6 h-6 mr-4 text-stone-500 dark:text-stone-300 md:mr-3"
                     >
                        {{ link.svg | safe }}
                     </svg>
                     {% else %}
                     <svg
                        fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        class="flex-none w-6 h-6 mr-4 text-stone-500 dark:text-stone-300 md:mr-3"
                     >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M 9,12 a 3,3 0 1,1 6,0 a 3,3 0 1,1 -6,0" />
                     </svg>
                     {% endif %}
                     {{ link.title }}
                  </span>

                  {% if link.links %}
                  <ul class="ml-4">
                     {% for link in link.links %}
                     {{ sidebar(link) }}
                     {% endfor %}
                  </ul>
                  {% endif %}
               </li>
               {% else %}
               <li class="mt-1">
                  <a
                     href="{{ link.url | url }}"
                     class="flex items-center px-2 py-2 text-base font-medium leading-6 text-stone-600 dark:text-stone-300 md:leading-5 md:text-sm group dark:hover:text-white hover:text-stone-900 focus:text-black dark:focus:text-white"
                  >
                     {% if link.svg %}
                     <svg
                        fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        class="flex-none w-6 h-6 mr-4 text-stone-400 md:mr-3 dark:group-hover:text-stone-300 dark:group-focus:text-stone-300 group-hover:text-stone-500 group-focus:text-stone-500"
                     >
                        {{ link.svg | safe }}
                     </svg>
                     {% else %}
                     <svg
                        fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        class="flex-none w-6 h-6 mr-4 text-stone-400 md:mr-3 dark:group-hover:text-stone-300 dark:group-focus:text-stone-300 group-hover:text-stone-500 group-focus:text-stone-500"
                     >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M 9,12 a 3,3 0 1,1 6,0 a 3,3 0 1,1 -6,0" />
                     </svg>
                     {% endif %}
                     {{ link.title }}
                  </a>
                  {% if link.links %}
                  <ul class="ml-4">
                  {% for link in link.links %}
                  {{ sidebar(link) }}
                  {% endfor %}
                  </ul>
                  {% endif %}
               </li>
               {% endif %}
               {% endmacro %}

               <ul>
                  {% for link in nav.links %}
                  {{ sidebar(link) }}
                  {% endfor %}
               </ul>
            </nav>
         </div>
         <div class="flex items-center justify-center shrink-0 p-2">
            <!-- Social Links -->
            <ul class="flex">
               {% for social in nav.social %}
               <li>
                  <a
                     href="{{ social.url | url }}"
                     target="_blank"
                     class="inline-block px-2 py-2 text-stone-400 hover:text-stone-500 dark:hover:text-stone-300"
                  >
                     {% if social.title %}
                     <span class="sr-only">{{ social.title }}</span>
                     {% endif %}
                     {% if social.svg | safe %}
                     <svg
                        viewBox="0 0 24 24" fill="currentColor"
                        class="w-6 h-6"
                     >
                        {{ social.svg | safe }}
                     </svg>
                     {% endif %}
                  </a>
               </li>
               {% endfor %}
            </ul>
         </div>
      </div>
      <div class="shrink-0 w-14 md:hidden"></div>
   </div>
</div>
