diff --git a/src/App.vue b/src/App.vue
index 606f1f07..f024a161 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -84,6 +84,9 @@
MultilingualProgress
+
+ Navigation
+
Orderer
Pagination
diff --git a/src/components/Navigation/Navigation.stories.js b/src/components/Navigation/Navigation.stories.js
new file mode 100644
index 00000000..1030478d
--- /dev/null
+++ b/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: '',
+ }),
+};
+
+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',
+ },
+ ],
+ },
+};
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
new file mode 100644
index 00000000..b222ae74
--- /dev/null
+++ b/src/components/Navigation/Navigation.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 1c0ed870..31a8dba9 100644
--- a/src/main.js
+++ b/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);