Left side toggle is not working in mobileview

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>

Right toggle code:

<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">

icon's code

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

How to make both ids working on button click and to make left toggle appear from left?

Guest 2 weeks ago

React Metronic SASS

3 Answers

Replies (3)

Lauris Stepanovs Author1 week ago

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

Guest 1 week ago

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.

Lauris Stepanovs Author1 week ago

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"}"

These attributes are needed for DrawerComponent and SwapperComponent initializations.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Left side toggle is not working in mobileview

Replies (3)

Metronic

Products

Legal & Statements

Stay Connected

Templates byMetronic Creators

CreativeDesign Resources

We are proud towork with Experts

Left side toggle is not working in mobileview

Replies (3)

Metronic

Templates by
Metronic Creators

Creative
Design Resources

We are proud to
work with Experts