Black Friday Super Sale!Limited Time 50% OFF for All-Access Plans
Save 50% Now

sidemenu hover its expanding and minimizing


In Metronic tailwind demo1 project where is the option that controls on sidemenu hover its expanding and minimizing


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)


On Hover of sidebar its expanding how to prevent it?



Hi,

In "typescript/vite/src/layouts/demo1/Demo1LayoutConfig.ts" just disable collapse prop.

if you need to keep the collapse feature and disable the hover effect you just need to disable "handleMouseEnter" and "handleMouseLeave" in "typescript/vite/src/layouts/demo1/sidebar/Sidebar.tsx"

Regards,
Sean



Hi,

You can check the Layout Provider config:
"typescript/vite/src/layouts/demo1/Demo1LayoutConfig.ts".

Here you can check how toggle is handled:
"typescript/vite/src/layouts/demo1/sidebar/SidebarToggle.tsx"

Regards,
Sean



In previous bootstrap version we use to have this sidebar: {
componentName: 'sidebar',
display: true,
default: {
class: 'flex-column',
push: {
header: true,
toolbar: true,
footer: true,
},
drawer: {
enabled: true,
attributes: {
'data-kt-drawer': 'true',
'data-kt-drawer-name': 'app-sidebar',
'data-kt-drawer-activate': '{default: true, lg: false}',
'data-kt-drawer-overlay': 'true',
'data-kt-drawer-width': '225px',
'data-kt-drawer-direction': 'start',
'data-kt-drawer-toggle': '#kt_app_sidebar_mobile_toggle',
},
},
fixed: {
desktop: true,
},
minimize: {
desktop: {
enabled: true,
default: true,
hoverable: true,
},
},
menu: {
iconType: 'svg',
},
},
}, minimize option but in tailwind its not there, how can i solve this issue?


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  :(