def nav.toggleSidebar()
    if #MobileSidebar matches .hidden then
       remove .hidden from #MobileSidebar then
       remove .hidden from #MobileSidebarClosedIcon
       set #MobileSidebarOpenIcon @aria-hidden to true
       set #MobileSidebarClosedIcon @aria-hidden to false
       transition the #MobileSidebarBackdrop's opacity from 0 to 100 using 'all 300ms ease-in'
       transition the #MobileSidebarMenu's transform from 'translateX(-100%)' to 'translateX(0)' using 'all 300ms ease-in-out'
       transition the #MobileSidebarClosedIcon's opacity from 0 to 100 using 'all 300ms ease-in'
       add .hidden to #MobileSidebarOpenIcon
    else
       set #MobileSidebarOpenIcon @aria-hidden to false
       set #MobileSidebarClosedIcon @aria-hidden to true
       remove .hidden from #MobileSidebarOpenIcon
       transition the #MobileSidebarMenu's transform from 'translateX(0)' to 'translateX(-100%)' using 'all 300ms ease-in-out'
       transition the #MobileSidebarClosedIcon's opacity from 100 to 0 using 'all 300ms ease-out'
       transition the #MobileSidebarBackdrop's opacity from 100 to 0 using 'all 300ms ease-out'
       add .hidden to #MobileSidebarClosedIcon
       add .hidden to #MobileSidebar
    end
end

def nav.temp()
    toggle .hidden on #MobileSidebar
    toggle .hidden on #MobileSidebarOpenIcon
    toggle .hidden on #MobileSidebarClosedIcon
end

def nav.toggleDropdown(button, elem)
    if elem matches .hidden then
       remove .hidden from elem then
       set button @aria-expanded to true
       transition the elem's opacity from 0 to 100 transform from 'scale(.95)' to 'scale(1)' using 'all 150ms ease-in'
    else
       transition the elem's opacity from 100 to 0 transform from 'scale(1)' to 'scale(.95)' using 'all 150ms ease-out' then
       add .hidden to elem then
       set button @aria-expanded to false
    end
end

def nav.toggleExpandable(button, elem)
    if elem matches .hidden then
       remove .hidden from elem then
       add .rotate-90 to the last <svg/> in button
       set button @aria-expanded to true
    else
       add .hidden to elem
       remove .rotate-90 from the last <svg/> in button
       set button @aria-expanded to false
    end
end

def nav.toggleModal(elem)
    if elem matches .hidden then
       remove .hidden from elem then
       transition .backdrop's opacity from 0 to 100 using 'all 300ms ease-in' in elem
       transition .modal-panel opacity from 0 to 100 transform from 'scale(.95)' to 'scale(1)' using 'all 300ms ease-in' in elem
    else
       transition .modal-panel opacity from 100 to 0 using 'all 300ms ease-out' in elem
       transition .backdrop's opacity from 100 to 0 transform from 'scale(1)' to 'scale(.95)' using 'all 300ms ease-out' in elem
       settle then
       add .hidden to elem
    end
end

def nav.toggleToggle(button, input, label, toggle, trueText, falseText)
    if the input's value is 'true' then
       remove .bg-primary-600 from button
       add .bg-gray-200 to button
       remove .translate-x-5 from toggle
       add .translate-x-0 to toggle
       set input.value to 'false'
       set button @aria-checked to false
       set the label's innerText to falseText
    else
       remove .bg-gray-200 from button
       add .bg-primary-600 to button
       remove .translate-x-0 from toggle
       add .translate-x-5 to toggle
       set input.value to 'true'
       set button @aria-checked to true
       set the label's innerText to trueText
    end
end