docs(navbar): update layout

Author: zoltanszogyenyi

layouts/_partials/navbar.html

@@ -1,25 +1,25 @@
 <header class="fixed top-0 z-40 flex-none w-full mx-auto bg-neutral-primary border-b border-light-subtle">
-  <!-- <div
+  <div
       id='banner'
       tabIndex='-1'
       class='z-50 flex justify-center w-full px-4 py-3 border border-b border-light bg-neutral-secondary-soft lg:py-4'>
       <div class='items-center md:flex'>
         <p class='text-sm font-medium text-heading md:my-0'>
           <span class='bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded me-2 hidden md:inline'>New</span>
-              We have launched Flowbite v4 with new themes, components, and more!
-            <a href="https://flowbite.com/application-ui/preview/" class='inline-flex items-center ml-2 text-sm text-fg-brand font-medium md:ml-2 hover:underline'>
+              We have launched the new Flowbite Design System with variable tokens and more!
+            <a href="https://flowbite.com/figma/" class='inline-flex items-center ml-2 text-sm text-fg-brand font-medium md:ml-2 hover:underline'>
               Check it out
               <svg class="w-3 h-3 ml-1.5 text-fg-brand" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
               </svg>
             </a>
         </p>
       </div>
-  </div> -->
+  </div>
   <div class="flex items-center justify-between w-full px-3 py-3 mx-auto max-w-8xl xl:px-0">
     <div class="flex items-center">
-      <div class="flex items-center">
-        <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="p-2 mr-2 text-body rounded-sm cursor-pointer lg:hidden hover:text-heading hover:bg-neutral-secondary focus:ring-2 focus:ring-neutral-quaternary">
+      <div class="flex items-center justify-between">
+        <button id="toggleSidebarMobile" aria-expanded="true" aria-controls="sidebar" class="block me-3 text-body rounded-sm cursor-pointer lg:hidden hover:text-heading hover:bg-neutral-secondary focus:ring-2 focus:ring-neutral-quaternary">
           <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
           <svg id="toggleSidebarMobileClose" class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
         </button>
@@ -32,22 +32,22 @@
             <img src="/docs/images/logo-mono.svg" class="h-7 mr-3 group-data-[theme=mono]/root:block hidden" alt="FlowBite Logo" />
             <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white leading-none">Flowbite</span>
           </a>
-          <button id="dropdownFlowbiteVersionButton" data-dropdown-toggle="dropdownFlowbiteVersion" class="inline-flex items-center justify-center text-fg-brand bg-brand-softer box-border border border-transparent hover:bg-brand-soft focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-xs px-2 py-0.5 focus:outline-none" type="button">
+          <button id="dropdownFlowbiteVersionButton" data-dropdown-toggle="dropdownFlowbiteVersion" class="hidden sm:inline-flex items-center justify-center text-fg-brand bg-brand-softer box-border border border-transparent hover:bg-brand-soft focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-xs px-2 py-0.5 focus:outline-none" type="button">
             v4.0
             <svg class="w-3 h-3 ms-1 -me-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
           </button>
 
           <!-- Dropdown menu -->
-          <div id="dropdownFlowbiteVersion" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-28">
-              <ul class="p-2 text-sm text-body font-medium" aria-labelledby="dropdownFlowbiteVersionButton">
+          <div id="dropdownFlowbiteVersion" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-24">
+              <ul class="p-2 text-xs text-body font-medium" aria-labelledby="dropdownFlowbiteVersionButton">
                 <li>
-                  <a rel="noopener noreferrer nofollow" href="https://v3.flowbite.com/docs/" onclick="this.href='https://v3.flowbite.com' + window.location.pathname" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">v4.0.0</a>
+                  <a rel="noopener noreferrer nofollow" href="https://v3.flowbite.com/docs/" onclick="this.href='https://v3.flowbite.com' + window.location.pathname" class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded">v3.1.2</a>
                 </li>
               </ul>
           </div>
         </div>
       </div>
-      <div id="docsearch" class="hidden md:flex ml-6 xl:ml-[18px]"></div>
+      <div id="docsearch" class="hidden md:flex ml-3 xl:ml-[18px]"></div>
     </div>
 
     <div class="flex items-center">
@@ -72,23 +72,23 @@
         </li>
       </ul>
       <div id="docsearch-mobile" class="sm:hidden"></div>
-      <a href="https://github.com/themesberg/flowbite" data-tooltip-target="tooltip-github-2" class="hidden sm:inline-flex items-center justify-center text-body w-10 h-10 hover:text-heading hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5" >
+      <a href="https://github.com/themesberg/flowbite" data-tooltip-target="tooltip-github-2" class="hidden sm:inline-flex items-center justify-center text-body w-10 h-10 hover:text-heading hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5" >
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg>
         <span class="sr-only">View on Github</span>
       </a>
       <div id="tooltip-github-2" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-lg shadow-xs opacity-0 tooltip">
           View on Github
           <div class="tooltip-arrow" data-popper-arrow></div>
       </div>
-      <a href="https://discord.gg/4eeurUVvTy" data-tooltip-target="tooltip-discord-2" class="hidden sm:inline-flex items-center justify-center text-body w-10 h-10 hover:text-heading hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5" >
+      <a href="https://discord.gg/4eeurUVvTy" data-tooltip-target="tooltip-discord-2" class="hidden sm:inline-flex items-center justify-center text-body w-10 h-10 hover:text-heading hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5" >
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg>
         <span class="sr-only">Join Discord community</span>
       </a>
       <div id="tooltip-discord-2" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-lg shadow-xs opacity-0 tooltip">
         Join community on Discord
         <div class="tooltip-arrow" data-popper-arrow></div>
       </div>
-      <a href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A" data-tooltip-target="tooltip-youtube" class="hidden sm:inline-flex items-center justify-center text-body hover:text-heading w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5" >
+      <a href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A" data-tooltip-target="tooltip-youtube" class="hidden sm:inline-flex items-center justify-center text-body hover:text-heading w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5" >
         <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
           <path fill-rule="evenodd" d="M21.7 8.037a4.26 4.26 0 0 0-.789-1.964 2.84 2.84 0 0 0-1.984-.839c-2.767-.2-6.926-.2-6.926-.2s-4.157 0-6.928.2a2.836 2.836 0 0 0-1.983.839 4.225 4.225 0 0 0-.79 1.965 30.146 30.146 0 0 0-.2 3.206v1.5a30.12 30.12 0 0 0 .2 3.206c.094.712.364 1.39.784 1.972.604.536 1.38.837 2.187.848 1.583.151 6.731.2 6.731.2s4.161 0 6.928-.2a2.844 2.844 0 0 0 1.985-.84 4.27 4.27 0 0 0 .787-1.965 30.12 30.12 0 0 0 .2-3.206v-1.516a30.672 30.672 0 0 0-.202-3.206Zm-11.692 6.554v-5.62l5.4 2.819-5.4 2.801Z" clip-rule="evenodd"/>
         </svg>
@@ -98,7 +98,7 @@
         Subscribe to YouTube channel
         <div class="tooltip-arrow" data-popper-arrow></div>
       </div>
-      <a href="https://twitter.com/zoltanszogyenyi" data-tooltip-target="tooltip-twitter" class="hidden hover:text-heading sm:inline-flex items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5" >
+      <a href="https://twitter.com/zoltanszogyenyi" data-tooltip-target="tooltip-twitter" class="hidden hover:text-heading sm:inline-flex items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5" >
         <svg class="w-4.5 h-4.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
           <path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/>
         </svg>
@@ -108,7 +108,7 @@
         Follow us on Twitter/X
         <div class="tooltip-arrow" data-popper-arrow></div>
       </div>
-      <button id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button" class="inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5">
+      <button id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button" class="inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5">
         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 0 1-.5-17.986V3c-.354.966-.5 1.911-.5 3a9 9 0 0 0 9 9c.239 0 .254.018.488 0A9.004 9.004 0 0 1 12 21Z"/>
         </svg>
@@ -121,7 +121,7 @@
           Toggle dark mode
           <div class="tooltip-arrow" data-popper-arrow></div>
       </div>
-      <button id="new-theme-toggle" data-tooltip-target="tooltip-toggle-new-theme" data-dropdown-toggle="select-theme" type="button" class="inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5 mr-0.5">
+      <button id="new-theme-toggle" data-tooltip-target="tooltip-toggle-new-theme" data-dropdown-toggle="select-theme" type="button" class="inline-flex hover:text-heading items-center justify-center text-body w-10 h-10 hover:bg-neutral-secondary-soft focus:outline-none focus:ring-2 focus:ring-neutral-tertiary rounded-xl text-sm p-2.5">
         <svg class="w-4.5 h-4.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7h.01m3.486 1.513h.01m-6.978 0h.01M6.99 12H7m9 4h2.706a1.957 1.957 0 0 0 1.883-1.325A9 9 0 1 0 3.043 12.89 9.1 9.1 0 0 0 8.2 20.1a8.62 8.62 0 0 0 3.769.9 2.013 2.013 0 0 0 2.03-2v-.857A2.036 2.036 0 0 1 16 16Z"/>
         </svg>