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 |