Side Navigation
The side navigation provides a customizable navigation bar that includes a logo, navigation links, quick actions, and a search bar.
Basic Implementation
To implement the Sidenav component, use the following syntax:
<spr-sidenav>
<template #logo-image>
<img src="[logo_image_path]" alt="logo" />
</template>
</spr-sidenav>Slots
Custom Logo Image
The logo-image slot allows you to insert a custom logo in the side navigation. Use the following template to add a logo:
<template #logo-image>
<img src="[image_path]" alt="logo" />
</template>Icon Component Integration
Design System provides a property icon that allows you to use the Icon component. You can use the Icon component to display icons in the side navigation.
Currently the Design System uses the Iconify library to display icons. You can use the Iconify icon names to display icons in the side navigation. For more information on Iconify, see the Iconify documentation.
Custom Icon
To use a custom icon for your navigation links, provide a CDN link to the image using the icon property. For the active state, upload a CDN link version of the icon with -fill appended before the file extension. The component will automatically switch between the default and active icons based on the navigation state:
CDN Naming convention
Default: https://eco-cdn-prod.azureedge.net/payroll.svg
Active: https://eco-cdn-prod.azureedge.net/payroll-fill.svg
<script lang="ts" setup>
const navLinks = ref({
top: [
{
parentLinks: [
{
title: 'Home',
icon: 'https://eco-cdn-prod.azureedge.net/payroll.svg',
}
]
}
]
})
</script>Navigation Links
The navigation links are organized into grouped sections, each containing several categories. Each category includes links that may have nested menus and submenus.
defining the navigation links has 2 sections, top and bottom. Each section can contain multiple parentLinks that represent the top-level navigation items.
<template>
<spr-sidenav :nav-links="navLinks">
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const navLinks = ref({
top: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
bottom: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
});
</script>Nav Links Structure
The nav-links attribute expects an array of objects that define the navigation menu. Each object can contain:
top:You can define the top-level navigation links in the top section of the side navigation.bottom:You can define the top-level navigation links in the bottom section of the side navigation.parentLinks:List of top-level navigation links. Each link may contain additional properties such as atitle,icon,redirectandmenuLinks.title:The title of each nav link item. Whenmenulinksis empty or not indicated. Title will shows when parent link is hovered.icon:The icon associated only withparentLinks, usually an iconify strong (e.g., `ph:home`, `ph:users-three`). See more on Iconify.redirect:The URL or path to which the user is redirected when they click on the navigation item. Redirection wont work ifmenuLinksorsubmenuLinksis present.openInNewTab:A boolean flag indicating whether the link is to open in a new tab.isAbsoluteURL:A boolean flag indicating whether the link will be open using href.link:The actual URL or destination for the navigation item, often used for internal routing or linking to different parts of the app.menuLinks:This appear under aparentLinksnavigation item. These menu links define additional sections or categories under the parent link.submenuLinks:Links nested under themenuLinks, enabling multi-level navigation. These are further breakdowns or child items under eachmenuLinkssection.hidden:A boolean flag indicating whether the quick action item should be hidden.
Here's the structure for the nav-links attribute:
{
top: [
{
parentLinks: [
{
title: <String>,
icon: <String>,
hidden: <Boleean>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
menuLinks: [
{
menuHeading: <String>,
items: [
{
title: <String>,
hidden: <Boleean>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
submenuLinks: [
{
subMenuHeading: <String>,
items: [
{
title: <String>,
hidden: <Boleean>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
},
],
},
],
},
],
}
],
},
],
},
],
bottom: [
{
parentLinks: [
{
title: <String>,
icon: <String>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
menuLinks: [
{
menuHeading: <String>,
items: [
{
title: <String>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
submenuLinks: [
{
subMenuHeading: <String>,
items: [
{
title: <String>,
redirect: {
openInNewTab: <Boleean>,
isAbsoluteURL: <Boleean>,
link: <String>,
},
},
],
},
],
},
],
}
],
},
],
},
]
}Active Navigation
The active-nav property allows you to highlight the active state across different levels of navigation (parent, menu, and submenu). To integrate it with your Sidenav component, ensure that the values for active navigation correspond to the titles of the respective items in your active navigation structure, and pass the active navigation object along with your other props.
Here’s a example of how to implement the active navigation property:
<template>
<spr-sidenav :active-nav="activeNav" :nav-links="navLinks">
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const activeNav = ref({
parentNav: 'Home',
menu: 'Dashboard 1',
submenu: 'Home 2',
});
const navLinks = ref({
top: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
bottom: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
});
</script>Manual URL Change Handling
When a user manually changes the URL, the active-nav property will not automatically update. This is because active-nav is typically assigned through clicks on navigation icons, and manually typing a URL does not trigger the same logic.
To handle this, you can use the Router Meta Field. Add an activeNav object inside the route's meta field and watch for route changes. Then, assign the activeNav object from the route meta to the active-nav property of your sidenav.
const routes = [
{
path: 'workflows',
name: 'workflows',
meta:{
activeNav: {
parentNav: 'Flow',
menu: '',
submenu: '',
}
}
},
]<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const activeNav = ref({
parentNav: '',
menu: '',
submenu: '',
});
router.beforeEach((to) => {
if (to.meta.activeNav) {
activeNav.value = to.meta.activeNav;
}
});
</script>Quick Actions
This feature allows you to add quick action buttons to the side navigation. Each quick action button can have a title, description, icon, and redirection link.
Important to note:
The iconBgColor property currently can only handle 2 values green or purple.
<template>
<spr-sidenav :quick-actions="quickActions" :active-nav="activeNav" :nav-links="navLinks">
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const quickActions = ref([
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Leave Request',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Onboarding Request',
description: 'Seamlessly onboard new employees into your Sprout ecosystem',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Certificate of Employee',
description: 'Lorem ipsum dolor sit amet consectetur. ',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
menuHeading: 'Sub Heading 2',
items: [
{
title: 'ReadyWage',
description: 'Request Form',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Workflow',
description: 'Access your hard-earned salary in advance',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Something 1',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Something 2',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
]);
const activeNav = ref({
parentNav: 'Home',
menu: 'Dashboard 1',
submenu: 'Home 2',
});
const navLinks = ref({
top: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
bottom: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
});
</script>Search
Side navigation also includes a search functionality. Add has-search property to enable the search.
Using the @search event, you can handle the search functionality.
<template>
<spr-sidenav has-search @search="handleSearch">
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
const handleSearch = (search) => {
console.log(search);
};
</script>Notifications & Requests
Side navigation also includes a notification and request counter badge. Add notification-count or request-count attribute to the component to enable the notification or request counter.
Using the @notifications or @requests event, you can handle the notification functionality.
<template>
<spr-sidenav
:notification-count="5"
:request-count="10"
@notifications="handleNotifications"
@requests="handleRequest"
>
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
const handleNotifications = (notifications) => {
console.log(notifications);
};
const handleRequest = (request) => {
console.log(request);
};
</script>User Menu
The user menu allows you to add a user avatar at the bottom of the side navigation along with a menu. The user menu can contain items such as profile, settings, and logout.
<template>
<spr-sidenav :user-menu="userMenu">
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const userMenu = ref({
name: 'John Rafael M. Arias',
email: 'jarias@sprout.ph',
profileImage: 'https://lh3.googleusercontent.com/ogw/AF2bZyiCP8eaKX7KiduREcMAogl0Ml2TwYJAPTgcKeNap81ztg=s32-c-mo',
items: [
{
title: 'My Profile',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Privacy Policy',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Terms of Service',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Logout',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
});
</script>Full Example
Here’s a full example of how to implement the Sidenav component with the above attributes:
'%3e%3crect%20width='22'%20height='22'%20rx='3.66667'%20fill='%2300291B'/%3e%3cg%20clip-path='url(%23clip1_7397_5672)'%3e%3cg%20filter='url(%23filter0_i_7397_5672)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.5625%2010.438L15.5723%2010.449C15.7005%2010.0889%2015.7666%209.69528%2015.7666%209.28239C15.7666%208.0075%2015.2711%206.80877%2014.3709%205.90764C13.4708%205.0065%2012.274%204.50996%2011.0009%204.50996C9.72813%204.50996%208.53108%205.0065%207.63095%205.9079C6.73083%206.80903%206.23525%208.00777%206.23525%209.28239C6.23525%2013.0175%208.36482%2016.3357%2012.5592%2021.5218H11.1846C7.19106%2016.5188%205.16431%2013.1663%205.16431%209.28239C5.16431%207.72116%205.77153%206.2535%206.8738%205.14941C7.97633%204.04558%209.44192%203.4375%2011.0009%203.4375C12.56%203.4375%2014.0258%204.04531%2015.1281%205.14941C16.2303%206.2535%2016.8376%207.72116%2016.8376%209.28239C16.8376%2010.1921%2016.5864%2011.0407%2016.1107%2011.7356C15.3543%2012.8421%2014.1053%2013.4513%2012.5937%2013.4513C11.3158%2013.4513%2010.0325%2012.8558%208.98061%2011.7745C8.03443%2010.8018%207.326%209.48052%207.03712%208.14934L6.92708%207.6426L6.9201%207.6098C10.2135%2012.8608%2014.95%2012.1645%2015.5588%2010.4488C15.5596%2010.4468%2015.5603%2010.4448%2015.561%2010.4426C15.5615%2010.4411%2015.562%2010.4395%2015.5625%2010.438ZM6.91996%207.60914L6.91957%207.60697L6.9195%207.60698L6.91996%207.60914Z'%20fill='url(%23paint0_linear_7397_5672)'/%3e%3c/g%3e%3cpath%20d='M15.5587%2010.448C15.5601%2010.4445%2015.5611%2010.4407%2015.5625%2010.437C14.9346%209.71788%2014.2128%209.11811%2013.408%208.64864C12.5502%208.14808%2011.5984%207.79443%2010.5794%207.59737C8.8482%207.26303%207.5205%207.49656%207.46481%207.50675L6.91943%207.60595L6.91997%207.6089C10.2134%2012.8599%2014.9499%2012.1636%2015.5587%2010.448Z'%20fill='%2317AD49'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_i_7397_5672'%20x='5.16431'%20y='3.32633'%20width='11.7845'%20height='18.1952'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='hardAlpha'/%3e%3cfeOffset%20dx='0.18529'%20dy='-0.18529'/%3e%3cfeGaussianBlur%20stdDeviation='0.055587'/%3e%3cfeComposite%20in2='hardAlpha'%20operator='arithmetic'%20k2='-1'%20k3='1'/%3e%3cfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.0901961%200%200%200%200%200.678431%200%200%200%200%200.286274%200%200%200%200.35%200'/%3e%3cfeBlend%20mode='normal'%20in2='shape'%20result='effect1_innerShadow_7397_5672'/%3e%3c/filter%3e%3clinearGradient%20id='paint0_linear_7397_5672'%20x1='21.1139'%20y1='2.31484'%20x2='32.7321'%20y2='20.4711'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23A5EB12'/%3e%3cstop%20offset='1'%20stop-color='%233DBE3B'/%3e%3c/linearGradient%3e%3cclipPath%20id='clip0_7397_5672'%3e%3crect%20width='22'%20height='22'%20rx='3.66667'%20fill='white'/%3e%3c/clipPath%3e%3cclipPath%20id='clip1_7397_5672'%3e%3crect%20width='15.125'%20height='15.125'%20fill='white'%20transform='translate(3.4375%203.4375)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis est in quam efficitur tempor. Integer blandit egestas risus, non consequat massa rhoncus eget. Donec commodo luctus diam, egestas scelerisque justo fermentum vel. Morbi vestibulum quis arcu sit amet sollicitudin. Vestibulum fringilla et risus at porttitor. Sed at augue non nunc tempus sagittis quis a magna. Mauris lacinia neque massa, sed fermentum libero dignissim et. Vivamus faucibus aliquet arcu, a viverra leo vehicula at. Aliquam ut turpis vitae mi scelerisque blandit in non diam. Nulla molestie, ipsum id interdum auctor, sem odio bibendum turpis, sed accumsan nisl nunc id lacus. Vestibulum ante eros, accumsan sit amet mollis et, fermentum at est. In hac habitasse platea dictumst.
Morbi posuere orci arcu, efficitur maximus ante eleifend ut. Aliquam suscipit finibus dui a pellentesque. Praesent vel nulla turpis. Nullam gravida diam vitae lectus consectetur euismod. Pellentesque ut leo lorem. Integer nec feugiat lorem. Nam sodales nibh ut varius rutrum. Donec vel gravida purus. Aliquam dictum, elit a maximus scelerisque, lorem odio facilisis odio, volutpat interdum diam mauris vitae massa. Nunc ornare ligula eu diam bibendum finibus. Nullam maximus convallis ornare. Curabitur dolor magna, euismod at dui pretium, feugiat aliquet mi. Nullam tincidunt sapien ante, ac efficitur eros lobortis a.
Nulla lacinia fermentum fermentum. Sed lorem leo, pulvinar laoreet augue vel, rhoncus sollicitudin enim. Donec vel viverra neque. Ut at ante a massa commodo consequat quis tristique diam. Duis erat ipsum, pellentesque nec urna vitae, sodales pretium dui. Quisque ullamcorper consequat lorem. Duis bibendum dapibus velit, sed pulvinar risus ornare nec. Morbi sagittis sit amet libero quis rutrum. Curabitur finibus ullamcorper nisl nec blandit. Vestibulum placerat ex leo, vel efficitur risus vehicula et. Nam non nibh dui. Sed eu pellentesque ligula, id semper massa. Sed eu nunc fringilla, posuere diam a, porttitor eros.
Nulla faucibus eros eget convallis ullamcorper. Nam nec vehicula ipsum, ut pulvinar diam. Suspendisse sit amet metus rhoncus, pulvinar arcu quis, tincidunt lectus. Proin a mi quam. Aenean vitae massa dignissim lacus ultrices faucibus. Etiam ut bibendum quam. Vestibulum ut placerat neque. Aliquam laoreet congue lacus a semper. Suspendisse sed elementum diam. Nullam faucibus urna iaculis, suscipit arcu sit amet, elementum ligula. Duis at velit sed arcu condimentum porta ut id sem. Donec et odio ut purus viverra semper.
Integer quam magna, semper sed vehicula eu, maximus ut mauris. Quisque non dolor ornare, pulvinar ex id, imperdiet velit. Suspendisse potenti. In dignissim nibh ut tortor interdum accumsan a sit amet ante. Morbi vehicula odio nulla, ac fermentum augue congue at. Nulla volutpat interdum ex et aliquet. Duis pharetra tellus sit amet nisl congue molestie.
<template>
<spr-sidenav
:quick-actions="quickActions"
has-search
:active-nav="activeNav"
:nav-links="navLinks"
:notification-count="5"
:request-count="10"
:user-menu="userMenu"
@get-navlink-item="handleGetNavLinkItem"
@search="handleSearch"
@notifications="handleNotifications"
>
<template #logo-image>
<img src="@/assets/images/sprout-hr-logo.svg" alt="logo" />
</template>
</spr-sidenav>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import SprSidenav from '@/components/sidenav/sidenav.vue';
const quickActions = ref([
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Leave Request',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Onboarding Request',
description: 'Seamlessly onboard new employees into your Sprout ecosystem',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Certificate of Employee',
description: 'Lorem ipsum dolor sit amet consectetur. ',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
menuHeading: 'Sub Heading 2',
items: [
{
title: 'ReadyWage',
description: 'Request Form',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Workflow',
description: 'Access your hard-earned salary in advance',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Something 1',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Create Something 2',
description: 'Lorem ipsum dolor sit amet consectetur.',
icon: 'ph:house-simple',
iconBgColor: 'purple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
]);
const activeNav = ref({
parentNav: 'Home',
menu: 'Dashboard 1',
submenu: 'Home 2',
});
const navLinks = ref({
top: [
{
parentLinks: [
{
title: 'Home',
icon: 'ph:house-simple',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Employees',
icon: 'ph:users-three',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
parentLinks: [
{
title: 'Payroll',
icon: 'ph:leaf',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Payroll Runs',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Reports',
submenuLinks: [
{
subMenuHeading: '',
items: [
{
title: 'Payroll',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'SSS',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'PHILHEALTH',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
{
menuHeading: 'Sub Heading 2',
items: [
{
title: 'Setup',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Employees',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Money',
icon: 'ph:currency-rub',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Car',
icon: 'ph:wallet',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
menuLinks: [
{
menuHeading: '',
items: [
{
title: 'Car 1',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Car 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
],
bottom: [
{
parentLinks: [
{
title: 'Gallery',
icon: 'ph:address-book',
menuLinks: [
{
menuHeading: 'Sub Heading 1',
items: [
{
title: 'Dashboard 1',
submenuLinks: [
{
subMenuHeading: 'Sub Heading 1',
items: [
{
title: 'Home 1',
redirect: {},
},
{
title: 'Home 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
{
subMenuHeading: 'Sub Heading 2',
items: [
{
title: 'Home 3',
redirect: {
openInNewTab: false,
isAbsoluteURL: true,
link: 'https://www.google.com/',
},
},
{
title: 'Home 4',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
{
title: 'Dashboard 2',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
},
],
},
{
parentLinks: [
{
title: 'Resources',
icon: 'ph:alien',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'News',
icon: 'ph:align-left',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
},
],
});
const handleGetNavLinkItem = (route) => {
console.log(route);
};
const handleSearch = (search) => {
console.log(search);
};
const handleNotifications = (notifications) => {
console.log(notifications);
};
const handleRequest = (request) => {
console.log(request);
};
const userMenu = ref({
name: 'John Rafael M. Arias',
email: 'jarias@sprout.ph',
profileImage: 'https://lh3.googleusercontent.com/ogw/AF2bZyiCP8eaKX7KiduREcMAogl0Ml2TwYJAPTgcKeNap81ztg=s32-c-mo',
items: [
{
title: 'My Profile',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Privacy Policy',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Terms of Service',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
{
title: 'Logout',
icon: 'ph:house-simple',
redirect: {
openInNewTab: false,
isAbsoluteURL: false,
link: '/',
},
},
],
});
</script>API Reference
The following table outlines the available attributes for the Sidenav component:
| Name | Description | Type | Accepted Values |
quick-actions | Shows quick action menu. | Array | [ { title: [string], description: [string], icon: [string], iconBgColor: ['green' | 'purple'], redirect: { openInNewTab: [boolean], isAbsoluteURL: [boolean], link: [string], }, }, ] |
has-search | Shows search button. | boolean | true | false |
active-nav | Set the active state for navigation, including the parent navigation, menu, and submenu. | Object | { parentNav: [string], menu: [string], submenu: [string], } |
nav-links | Will generate navigation links including submenu links. | Array | See Navigation Link |
notification-count | Show notification counter badge | Number | Integer |
request-count | Show request counter badge | Number | Integer |
user-menu | Shows user avatar at the bottom of the sidenavigation along with a menu. | - | See User Menu |
@get-navlink-item | Will return link that is indicated in nav-links. This will be the conection to handle your router push. | - | function |
@search | Handle the search functionality. | - | function |
@notifications | Handle the notifications functionality. | - | function |
@requests | Handle the requests functionality. | - | function |
Product Uses
