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

Icon accordion menu showing 2 icons


Icon arrow up and down on toogle accordion sidebar showing 2 icons. Im using on project next app router.

here is my code.


<div
className="menu-item"
data-menu-item-toggle="accordion"
data-menu-item-trigger="click"
>
<div
className="menu-link flex items-center grow cursor-pointer border border-transparent gap-[10px] pl-[10px] pr-[10px] py-[6px]"
>
<span className="menu-icon items-start text-gray-500 dark:text-gray-400 w-[20px]">
<i className="ki-filled ki-element-11 text-lg"></i>
</span>
<span className="menu-title text-sm font-semibold text-gray-700 menu-item-active:text-primary menu-link-hover:!text-primary">
Dashboards
</span>
<span className="menu-arrow text-gray-400 w-[20px] shrink-0 justify-end ml-1 mr-[-10px]">
<i className="ki-filled ki-down text-2xs menu-item-show:hidden"></i>
<i className="ki-filled ki-up text-2xs hidden menu-item-show:inline-flex"></i>
</span>
</div>
<div className="menu-accordion gap-0.5 pl-[10px] relative before:absolute before:left-[20px] before:top-0 before:bottom-0 before:border-l before:border-gray-200">
<div className="menu-item">
<a className="menu-link gap-[14px] pl-[10px] pr-[10px] py-[8px] border border-transparent items-center grow menu-item-active:bg-secondary-active dark:menu-item-active:bg-coal-300 dark:menu-item-active:border-gray-100 menu-item-active:rounded-lg hover:bg-secondary-active dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg">
<span className="menu-bullet flex w-[6px] relative before:absolute before:top-0 before:size-[6px] before:rounded-full before:-translate-x-1/2 before:-translate-y-1/2 menu-item-active:before:bg-primary menu-item-hover:before:bg-primary"></span>
<span className="menu-title text-2sm font-medium text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-link-hover:!text-primary">
Light Sidebar
</span>
</a>
</div>
<div className="menu-item">
<a className="menu-link gap-[14px] pl-[10px] pr-[10px] py-[8px] border border-transparent items-center grow menu-item-active:bg-secondary-active dark:menu-item-active:bg-coal-300 dark:menu-item-active:border-gray-100 menu-item-active:rounded-lg hover:bg-secondary-active dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg">
<span className="menu-bullet flex w-[6px] relative before:absolute before:top-0 before:size-[6px] before:rounded-full before:-translate-x-1/2 before:-translate-y-1/2 menu-item-active:before:bg-primary menu-item-hover:before:bg-primary"></span>
<span className="menu-title text-2sm font-medium text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-link-hover:!text-primary">
Dark Sidebar
</span>
</a>
</div>
</div>
</div>


here is the image

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 (3)


Hi,

Integration HTML/JS template into Next.js project requires lots of workarounds and its not smooth process.

However we are releasing a new project for React/Next.js this week and you can consider using it for free. We will provide all Metronic like features in this project. Stay tuned on x.com/keenthemes for this new project by Thursday this week.

Regards,
Sean



Hi,

Are you following Metronic 9 Next.js integration guide:
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/nextjs ?

Can you please try to use https://github.com/keenthemes/metronic-tailwind-html-integration and launch the demo1 with next.js app ?

Please note that the github next.js app is a starter kit for Demo 1 and it requires Tailwind 9 source code in order to run it. Please refer to the above guide for more info.

Regards,
Sean



i've been follow the instructions. its it correct to intiate demo1.js just remove this code

// KTDom.ready(() => {
// // KTLayout.init();
// });


and this is my intitate Global demo1 on my next app project

"use client";
import { useEffect } from "react";
import KTComponent, {
KTAccordion,
KTCollapse,
KTDataTable,
KTDismiss,
KTDrawer,
KTDropdown,
KTImageInput,
KTMenu,
KTModal,
KTReparent,
KTScrollable,
KTScrollspy,
KTScrollto,
KTStepper,
KTSticky,
KTTabs,
KTTheme,
KTToggle,
KTTogglePassword,
KTTooltip,
} from "@/metronic/core";
import KTLayout from "@/metronic/app/layouts/demo1";
import KTUtils from "@/metronic/core/helpers/utils";
import KTDom from "@/metronic/core/helpers/dom";
import KTEventHandler from "@/metronic/core/helpers/event-handler";
import KTComponents from "@/metronic/core";
import { usePathname } from "next/navigation";

export default function GlobalInit() {
const pathname = usePathname();
useEffect(() => {
if (typeof window !== "undefined") {
window.KTUtils = KTUtils;
window.KTDom = KTDom;
window.KTEventHandler = KTEventHandler;
window.KTMenu = KTMenu;
window.KTDropdown = KTDropdown;
window.KTModal = KTModal;
window.KTDrawer = KTDrawer;
window.KTCollapse = KTCollapse;
window.KTDismiss = KTDismiss;
window.KTTabs = KTTabs;
window.KTAccordion = KTAccordion;
window.KTScrollspy = KTScrollspy;
window.KTScrollable = KTScrollable;
window.KTScrollto = KTScrollto;
window.KTSticky = KTSticky;
window.KTReparent = KTReparent;
window.KTToggle = KTToggle;
window.KTTooltip = KTTooltip;
window.KTStepper = KTStepper;
window.KTTheme = KTTheme;
window.KTImageInput = KTImageInput;
window.KTTogglePassword = KTTogglePassword;
window.KTDataTable = KTDataTable;
window.KTComponents = KTComponents;

KTComponent.init();
KTLayout.init();
}
}, [pathname]);

return <></>;
}


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