angular > metronic 8.1.7 > Sidebar
Hi,
I want to set the mobile like sidebar toggle option in all view (and disable large screen layout), can you help me to change related settings values or configs to do so ?
(in mobile the sidebar panel is hidden toggled when click "Show sidebar menu" )
Replies (3)
Hi Rohan Mistry
Update the drawer activation setting in your layout configuration files. The key setting is data-kt-drawer-activate in the sidebar drawer configuration.
src/app/_metronic/layout/core/configs/
Files to update:
dark-sidebar.config.ts
light-sidebar.config.ts
dark-header.config.ts
light-header.config.ts
Update the drawer activation setting — In each config file, find the sidebar.default.drawer.attributes section and change:
'data-kt-drawer-activate': '{default: true, lg: false}'
to:
"data-kt-drawer-activate": "{default: true, lg: true}"This keeps the drawer active (mobile-like behavior) on all screen sizes, including large screens.
Make the toggle button visible on all screens — In src/app/_metronic/layout/components/header/header.component.html, find the sidebar mobile toggle button and remove the d-lg-none class:
<!-- Change from: -->
<div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
<!-- To: -->
<div class="d-flex align-items-center ms-n2 me-2" title="Show sidebar menu">After making these changes, clear your browser cache and reload the application. If the sidebar still doesn't behave as expected, share which layout type you're using (dark-sidebar, light-sidebar, dark-header, or light-header)
It looks like the attached image after making changes as suggested, any other settings to change to show it exactly like mobile layout ?
- left side big margin gap showing
- when showing side bard does not show menu bar links (only icons)
let me know if you are not able to see the images
Image 1
Image 2
fyi: its about margin for
[data-kt-app-sidebar-fixed=true] .app-wrapper
body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] &, body:not([data-kt-app-header-fixed="true"])[data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] & { margin-left: calc( var(--#{$prefix}app-sidebar-width) + var(--#{$prefix}app-sidebar-gap-start, 0px) + var(--#{$prefix}app-sidebar-gap-end, 0px) ); }
similarly for header too.
Also is it possible on desktop sidebar, i can extend the time of the hover over menu to open it...
like it is right now opening as soon as mouse over it... is it possible to do by 2 seconds over side bar and then open it ?
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
