Fuso documentation

Navigation Menu

There are numerous links in header and if we write whole code in html then number of lines will increase a lot. So to prevent that we have created a json for the header links so that we can loop through the array links and render our links accordingly.

You can find menu on the following path: "src/core/data/menu.ts"

Making changes in Navbar. 


import { routes } from '@/router/routes'

export interface MenuItem {
    path?: string
    title?: string
    type?: string
    megaMenu?: boolean
    active?: boolean
    imageUrl?: string
    children?: MenuItem[]
    linkSection?: boolean
    level?: number
    section?: MenuItem[]
}

export const menu: MenuItem[] = [
{
  title: 'home',
  type: 'sub',
  megaMenu: true,
  level: 1,
  children: [
    {
      title: 'car_minimal_demo',
      imageUrl: 'other/menu/1.jpg',
      type: 'link',
      path: routes.Home.Car.CarMinimalOne,
      active: false,
    },
    {
      title: 'car_minimal_demo',
      imageUrl: 'other/menu/2.jpg',
      path: routes.Home.Car.CarMinimalTwo,
      type: 'link',
      active: false,
    },
    {
      title: 'job_minimal_demo',
      imageUrl: 'other/menu/3.jpg',
      path: routes.Home.Job.JobMinimalOne,
      type: 'link',
      active: false,
    },
    {
      title: 'job_minimal_demo',
      imageUrl: 'other/menu/4.jpg',
      path: routes.Home.Job.JobMinimalTwo,
      type: 'link',
      active: false,
    },
    {
      title: 'job_minimal_demo',
      imageUrl: 'other/menu/5.jpg',
      path: routes.Home.Job.JobMinimalThree,
      type: 'link',
      active: false,
    },
    {
      title: 'property_minimal_demo',
      imageUrl: 'other/menu/6.jpg',
      path: routes.Home.Property.PropertyMinimalOne,
      type: 'link',
      active: false,
    },
    {
      title: 'property_minimal_demo',
      imageUrl: 'other/menu/7.jpg',
      path: routes.Home.Property.PropertyMinimalTwo,
      type: 'link',
      active: false,
    },
    {
      title: 'coming_soon',
      imageUrl: 'other/menu/8.jpg',
      type: 'link',
      active: false,
    },
  ],
},

If you need to modify anything in the already made navbar you have to make changes in this file src/core/data/menu.ts

Adding new Links

Lets say you want to add a new link in the navigation bar, then you can do that by following the below given steps.

Step 1: add a new object in the array of navLinks containing the title, type, megaMenu, level and children (if any) as the keys to that object. Make sure that you provide the proper path in the menu.ts file or else page won't render as the website won't be able to find the correct page for that path.