<nav class="sm:hidden fixed top-0 z-50 w-full border-b border-red-200 bg-red-200 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
  <div class="px-3 py-3 lg:px-5 lg:pl-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center justify-start rtl:justify-end">
        <button 
               data-drawer-target="funnySidebar" 
               data-drawer-toggle="funnySidebar" 
               aria-controls="funnySidebar" 
               type="button" class="inline-flex items-center p-2 text-sm text-red-500 rounded-lg sm:hidden hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            <span class="sr-only">Open Sidebar</span>
            <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
            </svg>
         </button>
      </div>
  </div>
</nav>

<aside id="funnySidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full border-r sm:translate-x-0 border-red-200 bg-red-200 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" aria-label="Sidebar">

   <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-zinc-900 list-none">
      <ul class="space-y-2 font-medium">
         {{ for item of [
            {url: "/", content: "Home"},
            {url: "/markdown", content: "Markdown Test"}] 
         }}
         <li>
            {{comp.SidebarButton({content: item.content,url: item.url})}}
         </li>
         {{/for}}
      </ul>
   </div>
</aside>

<div class="p-4 pt-10 sm:pt-0 sm:ml-64">
  {{content}}
</div>
