Skip to content

Sisitech Navigation Bar Library

Sisitech library that handles website navigation bars

[lib-mynavbar]

Installation

npm install @sisitech/mynavbar@0.0.1

Usage

Import the library

import { MynavbarModule } from '@sisitech/mynavbar'
...

imports: [
    ...
    MynavbarModule
    ...
  ],

About

The library is made up of 5 main components :

Component Selector Description Parameters
brand-navbar Part of the navbar that houses the company logo. The logo is clickable and can redirect to a select url.
  1. src : path to the image file
  2. url : link that the one redirects to on clicking the logo
  3. alt : text that shows if the path provided for src isn't working
link-navbar Where the links to different routes within the website are placed. This section takes multiple arrays as input, each array defining attributes of a single link.
  1. type : takes two values (either single or dropdown). Single to mean it's a standalone link and dropdown to mean it's a link with sublinks.
  2. name : defines the display name of the link
  3. route : takes the name of the route specfied in the routes array in app-routing.module.ts or a https url to the desired page
  4. fragement : this paramater is used if we're defining the route to a section of a page rather than a whole page. For instance, if referring to the portfolio section in the about us page, the route would be defined as about while fragment would be defined as portfolio
  5. subLinks : this parameter takes multiple arrays each with attributes type, name and route. Used for links of type dropdown to define the multiple sub links
action-navbar Defines the different buttons to be displayed on the navbar along with their functions on click.
  1. name : defines the display name of the button
  2. action defines the name of the associated function
search-navbar Defines a search form that allows a user to search through the active web page N/A
profile-navbar Shows the profile summary of the user when logged in and a sign in button when logged out.
  1. src : path to the profile picture of the user
  2. actions : takes multiple arrays each with attributes name and route
    • name : defines the display name of the button
    • route : takes the name of the route specfied in the routes array in app-routing.module.ts or a https url to the desired page

Example

The library can be consumed as a whole with preselected components and in an already defined order as shown :

app.component.html

<lib-mynavbar [navBarOptions]="myNav"></lib-mynavbar>

The output would be as shown below :

[lib-mynavbar]

The library could also be consumed in bits, choosing a few compoenents and in whichever order the developer desires as shown :

app.component.html 

    <div>
        <brand-navbar [brandDetails]="myNav.brand" ></brand-navbar>
        <link-navbar [linkDetails]="myNav.links"></link-navbar>
        <action-navbar [actionDetails]="myNav.actions"></action-navbar>
        <search-navbar></search-navbar>
    </div>

To achieve the image above, the arrays to be passed t the library are as shown :

app.component.ts

  myBrand: any = [
    {
      src: "https://sisitech.com/images/logo-dark.png",
      url: "http://localhost:4200/",
      alt: "company-logo"
    },
  ]

  myLinks: any = [
    {
      type: "single",
      name: "Home",
      route: "",
    },
    {
      type: "single",
      name: "About Us",
      route: "about"
    },
    {
      type: "dropdown",
      name: "Portfolio",
      subLinks : [
        {
          type: "single",
          name: "Websites",
          route: "portfolio/websites"
        },
        {
          type: "single",
          name: "Mobile Apps",
          route: "portfolio/mobile-apps"
        },
        {
          type: "single",
          name: "IoT",
          route: "portfolio/iot"
        },
      ],
    },
    {
      type: "single",
      name: "Blog",
      route: "null"
    },
    {
      type: "single",
      name: "Our Products",
      route: "null",
      fragment: "products"
    },
    {
      type: "single",
      name: "Contact Us",
      route: "null"
    }
  ]

  myActions: any = [
    {
      name: "Access Service Desk",
      action : this.service()
    }
  ]

  myProfile: any =[
    {
      src: "https://i.pinimg.com/custom_covers/222x/85498161615209203_1636332751.jpg",
      actions : [
        {
          name: "My Profile",
          route: "profile"
        },
        {
          name: "My Collections",
          route: "collections"
        }
      ]
    }
  ]

  myNav={
    brand: this.myBrand,
    links: this.myLinks,
    actions: this.myActions,
    profile: this.myProfile,
  }

Note

The functions being passed in the actions array need to be defined in the app.component.ts file.

Comments