Following are the fundamental building blocks to creating a route.
import React, { Fragment } from "react";
import Link from 'next/link';
import { useRouter } from "next/router";
<
ul>
<
li>
<
Link href="/">Home
<
/Link>
<
/li>
<
li>
<
Link href="/about">About Us
<
/Link>
<
/li>
<
li>
<
Link href="/blog/hello-world">Blog Post
<
/Link>
<
/li>
<
/ul>
Following are the fundamental building blocks to creating a new link.
├── shared
├──layouts-components
├──sidebar
├──sidemenu.tsx
export const MENUITEMS = [
{
menutitle: "Main",
},
{
title: "Dashboards",
icon: (
<
svg
xmlns="http://www.w3.org/2000/svg"
className="side-menu__icon"
width="24"
height="24"
viewBox="0 0 24 24"
>
<
path d="M3 13h1v7c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-7h1a1 1 0 0 0 .707-1.707l-9-9a.999.999 0 0 0-1.414 0l-9 9A1 1 0 0 0 3 13zm7 7v-5h4v5h-4zm2-15.586 6 6V15l.001 5H16v-5c0-1.103-.897-2-2-2h-4c-1.103 0-2 .897-2 2v5H6v-9.586l6-6z"
/>
<
/svg>
),
type: "sub",
selected: false,
active: false,
children: [
{
path: "/components/dashboards/dashboard1",
type: "link",
active: false,
selected: false,
title: "Dashboard-1",
},
{
path: "/components/dashboards/dashboard2",
type: "link",
active: false,
selected: false,
title: "Dashboard-2",
},
{
path: "/components/dashboards/dashboard3",
type: "link",
active: false,
selected: false,
title: "Dashboard-3",
},
],
},
]