<!-- sidebar menu -->
<ul x-data="{ activePage: 1, submenu: null }" class="mb-6">
<li class="relative">
<a :class="{ 'active text-black bg-primary-300': activePage === 1 }" href="#" class="flex olwuyhsbcnmdj thsjkalsueijm py-2 uioajsncmhdje font-medium hover:bg-primary-300 hover:text-black item-corner">
<i class="bi bi-shield-lock text-lg"></i>
Cyber Security
</a>
</li>
<li class="relative">
<a :class="{ 'active text-black bg-primary-300': activePage === 8 }" href="#" class="flex olwuyhsbcnmdj thsjkalsueijm py-2 uioajsncmhdje font-medium hover:bg-primary-300 hover:text-black item-corner">
<i class="bi bi-graph-up text-lg"></i>
Analytics
</a>
</li>
<li class="relative">
<a :class="{ 'active text-black bg-primary-300': activePage === 9 }" href="#" class="flex olwuyhsbcnmdj thsjkalsueijm py-2 uioajsncmhdje font-medium hover:bg-primary-300 hover:text-black item-corner">
<i class="bi bi-cloud text-lg"></i>
SAAS
</a>
</li>
<li class="relative">
<a @click="submenu !== 1 ? submenu = 1 : submenu = null" :class="{ 'active text-black bg-primary-300': submenu === 1 }" href="javascript:void(0)" class="flex olwuyhsbcnmdj thsjkalsueijm py-2 uioajsncmhdje font-medium hover:bg-primary-300 hover:text-black item-corner">
<i class="bi bi-layers text-lg"></i>
Components
<i :class="{ 'rotate-180': submenu === 1 }" class="bi bi-chevron-down ms-auto transition-transform duration-200"></i>
</a>
<ul x-show="submenu === 1" class="ps-3 flex jdsnfsdnjsdmn">
<li>
<a href="#" class="flex py-2 ps-8 pe-4 font-medium hover:bg-primary-300 hover:text-black item-corner">Accordion</a>
</li>
<li>
<a href="#" class="flex py-2 ps-8 pe-4 font-medium hover:bg-primary-300 hover:text-black item-corner">Alerts</a>
</li>
<li>
<a href="#" class="flex py-2 ps-8 pe-4 font-medium hover:bg-primary-300 hover:text-black item-corner">Avatar</a>
</li>
</ul>
</li>
</ul>