pkp/pkp-lib#9890 Add Navigation component

src/App.vue

@@ -84,6 +84,9 @@
 					MultilingualProgress
 				</router-link>
 			</li>
+			<li>
+				<router-link to="/component/Navigation">Navigation</router-link>
+			</li>
 			<li><router-link to="/component/Orderer">Orderer</router-link></li>
 			<li>
 				<router-link to="/component/Pagination">Pagination</router-link>

src/components/Navigation/Navigation.stories.js

@@ -0,0 +1,164 @@
+import Navigation from './Navigation.vue';
+
+export default {
+	title: 'Components/Navigation',
+	component: Navigation,
+	render: (args) => ({
+		components: {Navigation},
+		setup() {
+			return {args};
+		},
+		template: '<Navigation v-bind="args" />',
+	}),
+};
+
+export const Default = {
+	args: {
+		ariaLabel: 'Site Nav',
+		links: [
+			{
+				name: 'Dashboards',
+				url: '#',
+				isCurrent: true,
+				icon: 'Dashboard',
+				addMargin: true,
+			},
+			{
+				name: 'My Review Assignments',
+				url: '#',
+				isCurrent: false,
+				icon: 'ReviewAssignments',
+			},
+			{
+				name: 'My Submissions as Author',
+				url: '#',
+				isCurrent: false,
+				icon: 'MySubmissions',
+			},
+			{
+				name: 'Notifications (10)',
+				url: '#',
+				isCurrent: false,
+				icon: 'Notifications',
+			},
+			{
+				name: 'Issues',
+				url: '#',
+				isCurrent: false,
+				icon: 'Issues',
+			},
+			{
+				name: 'Announcements',
+				url: '#',
+				isCurrent: false,
+				icon: 'Announcements',
+			},
+			{
+				name: 'DOIs',
+				url: '#',
+				isCurrent: false,
+				icon: 'NavDoi',
+			},
+			{
+				name: 'Institutes',
+				url: '#',
+				isCurrent: false,
+				icon: 'Institutes',
+			},
+			{
+				name: 'Settings',
+				icon: 'Settings',
+				url: '#',
+				addMargin: true,
+				submenu: [
+					{
+						name: 'Journal',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Website',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Workflow',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Distribution',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Users & Roles',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+				],
+			},
+			{
+				name: 'Statistics',
+				icon: 'Statistics',
+				url: '#',
+				submenu: [
+					{
+						name: 'Articles',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Issues',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Journal',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Editorial Activity',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Users',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+					{
+						name: 'Reports',
+						url: '#',
+						isCurrent: false,
+						icon: '',
+					},
+				],
+			},
+			{
+				name: 'Tools',
+				url: '#',
+				isCurrent: false,
+				icon: 'Tools',
+			},
+			{
+				name: 'Help',
+				url: '#',
+				addMargin: true,
+				isCurrent: false,
+				icon: 'Help',
+			},
+		],
+	},
+};

src/components/Navigation/Navigation.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="flex h-screen">
+		<nav
+			class="text-xs border-l border-r border-light pl-4 pr-4 pt-4 leading-6"
+			:aria-label="ariaLabel"
+		>
+			<ul>
+				<li>
+					<PkpButton
+						:size-variant="collapsed ? 'default' : 'iconOnly'"
+						:icon="collapsed ? 'BackButton' : 'Expand'"
+						:inline="true"
+						@click="toggleNav"
+					>
+						Collapse Main Menu
+					</PkpButton>
+				</li>
+				<li
+					v-for="(link, index) in links"
+					:key="index"
+					class="mt-2"
+					:class="link.addMargin ? 'mt-8' : ''"
+					@click="handleClick(index)"
+				>
+					<PkpButton
+						element="a"
+						:href="link.url"
+						:is-active="link.isCurrent"
+						:is-secondary="!link.isCurrent"
+						:size-variant="collapsed ? 'default' : 'iconOnly'"
+						:icon="link.icon"
+						:inline-icon="true"
+					>
+						{{ link.name }}
+					</PkpButton>
+				</li>
+			</ul>
+		</nav>
+	</div>
+</template>
+
+<script setup>
+import {defineProps, ref} from 'vue';
+
+const props = defineProps({
+	links: {
+		type: Array,
+		required: true,
+		validator: (value) => {
+			return value.every((item) => 'name' in item);
+		},
+	},
+	ariaLabel: {
+		type: String,
+		default: 'Site Navigation',
+	},
+});
+
+const collapsed = ref(false);
+
+function toggleNav() {
+	collapsed.value = !collapsed.value;
+}
+
+function handleClick(index) {
+	props.links.forEach((link, i) => {
+		link.isCurrent = i === index;
+	});
+}
+</script>

src/main.js

@@ -17,6 +17,7 @@ import VueScrollTo from 'vue-scrollto';
 import Badge from '@/components/Badge/Badge.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import Navigation from '@/components/Navigation/Navigation.vue';
 import Notification from '@/components/Notification/Notification.vue';
 import Panel from '@/components/Panel/Panel.vue';
 import PanelSection from '@/components/Panel/PanelSection.vue';
@@ -114,6 +115,7 @@ vueApp.mixin(GlobalMixins);
 vueApp.component('Badge', Badge);
 vueApp.component('Dropdown', Dropdown);
 vueApp.component('Icon', Icon);
+vueApp.component('Navigation', Navigation);
 vueApp.component('Notification', Notification);
 vueApp.component('Panel', Panel);
 vueApp.component('PanelSection', PanelSection);