Fade-in and out transition effect for Drawer Menu when hovering on Hamburger icon in Dawn

[StudioBlank]

Hello everyone,

So, I've been trying to make the drawer menu appear when hovering on the hamburger icon, with a fade-in transition effect for the drawer menu but I could not find any solutions.

I've managed to disable the transition effect but not modifying it.

Can I anyone help me out? Thanks.

[StudioBlank]

Can you please share your solution in this community so for others with the same issue can find the solution easily.
Here is my site www.blankstudiocy.com

Please post your custom code and steps here. Thanks

[StudioBlank]

I've managed to add a fade-in effect to the drawer menu but not a fade-out effect.

Here is the code I used:

<style>
    .js details[open]>.menu-drawer {
    opacity: 0;
    }
    .js details[open].menu-opening>.menu-drawer {
    opacity: 1;
    transition: opacity 0.3s ease;
    }
    </style>

Add this code below {%- endif -%} in Theme.liquid