I am using metronic demo 6 react version. In the mobile view there are 2 icons. Clicking on each icon it should open a toggle from left and one from right accordingly (as it is in html version).Right now only the right toggle is working. We need to make the toggle appear from the left as well. I tried giving the id of left toggle, but left toggle id is not working.
Here is the code for left toggle:
<div
className="d-lg-flex flex-column flex-lg-row-auto w-lg-290px"
data-kt-drawer="true"
// data-kt-drawer-name="start-sidebar"
data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"200px", "250px": "300px"}"
data-kt-drawer-direction="start"
data-kt-drawer-toggle="#kt_social_start_sidebar_toggle"
>
{/*begin::User menu*/}
<div className="card mb-5 mb-xl-8">
{/*begin::Body*/}
<div className="card-body pt-15 px-0">
{/*begin::Member*/}
{/*end::Member*/}
{/*begin::Row*/}
{/*end::Row*/}
{/*begin::Navbar*/}
<div className="m-0">
<h3 className="card-title px-9 flex-column">
<span className="card-label fw-bold text-dark">Filter</span>
{/*begin::Navs*/}
<ul className="nav nav-pills nav-pills-custom flex-column border-transparent fs-5 fw-bold">
{/*begin::Nav item*/}
<li className="nav-item mt-5">
<div
className="nav-link text-muted text-active-primary ms-0 py-0 me-10 ps-9 border-0"
onClick={returnToCards}
>
<i className="ki-duotone ki-row-horizontal fs-3 text-muted me-3">
<span className="path1" />
<span className="path2" />
</i>
All feeds
{/*begin::Bullet*/}
<span className="bullet-custom position-absolute start-0 top-0 w-3px h-100 bg-primary rounded-end" />
{/*end::Bullet*/}
</div>
{/*end::Nav item*/}
{spans.map((individualSpan, index) => (
<>
<li className="nav-item mt-5">
<div
onClick={() => {
handleChange(individualSpan)
}}
className="nav-link text-muted text-active-primary ms-0 py-0 me-10 ps-9 border-0"
>
<div className="symbol symbol-20px me-5">
<img
src={toAbsoluteUrl(individualSpan.iconImg)}
className=""
alt=""
/>
</div>
<span
key={index}
id={individualSpan.id}
className={individualSpan.id === active ? active : "deactive"}
>
{individualSpan.text}
</span>
</div>
</>
))}
{/*begin::Navs*/}
</div>
{/*end::Navbar*/}
</div>
{/*end::Body*/}
</div>
<div className="card mb-5 mb-xl-8">
{/*begin::Body*/}
<div className="card-body pt-15 px-0">
{/*begin::Member*/}
{/*end::Member*/}
{/*begin::Row*/}
{/*end::Row*/}
{/*begin::Navbar*/}
<div className="m-0">
<h3 className="card-title px-9 flex-column">
<span className="card-label fw-bold text-dark">Filter by AI Score</span>
<div
className="d-lg-flex flex-column flex-lg-row-auto w-lg-300px"
data-kt-drawer="true"
// data-kt-drawer-name="end-sidebar"
data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"200px", "250px": "300px"}"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_social_end_sidebar_toggle"
>
{/*begin::Social widget 1*/}
<div className="card mb-5 mb-xl-8">
{/*begin::Header*/}
<div className="card-header border-0 pt-5">
<h3 className="card-title align-items-start flex-column">
<span className="card-label fw-bold text-dark">Saved Insights</span>
{/* <span className="text-muted mt-1 fw-semibold fs-7">
8k social visitors
</span> */}
{/*begin::Toolbar*/}
<div className="card-toolbar">
{/*begin::Menu*/}
<button
className="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
data-kt-menu-overflow="true"
>
<i className="ki-duotone ki-dots-square fs-1">
<span className="path1" />
<span className="path2" />
<span className="path3" />
<span className="path4" />
</i>
</button>
{/*begin::Menu 2*/}
<div
className="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
data-kt-menu="true"
>
{/*begin::Menu item*/}
<div className="menu-item px-3">
<div className="menu-content fs-6 text-dark fw-bold px-3 py-4">
Quick Actions
</div>
</div>
{/*end::Menu item*/}
{/*begin::Menu separator*/}
<div className="separator mb-3 opacity-75" />
{/*end::Menu separator*/}
{/*begin::Menu item*/}
<div className="menu-item px-3">
<a href="#" className="menu-link px-3">
Save Post
</a>
</div>
{/*end::Menu item*/}
{/*begin::Menu item*/}
<div className="menu-item px-3">
<a href="#" className="menu-link px-3">
Hide Post
</a>
</div>
{/*end::Menu item*/}
{/*begin::Menu item*/}
{/*end::Menu item*/}
{/*begin::Menu item*/}
<div className="menu-item px-3">
<a href="#" className="menu-link px-3">
Turn on Notifications
</a>
</div>
{/*end::Menu item*/}
{/*begin::Menu separator*/}
<div className="separator mt-3 opacity-75" />
{/*end::Menu separator*/}
{/*begin::Menu item*/}
{/*end::Menu item*/}
</div>
{/*end::Menu 2*/}
{/*end::Menu*/}
</div>
{/*end::Toolbar*/}
</div>
{/*end::Header*/}
{/*begin::Body*/}
<div className="card-body pt-5">
{/*begin::Item*/}
<div className="d-flex flex-stack">
{/*begin::Symbol*/}
<div className="symbol symbol-20px me-5">
<img
src={toAbsoluteUrl("/media/avatars/bar-chart.png")}
className="h-50 align-self-center"
alt=""
/>
</div>
{/*end::Symbol*/}
{/*begin::Section*/}
<div className="d-flex align-items-center flex-row-fluid flex-wrap">
{/*begin:Author*/}
<div className="flex-grow-1 me-2">
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="text-gray-800 text-hover-primary fs-6 fw-bold"
>
Pattern 1
</a>
<span className="text-muted fw-semibold d-block fs-7">
Yesterday at 7:08 PM
</span>
</div>
{/*end:Author*/}
{/*begin:Action*/}
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="btn btn-sm btn-light fs-8 fw-bold"
>
View
</a>
{/*end:Action*/}
</div>
{/*end::Section*/}
</div>
{/*end::Item*/}
{/*begin::Separator*/}
<div className="separator separator-dashed my-4" />
{/*end::Separator*/}
{/*begin::Item*/}
<div className="d-flex flex-stack">
{/*begin::Symbol*/}
<div className="symbol symbol-20px me-5">
<img
src={toAbsoluteUrl("/media/avatars/star.png")}
className="h-50 align-self-center"
alt=""
/>
</div>
{/*end::Symbol*/}
{/*begin::Section*/}
<div className="d-flex align-items-center flex-row-fluid flex-wrap">
{/*begin:Author*/}
<div className="flex-grow-1 me-2">
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="text-gray-800 text-hover-primary fs-6 fw-bold"
>
Recommendation 2
</a>
<span className="text-muted fw-semibold d-block fs-7">
Yesterday at 5:06 PM
</span>
</div>
{/*end:Author*/}
{/*begin:Action*/}
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="btn btn-sm btn-light fs-8 fw-bold"
>
View
</a>
{/*end:Action*/}
</div>
{/*end::Section*/}
</div>
{/*end::Item*/}
{/*begin::Separator*/}
<div className="separator separator-dashed my-4" />
{/*end::Separator*/}
{/*begin::Item*/}
<div className="d-flex flex-stack">
{/*begin::Symbol*/}
<div className="symbol symbol-20px me-5">
<img
src={toAbsoluteUrl("/media/avatars/data-management.png")}
className="h-50 align-self-center"
alt=""
/>
</div>
{/*end::Symbol*/}
{/*begin::Section*/}
<div className="d-flex align-items-center flex-row-fluid flex-wrap">
{/*begin:Author*/}
<div className="flex-grow-1 me-2">
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="text-gray-800 text-hover-primary fs-6 fw-bold"
>
Anomaly 3
</a>
<span className="text-muted fw-semibold d-block fs-7">
Yesterday at 3:30 PM
</span>
</div>
{/*end:Author*/}
{/*begin:Action*/}
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="btn btn-sm btn-light fs-8 fw-bold"
>
View
</a>
{/*end:Action*/}
</div>
{/*end::Section*/}
</div>
{/*end::Item*/}
{/*begin::Separator*/}
<div className="separator separator-dashed my-4" />
{/*end::Separator*/}
{/*begin::Item*/}
<div className="d-flex flex-stack">
{/*begin::Symbol*/}
<div className="symbol symbol-20px me-5">
<img
src={toAbsoluteUrl("/media/avatars/icons-atom.png")}
className="h-50 align-self-center"
alt=""
/>
</div>
{/*end::Symbol*/}
{/*begin::Section*/}
<div className="d-flex align-items-center flex-row-fluid flex-wrap">
{/*begin:Author*/}
<div className="flex-grow-1 me-2">
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="text-gray-800 text-hover-primary fs-6 fw-bold"
>
Cluster 4
</a>
<span className="text-muted fw-semibold d-block fs-7">
Yesterday at 10 AM
</span>
</div>
{/*end:Author*/}
{/*begin:Action*/}
<a
href="../../demo1/dist/pages/user-profile/overview.html"
className="btn btn-sm btn-light fs-8 fw-bold"
>
View
</a>
{/*end:Action*/}
</div>
{/*end::Section*/}
</div>
{/*end::Item*/}
{/*begin::Separator*/}
<div className="separator separator-dashed my-4" />
{/*end::Separator*/}
{/*begin::Item*/}
{/*end::Item*/}
</div>
{/*end::Body*/}
</div>
<div className="card mb-5 mb-xl-8">
{/*begin::Header*/}
<div className="card-header border-0 pt-5">
<h3 className="card-title align-items-start flex-column">
<span className="card-label fw-bold text-dark">Recent Tags</span>
{/* <span className="text-muted mt-1 fw-semibold fs-7">
8k social visitors
</span> */}
{/*begin::Toolbar*/}
<div className="card-toolbar">
<div className="d-flex align-items-center gap-2">
<div
className="btn btn-icon btn-active-color-primary w-30px h-30px"
id="kt_social_start_sidebar_toggle"
>
<i className="ki-duotone ki-profile-circle fs-1">
<span className="path1" />
<span className="path2" />
<span className="path3" />
</i>
</div>
<div
className="btn btn-icon btn-active-color-primary w-30px h-30px"
id="kt_social_end_sidebar_toggle"
>
<i className="ki-duotone ki-scroll fs-1">
<span className="path1" />
<span className="path2" />
<span className="path3" />
</i>
</div>
)}
</div>
Hi,
Thank you for reaching out to us.
We have reproduced this issue and included a fix in the next Metronic release.
For now, to fix this problem you can update src/_metronic/assets/ts/components/_SwapperComponent.ts with code from this gist file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I have updated the _SwapperComponent.js as above but still left toggle is not working. Since iam using JS version i have converted typescript file to JS . Iam using JSX components throughout my project.
Hi,
Please make sure that you have initialized our ts components globally, you can refer to our main initialization file /src/_metronic/layout/MasterInit.tsx.
Also, verify that your menu wrapper still has the following attributes:
data-kt-drawer="true"
data-kt-drawer-name="header-menu"
data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:"200px", "300px": "250px"}"
data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_header_menu_mobile_toggle"
data-kt-swapper="true"
data-kt-swapper-mode="prepend"
data-kt-swapper-parent="{default: "#kt_body", lg: "#kt_header_nav"}"