I am encountering an issue with the Daisy UI drawer component on my page. When I attempt to change the page direction using a JavaScript function, the drawer animates visibly from left to right or right to left, which is not the desired behavior. I have tried hiding it by adding the hidden class, but then I struggled to find a way to make it visible again. Additionally, using z-index did not help in bringing it back.
I experimented with
<div class="drawer-side invisible peer-checked:visible">Could someone please advise me on how to prevent this abnormal sliding behavior of the drawer while changing the HTML direction? I want the drawer to smoothly slide in and out without any visibility issues during direction changes.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda9aca4beb4b8a48df9e3fbe3fc">[email protected]</a>/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<label id="lng" class="btn btn-primary drawer-button m-1" onclick="switchDir()">Switch Html Dir</label>
<div class="drawer">
<input id="my-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<!-- Page content here -->
<label for="my-drawer" class="btn btn-primary drawer-button m-1">Open drawer</label>
</div>
<div class="drawer-side">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
<!-- Sidebar content here -->
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
</ul>
</div>
</div>
<script>
// Function to switch the HTML direction
function switchDir() {
let page = document.getElementsByTagName('html')[0];
if (page.dir == 'rtl') {
page.dir = 'ltr';
} else {
page.dir = 'rtl';
}
};
</script>
</body>