Absolute sidebar with transition popup, when leaving sidebar is immediatelly visible

[Nikola-Milovic]

Hello everyone, to better explain, I have a welcome popup that grays the background, when the popup is hidden it start leaving and slowly fading away, but the sidebar immediately is fully visible. This seems like weird behaviour but probably intended. So I am not sure how to approach this. This is it here happening

This is the code, it's a bit big but I'll try and condense it as much as possible.

First this is my layout that holds all of my other content

val layout = fc<LayoutProps>("Layout") { props ->
    div("relative h-screen w-screen flex") {

        //Sidebar starts
        aside( "absolute left-0 bg-white h-screen z-40 w-64 md:relative md:w-1/4 md:border-r shadow-xl " +
                " delay-100 duration-300 ease-in-out transition-transform " +
                if (props.isOpen) " translate-x-0 " else " -translate-x-full " + " md:translate-x-0 ") {
            attrs {
                id = "sidebar"
            }
        }

        div("relative w-full h-full") {
          //Top bar
            div("absolute top-0 h-16 w-full bg-primary-base flex z-10 flex-row items-center p-2 z-5") {
                attrs {
                    id = "topbar"
                }
            }
             
             //Content
            div("pt-16 h-full w-full overflow-y-auto no-scrollbar") {
                props.children()
            }
        }
    }
}

This part of the sidebar if (props.isOpen) " translate-x-0 " else " -translate-x-full " + " md:translate-x-0 " is a bit hacky. It makes the sidebar slide-in and out when on mobile, but forces it to be open on the desktop. Content/ children are the actual screens

And this is a screen that is inside content that has the popup

val MainPage = fc<MainPageProps> { props ->
    val (showWelcomePopup, setShowWelcomePopup) = useState(props.component.isFirstLaunch())

    layout {
    }

   //The popup is actually outside of the layout
    welcomePopup {
        attrs.dismiss = {
            setShowWelcomePopup(false)
            props.component.sawWelcomeMessage()
        }
        attrs.popup = showWelcomePopup
    }
}

And this is my popup

transition {
        attrs.unmount = true
        attrs.show = props.popup
        attrs.enter = "transition-opacity duration-700 delay-300"
        attrs.enterFrom = "opacity-0"
        attrs.enterTo = "opacity-100"
        attrs.leave = "transition-opacity duration-500 delay-300"
        attrs.leaveFrom = "opacity-100"
        attrs.leaveTo = "opacity-0"


        div("absolute inset-0 overflow-hidden h-screen w-screen bg-gray-800 bg-opacity-50 z-50") {
            attrs.onClick = {
                props.dismiss()
            }
            div("absolute w-3/4 md:w-1/2 h-3/4 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white z-50 ") {
                attrs.onClick = {
                    it.stopPropagation()
                }
      }
}

Basically, when it starts leaving, it slowly fades, but for some reason, the entire sidebar immediately becomes fully visible. Honestly, I might need to rework the sidebar to use transitions, as I had to hack it this way before knowing that transitions existed... This is written in Kotlin with KotlinJS and React, it should be readable.