Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

drawer component improvement suggestion


Hey, Metronic 8

When using the drawer component and use the same element for submenu on desktop and drawer on mobile, what is needed is to turn :


data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="{default: true, lg: false}"


you have some efficiency issue, the drawer logic is still working behind the scene also when its not activated, you can see it on "body" that the drawer is turned "on" when clicking the element.
my suggestion is to add logic of checking if the activate option is enabled on "toggle" method of drawer:


var _toggle = function() {
if ( KTEventHandler.trigger(the.element, "kt.drawer.toggle", the) === false || _getOption("activate") === false) {
return;
}

if ( the.shown === true ) {
_hide();
} else {
_show();
}

KTEventHandler.trigger(the.element, "kt.drawer.toggled", the);
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


To improve the drawer component, consider enhancing its usability and accessibility. Implement smoother animations for opening and closing, ensuring a seamless user experience. Incorporate keyboard navigation and screen reader dish network billing problems compatibility for accessibility. Additionally, allow users to customize the drawer's width and position for better adaptability to various screen sizes. Finally, streamline the content organization within the drawer for easier navigation and discoverability.



Hi,

Noted, we will check it further.

All the best!

Regards.



Hi,

Thank you for your suggestion. We will check this further and consider adding your improvement in the next update of Metronic v8.

May I know which Metronic version you have tried this with?

Regards,
Sean



Hey,

Exact version I'm not sure.
but on Metronic v8 in general


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(