-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
diff --git a/src/components/SideMenu/SideMenu.stories.js b/src/components/SideMenu/SideMenu.stories.js
index 78b61da34..9d0214bd9 100644
--- a/src/components/SideMenu/SideMenu.stories.js
+++ b/src/components/SideMenu/SideMenu.stories.js
@@ -7,19 +7,13 @@ export default {
render: (args) => ({
components: {SideMenu},
setup() {
- const {activeItemKey, setExpandedKeys} = useSideMenu('action_required');
+ const {sideMenuProps, setExpandedKeys, setActiveItemKey} =
+ useSideMenu('action_required');
- args.expandedKeys = setExpandedKeys([
- 'action_required',
- 'editorial_dashboard',
- ]);
+ setExpandedKeys(['action_required', 'editorial_dashboard']);
function startNewSubmission(actionArgs) {
- console.log('startNewSubmission clicked', actionArgs);
- }
-
- function otherAction(actionArgs) {
- console.log('otherAction clicked', actionArgs);
+ setActiveItemKey(actionArgs.key);
}
function handleActions(action, actionArgs) {
@@ -27,17 +21,14 @@ export default {
case 'startNewSubmission':
startNewSubmission(actionArgs);
break;
- case 'otherAction':
- otherAction(actionArgs);
- break;
default:
console.error(`No handler for action: ${action}`);
}
}
- return {args, activeItemKey, handleActions};
+ return {args, sideMenuProps, handleActions};
},
template:
- '',
+ '',
}),
};
@@ -174,7 +165,6 @@ export const Default = {
{
label: 'Start a New Submission',
key: 'start_a_new_submission',
- link: '#',
action: 'startNewSubmission',
actionArgs: {
param1: 1,
@@ -229,14 +219,12 @@ export const WithColorStripe = {
setup() {
const activeItemKey = 'submission_stages';
const expandedKeys = ['submission_stages'];
- const {setExpandedKeys} = useSideMenu(activeItemKey);
+ const {sideMenuProps, setExpandedKeys} = useSideMenu(activeItemKey);
- args.activeItemKey = activeItemKey;
- args.expandedKeys = setExpandedKeys(expandedKeys);
- return {args};
+ setExpandedKeys(expandedKeys);
+ return {args, sideMenuProps};
},
- template:
- '',
+ template: '',
}),
args: {
items: [
@@ -304,21 +292,19 @@ export const ExpandedMenu = {
setup() {
const activeItemKey = 'review_round_1';
const expandedKeys = ['workflow', 'review', 'publication'];
- const {setExpandedKeys} = useSideMenu(activeItemKey);
+ const {sideMenuProps, setExpandedKeys} = useSideMenu(activeItemKey);
- args.activeItemKey = activeItemKey;
- args.expandedKeys = setExpandedKeys(expandedKeys);
- return {args};
+ setExpandedKeys(expandedKeys);
+ return {args, sideMenuProps};
},
- template:
- '',
+ template: '',
}),
args: {
items: [
{
label: 'Workflow',
key: 'workflow',
- icon: 'Dashboard',
+ icon: 'Workflow',
items: [
{
label: 'Submission',
@@ -358,7 +344,7 @@ export const ExpandedMenu = {
{
label: 'Publication',
key: 'publication',
- icon: 'MySubmissions',
+ icon: 'Publication',
isOpen: true,
items: [
{
diff --git a/src/components/SideMenu/SideMenu.vue b/src/components/SideMenu/SideMenu.vue
index 8367765b6..8c7100f32 100644
--- a/src/components/SideMenu/SideMenu.vue
+++ b/src/components/SideMenu/SideMenu.vue
@@ -1,9 +1,10 @@
props.activeItemKey,
- (newActiveItemKey) => {
- localActiveItemKey.value = newActiveItemKey;
- },
-);
-
-const localExpandedKeys = ref({...props.expandedKeys});
-watch(
- () => props.expandedKeys,
- (newExpandedKeys) => {
- localExpandedKeys.value = {...newExpandedKeys};
- },
-);
-
// Maps the level attributes which are necessary to render the nested menu
function mapItems(_items, level = 1) {
const result = [];
@@ -120,7 +107,7 @@ function mapItems(_items, level = 1) {
return result;
}
-const items = reactive(mapItems(props.items));
+const items = computed(() => mapItems(props.items));
const navigationStyling = {
headerContent: () => {
@@ -148,16 +135,18 @@ const navigationStyling = {
};
function handleClick(item) {
- localActiveItemKey.value = item.key;
- emit('update:activeItemKey', localActiveItemKey.value);
-
if (item.action) {
emit('action', item.action, {...item.actionArgs, key: item.key});
}
+
+ if (item.link && !item.items) {
+ emit('update:activeItemKey', item.key);
+ }
}
function isActive(item) {
- return localActiveItemKey.value && item?.key === localActiveItemKey.value;
+ const currentActiveKey = props.activeItemKey;
+ return currentActiveKey && currentActiveKey === item?.key;
}
function getButtonStyles(item) {
@@ -198,6 +187,7 @@ function getButtonStyles(item) {