124 lines
3.7 KiB
Plaintext
124 lines
3.7 KiB
Plaintext
|
import { Tabs } from "nextra/components";
|
||
|
|
|
||
|
|
# Menu Customization
|
||
|
|
In our demo, we've utilized various menu structures. To customize your menu, start by selecting the menu structure you prefer for your application.
|
||
|
|
|
||
|
|
|
||
|
|
### Vertical Menu
|
||
|
|
If you prefer using the vertical menu in your system, you can tailor the menus.ts file to suit your requirements.
|
||
|
|
|
||
|
|
```ts filename="lib/menus.ts" /children/
|
||
|
|
|
||
|
|
export function getMenuList(pathname: string, t: any): Group[] {
|
||
|
|
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
groupLabel: "",
|
||
|
|
id: "ecommerce",
|
||
|
|
menus: [
|
||
|
|
{
|
||
|
|
id: "ecommerce",
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("ecommerce"),
|
||
|
|
active: pathname.includes("/ecommerce"),
|
||
|
|
icon: "heroicons-outline:shopping-bag",
|
||
|
|
submenus: [
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("userApp"),
|
||
|
|
active: pathname.includes("/ecommerce/frontend"),
|
||
|
|
icon: "heroicons-outline:user",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("products"),
|
||
|
|
active: pathname === "/ecommerce/frontend",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
|
||
|
|
label: t("productDetails"),
|
||
|
|
active:
|
||
|
|
pathname ===
|
||
|
|
"/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/checkout/cart",
|
||
|
|
label: t("cart"),
|
||
|
|
active: pathname === "/ecommerce/frontend/checkout/cart",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/wishlist",
|
||
|
|
label: t("wishlist"),
|
||
|
|
active: pathname === "/ecommerce/frontend/wishlist",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
];
|
||
|
|
};
|
||
|
|
```
|
||
|
|
|
||
|
|
### Horizontal Menu
|
||
|
|
|
||
|
|
|
||
|
|
If you prefer using the horizontal collapsed menu in your system, you can tailor the menus.ts file to suit your requirements.
|
||
|
|
|
||
|
|
|
||
|
|
```js filename="lib/menus.ts" /children/
|
||
|
|
export function getHorizontalMenuList(pathname: string, t: any): Group[] {
|
||
|
|
|
||
|
|
return [
|
||
|
|
{
|
||
|
|
groupLabel: "",
|
||
|
|
id: "ecommerce",
|
||
|
|
menus: [
|
||
|
|
{
|
||
|
|
id: "ecommerce",
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("ecommerce"),
|
||
|
|
active: pathname.includes("/ecommerce"),
|
||
|
|
icon: "heroicons-outline:shopping-bag",
|
||
|
|
submenus: [
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("userApp"),
|
||
|
|
active: pathname.includes("/ecommerce/frontend"),
|
||
|
|
icon: "heroicons-outline:user",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend",
|
||
|
|
label: t("products"),
|
||
|
|
active: pathname === "/ecommerce/frontend",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
|
||
|
|
label: t("productDetails"),
|
||
|
|
active:
|
||
|
|
pathname ===
|
||
|
|
"/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/checkout/cart",
|
||
|
|
label: t("cart"),
|
||
|
|
active: pathname === "/ecommerce/frontend/checkout/cart",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/ecommerce/frontend/wishlist",
|
||
|
|
label: t("wishlist"),
|
||
|
|
active: pathname === "/ecommerce/frontend/wishlist",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
];
|
||
|
|
};
|
||
|
|
```
|