<nav class="lg:hidden fixed bottom-0 left-0 w-full z-50 flex justify-around items-center h-16 bg-surface px-4 pb-safe shadow-[0px_-4px_16px_rgba(48,20,70,0.05)] rounded-t-xl">
    <button onclick="navigate('class-selection')" class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary">
        <span class="material-symbols-outlined">home</span>
        <span class="text-label-sm font-label-sm">Home</span>
    </button>
    <button class="flex flex-col items-center justify-center bg-primary-container text-on-primary-container rounded-full px-4 py-1 scale-110 transition-transform">
        <span class="material-symbols-outlined">import_contacts</span>
        <span class="text-label-sm font-label-sm">Curriculum</span>
    </button>
    <button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary">
        <span class="material-symbols-outlined">bar_chart</span>
        <span class="text-label-sm font-label-sm">Progress</span>
    </button>
    <button class="flex flex-col items-center justify-center text-on-surface-variant hover:text-primary">
        <span class="material-symbols-outlined">person</span>
        <span class="text-label-sm font-label-sm">Profile</span>
    </button>
</nav>