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
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 <></>;
}
