Osp-sidebar-layout NPM

OSP Sidebar Layout

Common sidebar component to be use in One Stop Portal, high level wrapper on top of yaminncco/vue-sidebar-menu

Demo

Demo link on OSP platform: https://portal.osp.sit.inet.paynet.my/dashboard

Run Locally

Clone the project

  git clone https://gitlab.infra.paynet.my/one-stop-portal/applications/front-end/sidebar-layout.git

Go to the project directory

  cd sidebar-layout

Install dependencies

  npm install

Start the server

  npm run serve

Tech Stack

Vuejs
yaminncco/vue-sidebar-menu

Deployment

To deploy this project run

  npm run build
  npm publish

Basic Usage

<script>
  import { OspSidebarLayout } from "osp-sidebar-layout";

  export default {
    name: "Example",
    components: {
      OspSidebarLayout
    }
  };
</script>

<template>
  <div id="app">
    <OspSidebarLayout>
      Testing
    </OspSidebarLayout>
  </div>
</template>

Props

props	type	required	default	Remark
onLogout	Function	false	`() => {}`
onLogin	Function	false	`() => {}`
userFirstName	String	false	""
userFirstName	String	false	""
stateUnauthenticated	Boolean	false	`false`	If `true` Unauthenticate message will be shown
stateAccessDenied	Boolean	false	`false`	If `true` Access Denied messesage will be shown
stateSessionExpired	Boolean	false	`false`	If `true` Session Expired messesage will be shown
stateLoading	Boolean	false	`false`	If `true` Getting Ready messesage will be shown
sidebarMenu	String	false	[]	Full list of options