osp-sidebar-layout
v0.2.1
Published
Layout with collapsable sidebar
Downloads
118
Readme
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 |