Fixed Right Sidebar Navigation Menu

<div
  class="fixed sm:w-[350px] dark:bg-slate-950 dark:border-slate-800 z-50 transform flex flex-col bg-white w-[300px] h-full border-slate-200 border-l top-0 right-0 shadow-2xl justify-between"
  id="side-menu">
  <div class="dark:border-slate-800/50 flex border-slate-100 border-b pt-6 pr-6 pb-6 pl-6 items-center justify-between">
    <span class="text-lg font-semibold tracking-tight">
          <span class="text-[#2196F3]">JB</span><span class="text-slate-900 dark:text-white">Sync</span>
    </span>
    <button onclick="toggleMenu()" class="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
          <iconify-icon icon="solar:close-circle-linear" width="24" class=""></iconify-icon>
        </button>
  </div>

  <div class="flex-1 overflow-y-auto pt-6 pr-4 pb-6 pl-4 space-y-2">
    <!-- Menu Items -->
    <button onclick="navigateTo('landing-content');window.location.href='/landing-page'" class="group flex hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-all text-left w-full rounded-xl pt-4 pr-4 pb-4 pl-4 items-center justify-between" role="button">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
              <iconify-icon icon="solar:home-smile-linear" width="20" class=""></iconify-icon>
            </div>
            <div class="">
              <span class="block text-slate-900 dark:text-slate-200 font-medium group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors" data-i18n="menu_home">
                Home
              </span>
              <span class="block text-[10px] text-slate-500 uppercase tracking-wider mt-0.5" data-i18n="menu_home_sub">
                Startpagina
              </span>
            </div>
          </div>
        </button>
    <button onclick="navigateTo('landing-content');window.location.href='/missed-call-whatsapp-back'" class="group flex hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-all text-left w-full rounded-xl pt-4 pr-4 pb-4 pl-4 items-center justify-between cursor-pointer" role="button">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
              <iconify-icon icon="solar:chat-round-call-linear" width="20" class=""></iconify-icon>
            </div>
            <div class="">
              <span class="block text-slate-900 dark:text-slate-200 font-medium group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors" data-i18n="menu_missed">
                Missed Call WhatsApp
              </span>
              <span class="block text-[10px] text-slate-500 uppercase tracking-wider mt-0.5" data-i18n="menu_missed_sub">
                Automatisering
              </span>
            </div>
          </div>
          <iconify-icon icon="solar:alt-arrow-right-linear" class="text-slate-300 dark:text-slate-600 group-hover:translate-x-1 transition-transform"></iconify-icon>
        </button>
    <button onclick="navigateTo('landing-content')" class="w-full group flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-all text-left">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
              <iconify-icon icon="solar:microphone-3-linear" width="20"></iconify-icon>
            </div>
            <div class="">
              <span class="block text-slate-900 dark:text-slate-200 font-medium group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors" data-i18n="menu_echo">
                Echo Connect
              </span>
              <span class="block text-[10px] text-slate-500 uppercase tracking-wider mt-0.5" data-i18n="menu_echo_sub">
                AI Telefoniste
              </span>
            </div>
          </div>
          <iconify-icon icon="solar:alt-arrow-right-linear" class="text-slate-300 dark:text-slate-600 group-hover:translate-x-1 transition-transform"></iconify-icon>
        </button>
    <button onclick="toggleMenu(); toggleModal('demo-modal')" class="w-full group flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-all text-left mt-2">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
              <iconify-icon icon="solar:rocket-2-linear" width="20"></iconify-icon>
            </div>
            <div class="">
              <span class="block text-slate-900 dark:text-slate-200 font-medium group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors" data-i18n="menu_demo">
                Demo Starten
              </span>
              <span class="block text-[10px] text-slate-500 uppercase tracking-wider mt-0.5" data-i18n="menu_demo_sub">
                Vraag aan
              </span>
            </div>
          </div>
          <iconify-icon icon="solar:alt-arrow-right-linear" class="text-slate-300 dark:text-slate-600 group-hover:translate-x-1 transition-transform"></iconify-icon>
        </button>
    <button onclick="navigateTo('landing-content')" class="group flex hover:bg-slate-50 dark:hover:bg-slate-900/50 transition-all text-left w-full rounded-xl pt-4 pr-4 pb-4 pl-4 items-center justify-between">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-900 flex items-center justify-center text-slate-500 dark:text-slate-400 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
              <iconify-icon icon="solar:phone-calling-linear" width="20"></iconify-icon>
            </div>
            <div class="">
              <span class="block text-slate-900 dark:text-slate-200 font-medium group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors" data-i18n="menu_contact">
                Contact
              </span>
              <span class="block text-[10px] text-slate-500 uppercase tracking-wider mt-0.5" data-i18n="menu_contact_sub">
                Team &amp; Contact
              </span>
            </div>
          </div>
          <iconify-icon icon="solar:alt-arrow-right-linear" class="text-slate-300 dark:text-slate-600 group-hover:translate-x-1 transition-transform"></iconify-icon>
        </button>
  </div>

  <div class="p-6 border-t border-slate-100 dark:border-slate-800/50 bg-slate-50/50 dark:bg-slate-900/30">
    <div class="space-y-3">
      <button onclick="toggleTheme()" class="flex items-center justify-center gap-3 w-full py-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 transition-all shadow-sm">
            <iconify-icon id="theme-icon" icon="solar:sun-2-linear" width="18"></iconify-icon>
            <span id="theme-text" class="text-sm font-medium">Light Mode</span>
          </button>
    </div>
  </div>
</div>