pkp/pkp-lib#9890 Implement Collapsible Primary navigation (pkp#391)

* pkp/pkp-lib#9890 Add Tools icon to the Icon Gallery * pkp/pkp-lib#9890 Add new value to the sizeVariant in Button component * pkp/pkp-lib#9890 Add Navigation component * pkp/pkp-lib#9890 Add secondary navigation to the Navigation component * pkp/pkp-lib#9890 Update Navigation's story file to correctly map keys from submenu data * pkp/pkp-lib#9890 Add Administration icon to be used in Navigation * pkp/pkp-lib#9890 Override Button color style for links on hover, active and focus events * pkp/pkp-lib#9890 Update links prop values to match the data that will come from consuming apps * pkp/pkp-lib#9890 Change nav classes to support rtl theme and correctly set the active submenu link * pkp/pkp-lib#9890 Update svg element for Tools icon * pkp/pkp-lib#9890 Make sizeVariant 'iconOnly' only work when there's an icon supplied in Button component * pkp/pkp-lib#9890 Add Catalog icon * pkp/pkp-lib#9890 Add Payment icon * pkp/pkp-lib#9890 Make the navigation bar sticky * pkp/pkp-lib#9890 Add story for long list of items in the navbar * pkp/pkp-lib#9890 Add tooltip to links when nav is collapsed * pkp/pkp-lib#9890 Position the secondary nav as part of main navigation * pkp/pkp-lib#9890 Remove pkp-nav theme and use pkp-tooltip and change trigger to hover * pkp/pkp-lib#9890 Add decorators for Navigation stories to set local storage collapsed state * pkp/pkp-lib#9890 Add abbreviated text for Button when icon is not provided in props * pkp/pkp-lib#9890 Position secondary nav when collapse state changes * pkp/pkp-lin#9890 Remove bg-secondary class in main navigation container * pkp/pkp-lib#9890 Set the top position correctly for the main sidenav container * pkp/pkp-lib#9890 Add tooltip 'focus' trigger * pkp/pkp-lib#9890 Add SideMenu component * pkp/pkp-lib#9890 Add SideNav component for sidebar navigation * pkp/pkp-lib#9890 Add sidemodal story that includes side-menu component * pkp/pkp-lib#9890 Import missing components in navigation component * pkp/pkp-lib#9890 Remove unused Navigation component * pkp/pkp-lib#9890 Update documentation for SideMenu and SideNav components * pkp/pkp-lib#9890 Undo changes made on the Button component * pkp/pkp-lib#9890 Update css styling for side menu component
touhidurabir · Aug 12, 2024 · 5305940 · 5305940
1 parent 2123b86
commit 5305940
Show file tree

Hide file tree

Showing 16 changed files with 1,169 additions and 3 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -62,7 +62,7 @@ setup((app) => {
 		themes: {
 			'pkp-tooltip': {
 				$extend: 'tooltip',
-				triggers: ['click'],
+				triggers: ['hover', 'focus'],
 				delay: {
 					show: 0,
 					hide: 0,

diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-import {defineProps, defineEmits, computed} from 'vue';
+import {computed} from 'vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 const props = defineProps({

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -65,6 +65,7 @@ export const iconGallery = {
 			'Bold',
 			'Bullets',
 			'Cancel',
+			'Catalog',
 			'Complete',
 			'Dashboard',
 			'DecreaseTextSize',
@@ -96,17 +97,20 @@ export const iconGallery = {
 			'MoreOptions',
 			'MySubmissions',
 			'NavDoi',
+			'NavAdmin',
 			'Notifications',
 			'OpenReview',
 			'Orcid',
 			'Overdue',
+			'Payment',
 			'ReadRecommendation',
 			'ReviewAssignments',
 			'ReviewSent',
 			'Search',
 			'Settings',
 			'Sort',
 			'Statistics',
+			'Tools',
 			'Underline',
 			'Url',
 			'UsefulTips',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -43,6 +43,7 @@ import BackButton from './icons/BackButton.vue';
 import Bold from './icons/Bold.vue';
 import Bullets from './icons/Bullets.vue';
 import Cancel from './icons/Cancel.vue';
+import Catalog from './icons/Catalog.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
@@ -74,10 +75,12 @@ import MergeUser from './icons/MergeUser.vue';
 import MoreOptions from './icons/MoreOptions.vue';
 import MySubmissions from './icons/MySubmissions.vue';
 import NavDoi from './icons/NavDoi.vue';
+import NavAdmin from './icons/NavAdmin.vue';
 import Notifications from './icons/Notifications.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
 import Overdue from './icons/Overdue.vue';
+import Payment from './icons/Payment.vue';
 import ReadRecommendation from './icons/ReadRecommendation.vue';
 import ReviewAssignments from './icons/ReviewAssignments.vue';
 import ReviewRequestDeclined from './icons/ReviewRequestDeclined.vue';
@@ -86,6 +89,7 @@ import Search from './icons/Search.vue';
 import Settings from './icons/Settings.vue';
 import Sort from './icons/Sort.vue';
 import Statistics from './icons/Statistics.vue';
+import Tools from './icons/Tools.vue';
 import Underline from './icons/Underline.vue';
 import Url from './icons/Url.vue';
 import UsefulTips from './icons/UsefulTips.vue';
@@ -99,6 +103,7 @@ const svgIcons = {
 	Bold,
 	Bullets,
 	Cancel,
+	Catalog,
 	Complete,
 	Dashboard,
 	DefaultDocument,
@@ -130,10 +135,12 @@ const svgIcons = {
 	MoreOptions,
 	MySubmissions,
 	NavDoi,
+	NavAdmin,
 	Notifications,
 	OpenReview,
 	Orcid,
 	Overdue,
+	Payment,
 	ReadRecommendation,
 	ReviewAssignments,
 	ReviewRequestDeclined,
@@ -142,6 +149,7 @@ const svgIcons = {
 	Settings,
 	Sort,
 	Statistics,
+	Tools,
 	Underline,
 	Url,
 	UsefulTips,

diff --git a/src/components/Icon/icons/Catalog.vue b/src/components/Icon/icons/Catalog.vue
@@ -0,0 +1,60 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M3.14999 21.25H20.2"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M3.2 20.25L6.7 20.15L6.45 2.8L3.3 2.75L3.2 20.25Z"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M7.50001 6.75L7.35001 19.9L10.6 19.8L11 6.85L7.50001 6.75Z"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M12 3.95L11.3 20.05L15.65 20L16.5 4.2L12 3.95Z"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M17 7.10001L16.25 20.25L20.15 20.3L20.85 7.15001L17 7.10001Z"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M17.5 7.1C17.8225 6.61239 18.242 6.19647 18.7323 5.87818C19.2227 5.55988 19.7733 5.34604 20.35 5.25"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M6.45 2.8L7.4 4.5L7.45 6.8"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M6.7 20.15L7.35 19.9"
+			stroke="currentColor"
+			stroke-width="0.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/NavAdmin.vue b/src/components/Icon/icons/NavAdmin.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M17 17C17.4167 17 17.771 16.8543 18.063 16.563C18.355 16.2717 18.5007 15.9173 18.5 15.5C18.4993 15.0827 18.3537 14.7287 18.063 14.438C17.7723 14.1473 17.418 14.0013 17 14C16.582 13.9987 16.228 14.1447 15.938 14.438C15.648 14.7313 15.502 15.0853 15.5 15.5C15.498 15.9147 15.644 16.269 15.938 16.563C16.232 16.857 16.586 17.0027 17 17ZM17 20C17.5167 20 17.9917 19.879 18.425 19.637C18.8583 19.395 19.2083 19.0743 19.475 18.675C19.1083 18.4583 18.7167 18.2917 18.3 18.175C17.8833 18.0583 17.45 18 17 18C16.55 18 16.1167 18.0583 15.7 18.175C15.2833 18.2917 14.8917 18.4583 14.525 18.675C14.7917 19.075 15.1417 19.396 15.575 19.638C16.0083 19.88 16.4833 20.0007 17 20ZM12 22C9.68333 21.4167 7.77067 20.0873 6.262 18.012C4.75333 15.9367 3.99933 13.6327 4 11.1V5L12 2L20 5V10.675C19.6833 10.5417 19.3583 10.4207 19.025 10.312C18.6917 10.2033 18.35 10.1247 18 10.076V6.4L12 4.15L6 6.4V11.1C6 11.8833 6.10433 12.6667 6.313 13.45C6.52167 14.2333 6.81333 14.9793 7.188 15.688C7.56267 16.3967 8.01667 17.0507 8.55 17.65C9.08333 18.2493 9.675 18.7493 10.325 19.15C10.5083 19.6833 10.75 20.1917 11.05 20.675C11.35 21.1583 11.6917 21.5917 12.075 21.975C12.0583 21.975 12.046 21.9793 12.038 21.988C12.03 21.9967 12.0173 22.0007 12 22ZM17 22C15.6167 22 14.4377 21.5123 13.463 20.537C12.4883 19.5617 12.0007 18.3827 12 17C11.9993 15.6173 12.487 14.4383 13.463 13.463C14.439 12.4877 15.618 12 17 12C18.382 12 19.5613 12.4877 20.538 13.463C21.5147 14.4383 22.002 15.6173 22 17C21.998 18.3827 21.5103 19.562 20.537 20.538C19.5637 21.514 18.3847 22.0013 17 22Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Payment.vue b/src/components/Icon/icons/Payment.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_114_79)">
+			<path
+				d="M23.5312 11.9225H23.25V8.54752V5.54752C23.25 4.55068 22.468 3.73332 21.4852 3.67604L21.0037 1.6869C20.8579 1.08469 20.2493 0.71335 19.6472 0.859225L7.97203 3.68565C7.94105 3.67735 7.90861 3.67252 7.875 3.67252H1.875C0.841125 3.67252 0 4.51365 0 5.54752V21.2975C0 22.3314 0.841125 23.1725 1.875 23.1725H21.375C22.4089 23.1725 23.25 22.3314 23.25 21.2975V17.9225H23.5312C23.7897 17.9225 24 17.7122 24 17.4538V12.3913C24 12.1328 23.7897 11.9225 23.5312 11.9225ZM22.5 5.54752V5.54832C22.3119 5.4068 22.0965 5.30012 21.8632 5.23716L21.6759 4.46373C22.1505 4.59568 22.5 5.03143 22.5 5.54752ZM1.875 4.42252H4.92825L1.80023 5.17979C1.79827 5.18016 1.79639 5.18077 1.79447 5.18119L1.78673 5.18307C1.78575 5.1833 1.78477 5.18368 1.78378 5.18396C1.773 5.18663 1.76245 5.18977 1.75205 5.19333C1.75017 5.19399 1.74839 5.19469 1.74656 5.19535C1.73695 5.19887 1.72753 5.20266 1.71825 5.20693C1.71562 5.20815 1.71309 5.20941 1.71052 5.21063C1.70236 5.21462 1.69434 5.21883 1.68656 5.22338C1.68333 5.22526 1.68014 5.22723 1.67695 5.22924C1.67006 5.23355 1.66327 5.23805 1.65666 5.24279C1.65314 5.24532 1.64972 5.2479 1.6463 5.25052C1.6402 5.25521 1.6343 5.26004 1.62853 5.2651C1.62516 5.26805 1.62187 5.27105 1.61864 5.2741C1.61306 5.27935 1.60767 5.28469 1.60242 5.29023C1.59947 5.29332 1.59661 5.29651 1.5938 5.29974C1.58859 5.30565 1.58353 5.31174 1.5787 5.31798C1.57627 5.32107 1.57392 5.32426 1.57162 5.3274C1.5668 5.33405 1.5622 5.34085 1.5578 5.34779C1.55583 5.35088 1.55395 5.35402 1.55208 5.35721C1.54781 5.36438 1.54383 5.37169 1.54008 5.37915C1.53839 5.38252 1.5368 5.3859 1.5352 5.38927C1.53178 5.39663 1.52859 5.40404 1.52564 5.41163C1.52409 5.41562 1.52264 5.41965 1.52123 5.42368C1.5188 5.43071 1.5165 5.43779 1.51444 5.44505C1.51298 5.45012 1.51172 5.45527 1.5105 5.46043C1.509 5.46671 1.50759 5.47299 1.50642 5.47937C1.5052 5.48583 1.50431 5.4924 1.50342 5.49891C1.50272 5.50426 1.50206 5.50955 1.50159 5.51494C1.50094 5.52254 1.50061 5.53023 1.50042 5.53791C1.50033 5.54101 1.49995 5.54405 1.49995 5.54719C1.49995 5.54898 1.50019 5.55066 1.50023 5.55244C1.50033 5.5599 1.5008 5.56735 1.50136 5.5749C1.50178 5.58038 1.50216 5.58587 1.50277 5.5913C1.50352 5.59754 1.50455 5.60377 1.50563 5.61005C1.50675 5.61662 1.50788 5.62318 1.50933 5.62965C1.5098 5.63166 1.50998 5.63368 1.51045 5.63569C1.51134 5.63926 1.51261 5.64263 1.51355 5.64615C1.51533 5.65276 1.5172 5.65932 1.51936 5.66579C1.52133 5.67169 1.52348 5.67746 1.52573 5.68318C1.52784 5.68862 1.52995 5.69396 1.53234 5.69926C1.5353 5.70591 1.53848 5.71238 1.54177 5.7188C1.54383 5.72279 1.54589 5.72682 1.54809 5.73071C1.55217 5.73798 1.55648 5.74501 1.56098 5.75194C1.56286 5.7548 1.56473 5.75766 1.56666 5.76048C1.57181 5.76793 1.57725 5.77515 1.58292 5.78218C1.58461 5.78429 1.58634 5.78644 1.58812 5.78851C1.59422 5.79573 1.60055 5.80271 1.60716 5.80946C1.60889 5.81124 1.61062 5.81302 1.61245 5.81476C1.61925 5.82141 1.62623 5.82779 1.6335 5.83388C1.63547 5.83552 1.63744 5.83716 1.63945 5.8388C1.64672 5.84466 1.65417 5.85029 1.66191 5.85558C1.66416 5.85718 1.66645 5.85873 1.66875 5.86023C1.67648 5.86533 1.68441 5.87012 1.69247 5.87466C1.69491 5.87602 1.69734 5.87734 1.69978 5.87865C1.70812 5.88305 1.71666 5.88713 1.72533 5.89093C1.72763 5.89191 1.72992 5.89294 1.73227 5.89388C1.7415 5.89773 1.75087 5.9011 1.76044 5.90419C1.76227 5.90476 1.76409 5.90537 1.76592 5.90593C1.77638 5.90912 1.78692 5.91183 1.79766 5.91408C1.79869 5.91427 1.79967 5.91455 1.8007 5.91474C1.81242 5.91713 1.82428 5.91891 1.83623 5.92018C1.83647 5.92018 1.8367 5.92023 1.83694 5.92027C1.84941 5.92154 1.86197 5.92219 1.87467 5.92219C1.87477 5.92219 1.87491 5.92219 1.875 5.92219H1.87594C1.88063 5.92219 1.88522 5.92238 1.88991 5.92219H19.5C19.7071 5.92219 19.875 5.75429 19.875 5.54719C19.875 5.3401 19.7071 5.17219 19.5 5.17219H5.01867L19.8237 1.58813C20.024 1.53952 20.2263 1.66313 20.2747 1.86338L21.0758 5.17229H21.0002C20.7931 5.17229 20.6252 5.34019 20.6252 5.54729C20.6252 5.75438 20.7931 5.92229 21.0002 5.92229H21.375C21.4127 5.92229 21.45 5.92426 21.4868 5.92787C21.5014 5.93058 21.5161 5.93237 21.531 5.93335C22.0778 6.00957 22.5 6.47991 22.5 7.04729V7.04855C22.1864 6.81258 21.7968 6.67252 21.375 6.67252H1.875C1.25466 6.67252 0.75 6.16782 0.75 5.54752C0.75 4.92723 1.2547 4.42252 1.875 4.42252ZM22.5 21.2975C22.5 21.9178 21.9953 22.4225 21.375 22.4225H1.875C1.25466 22.4225 0.75 21.9178 0.75 21.2975V7.04649C1.06359 7.28246 1.45322 7.42252 1.875 7.42252H21.375C21.9953 7.42252 22.5 7.92723 22.5 8.54752V11.9225H17.0157C16.7314 11.9225 16.5 12.1539 16.5 12.4382V17.4068C16.5 17.6911 16.7314 17.9225 17.0157 17.9225H22.5V21.2975ZM23.25 17.1725H17.25V12.6725H22.8696C22.8714 12.6725 22.8732 12.6728 22.875 12.6728C22.8768 12.6728 22.8786 12.6726 22.8804 12.6725H23.25V17.1725Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M20.25 14.5475C20.0429 14.5475 19.875 14.7154 19.875 14.9225C19.875 15.1293 19.7068 15.2975 19.5 15.2975C19.2932 15.2975 19.125 15.1293 19.125 14.9225C19.125 14.7158 19.2932 14.5475 19.5 14.5475C19.7071 14.5475 19.875 14.3796 19.875 14.1725C19.875 13.9654 19.7071 13.7975 19.5 13.7975C18.8797 13.7975 18.375 14.3022 18.375 14.9225C18.375 15.5428 18.8797 16.0475 19.5 16.0475C20.1203 16.0475 20.625 15.5428 20.625 14.9225C20.625 14.7154 20.4571 14.5475 20.25 14.5475Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_114_79">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Tools.vue b/src/components/Icon/icons/Tools.vue
@@ -0,0 +1,19 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_60_16)">
+			<path
+				d="M13.3333 9.33334H10.6667C10.4899 9.33334 10.3203 9.40357 10.1953 9.5286C10.0702 9.65362 10 9.82319 10 10V14C10 14.1768 10.0702 14.3464 10.1953 14.4714C10.3203 14.5964 10.4899 14.6667 10.6667 14.6667H13.3333C13.5101 14.6667 13.6797 14.5964 13.8047 14.4714C13.9298 14.3464 14 14.1768 14 14V10C14 9.82319 13.9298 9.65362 13.8047 9.5286C13.6797 9.40357 13.5101 9.33334 13.3333 9.33334ZM13.0667 13.7333H10.9333V10.2667H13.0667V13.7333Z"
+				fill="currentColor"
+			/>
+			<path
+				d="M22.4733 8.25333L19.7467 5.52666C19.6225 5.4035 19.4549 5.33407 19.28 5.33333H15.9467V4.03333C15.9557 3.68303 15.8265 3.34326 15.5869 3.0875C15.3474 2.83174 15.0168 2.68056 14.6667 2.66666H9.22667C9.05557 2.6734 8.88755 2.71439 8.73258 2.78723C8.5776 2.86006 8.43881 2.96325 8.32443 3.09068C8.21005 3.21812 8.1224 3.36721 8.06668 3.52913C8.01095 3.69104 7.98828 3.86249 8.00001 4.03333V5.33333H4.72001C4.63227 5.33282 4.54529 5.34964 4.46407 5.38282C4.38284 5.41599 4.30897 5.46488 4.24667 5.52666L1.52667 8.25333C1.46489 8.31562 1.416 8.3895 1.38283 8.47073C1.34965 8.55195 1.33283 8.63893 1.33334 8.72666V18.6667C1.33334 19.0203 1.47382 19.3594 1.72386 19.6095C1.97391 19.8595 2.31305 20 2.66667 20H21.3333C21.687 20 22.0261 19.8595 22.2761 19.6095C22.5262 19.3594 22.6667 19.0203 22.6667 18.6667V8.72C22.6659 8.5451 22.5965 8.3775 22.4733 8.25333ZM9.33334 4H14.6667V5.33333H9.33334V4ZM21.3333 11.3333H14.6667V12.62H21.3333V18.6667H2.66667V12.62H9.33334V11.3333H2.66667V9L5.00001 6.66666H19L21.3333 9V11.3333Z"
+				fill="currentColor"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_60_16">
+				<rect width="24" height="24" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>