Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement side menu navigation component #9890

Closed
jardakotesovec opened this issue Apr 16, 2024 · 0 comments
Closed

Implement side menu navigation component #9890

jardakotesovec opened this issue Apr 16, 2024 · 0 comments
Assignees
@blesildaramirez
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Milestone
3.5.0 LTS

Comments

@jardakotesovec
Copy link
Contributor

jardakotesovec commented Apr 16, 2024 •
edited by blesildaramirez
Loading

Goal
Introduce new Vue.js component that would handle a sidebar navigation with expandable submenu items and integrate it to ojs&ops&omp.

Latest mockups available: https://www.figma.com/file/Wf7sDlUg2372jaKKTJ0Mgz/OJS-3.4-3.5?type=design&node-id=4369-21479&mode=design&t=R90FLzq8vXy4pSVd-4

Notes

  • Use existing Icon and Badge components
  • Ensure correct accessibility
  • Add new menu to storybook

Following will be handled in separate issue(s)
- Moving functionality from top navigation to primary navigation (user account, language switching,)
- Secondary navigation for submission listing (thats already implemented separately)
- Secondary navigation for other cases, where the navigation is currently handled via tabs is also outside of the scope of this one
Update: The design was revised, and we will no longer implement a secondary navigation, Instead, we will incorporate these as child menus.

Pull requests:
ui-library: pkp/ui-library#408
pkp-lib: #10390
customBlockManager: pkp/customBlockManager#87 (plugin)
staticPages: pkp/staticPages#85 (plugin)
webFeed: pkp/webFeed#7 (plugin)

ojs: pkp/ojs#4435
omp: pkp/omp#1699
ops: pkp/ops#773

Other ui-library PRs (already merged)
pkp/pkp-lib#9890 Implement Collapsible Primary navigation
pkp/pkp-lib#9890 Add actionArgs parameter for sidemenu component
pkp/pkp-lib#9890 Add useSideMenu composable
pkp/pkp-lib#9890 Handle SideMenu state through useSideMenu api
pkp/pkp-lib#9890 Set item to active when items don't have child items
pkp/pkp-lib#9890 Add 'selectedItem' to useSideMenu api
@jardakotesovec jardakotesovec added Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience labels Apr 16, 2024
@jardakotesovec jardakotesovec added this to the 3.5.0 LTS milestone Apr 16, 2024
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 25, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Tools icon to the Icon Gallery
0b4b57f
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 25, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add new value to the sizeVariant in Button component
070d8ff
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 25, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Navigation component
d243b58
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 26, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add secondary navigation to the Navigation component
0f11d98
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 30, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update Navigation's story file to correctly map keys…
cd77e95 
… from submenu data
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Apr 30, 2024
@blesildaramirez
pkp/pkp-lib#9890 Revert changes related to outdated files
1a4aed4
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 2, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Administration icon to be used in Navigation
cd21f30
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 3, 2024
@blesildaramirez
pkp#9890 Register new Navigation component from ui-library
4f02dc5
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 3, 2024
@blesildaramirez
pkp#9890 Define icons to be used for each sidebar navigation items
4a83207
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 3, 2024
@blesildaramirez
pkp#9890 Use new navigation component from ui-library
e1126f9
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 3, 2024
@blesildaramirez
pkp/pkp-lib#9890 Override Button color style for links on hover, acti…
606a933 
…ve and focus events
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 3, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update links prop values to match the data that will…
d11605b 
… come from consuming apps
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 3, 2024
@blesildaramirez
pkp/pkp-lib#9890 Change nav classes to support rtl theme and correctl…
1696fa7 
…y set the active submenu link
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue May 3, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Issues icon from the primary navigation link
b23a3a1
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue May 3, 2024
@blesildaramirez
pkp/pkp-lib#9890 Submodule update ##blesildaramirez/i9890##
a53cd61
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 6, 2024
@blesildaramirez
pkp#9890 Register new Navigation component from ui-library
c76000a
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 6, 2024
@blesildaramirez
pkp#9890 Define icons to be used for each sidebar navigation items
aeb54a8
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 6, 2024
@blesildaramirez
pkp#9890 Use new navigation component from ui-library
4e06c6e
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue May 6, 2024
@blesildaramirez
pkp#9890 Add icons for Announcements and Insitutions links
90afad3
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 6, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update svg element for Tools icon
6422de2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 6, 2024
@blesildaramirez
pkp/pkp-lib#9890 Make sizeVariant 'iconOnly' only work when there's a…
970d605 
…n icon supplied in Button component
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 6, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Catalog icon
323adf0
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue May 6, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add icon to be used for Catalog link
39fcc31
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 7, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add Payment icon
5e9a931
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 9, 2024
@blesildaramirez
pkp/pkp-lib#9890 Make the navigation bar sticky
b3964f2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue May 9, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add story for long list of items in the navbar
a656f4f
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Fix intermittent hidden wizard step buttons when run…
5522257 
…ning cypress tests for SubmissionWizard
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update target selector for nav items
6e059db
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update target selector for nav items in cypress tests
5ecb45c
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Remove excess cypress click script for CreateContext…
50e00dc 
… file
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Undo {force: true} updates when clicking buttons on …
b6ad095 
…SubmissionWizard cypress test
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Submodule update ##blesildaramirez/i9890##
ddedfd4
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Re-add {force:true} when clicking buttons in Submiss…
075fb18 
…ionWizard cypress test
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Submodule update ##blesildaramirez/i9890##
f9908e4
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add icon to be used for Catalog link
e64e046
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update cypress tests related to new sidebar navigation
1c7aa7d
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update target selector for nav items in cypress tests
c037a3a
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Add {force:true} when clicking wizard step buttons
7ade309
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Submodule update ##blesildaramirez/i9890##
53c6a8b
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update cypress tests related to new sidebar navigation
bdc1bcd
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update target selector for nav items in cypress tests
10a49ce
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Submodule update ##blesildaramirez/i9890##
12d4e16
blesildaramirez added a commit to pkp/customBlockManager that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update cypress test related to the new sidebar navig… (
8222089 
#87)

* pkp/pkp-lib#9890 Update cypress test related to the new sidebar navigation

* pkp/pkp-lib#9890 Update target selector for nav items in cypress test
blesildaramirez added a commit to pkp/staticPages that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update cypress test related to new sidebar navigation (
17be34c 
#85)

* pkp/pkp-lib#9890 Update cypress test related to new sidebar navigation

* pkp/pkp-lib#9890 Update target selector for nav items in cypress tests
blesildaramirez added a commit to pkp/webFeed that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update cypress test related to new sidebar navigation (
12c9e93 
#7)

* pkp/pkp-lib#9890 Update cypress test related to new sidebar navigation

* pkp/pkp-lib#9890 Update target selector for nav items in cypress tests
blesildaramirez added a commit to pkp/ui-library that referenced this issue Sep 18, 2024
@blesildaramirez
pkp/pkp-lib#9890 Update the design for the focused item state in Side…
3d775e8 
…Menu (#408)

* pkp/pkp-lib#9890 Define outline config in tailwind

* pkp/pkp-lib#9890 Map index in items data for sidemenu component

* pkp/pkp-lib#9890 Define border and outline classes for SideMenu component

* pkp/pkp-lib#9890 Update menu items mapping in sidenav for sidemenu

* pkp/pkp-lib#9890 Update links to sidemenu stories

* pkp/pkp-lib#9890 Add command on root items to navigate to links

* pkp/pkp-lib#9890 Add new colorVariant 'attention' to Badge component

* pkp/pkp-lib#9890 Remove added outlineColor in tailwind config

* pkp/pkp-lib#9890 Change background color when an item is infocus in sidemenu component

* pkp/pkp-lib#9890 Add onActionFn parameter in useSideMenu api and map item.command function to handle click events

* pkp/pkp-lib#9890 Add link color override in DropdownActions component

* pkp/pkp-lib#9890 Add comment on setting the css property for itemlink in SideMenu component

* pkp/pkp-lib#9890 Use SideNav component in Page story

* pkp/pkp-lib#9890 Remove app__nav css in Page container vue

* pkp/pkp-lib#9890 Wrap item label in a span - SideMenu component

* pkp/pkp-lib#9890 Update items when links get updated in SideNav component
blesildaramirez added a commit that referenced this issue Sep 18, 2024
@blesildaramirez
#9890 Implement new sidebar navigation component to OJS/OMP/OPS (#10390)
d731fde 
* #9890 Register new Navigation component from ui-library

* #9890 Define icons to be used for each sidebar navigation items

* #9890 Use new navigation component from ui-library

* #9890 Add icons for Announcements and Insitutions links

* #9890 Change tooltip trigger from click to hover

* #9890 Define urls for Settings and Statistics links for primary navigation

* #9890 Remove 'Back Button' in top navbar

* #9890 Add tooltip 'hover' trigger

* #9890 Remove url in Settings and Statistics in SideNav

* #9890 Use SideNav component as the navigation component for the app

* #9890 Fix hidden height in screenready only table in statistics pages

* #9890 Remove added PkpNavigation.php component

* #9890 Remove addMargin in side menu data

* #9890 Update cypress test for related to sidebar navigation

* #9890 Update target selector for sidenav items in cypress testing

* #9890 Update target selector for disabling announcements in cypress test

* #9890 Update Announcements cypress test

* #9890 Update more of cypress test that targets sidenav items

* #9890 Correct the Administration link to be clicked for Jobs cypress test

* #9890 Update nav target selector for cypress tests
blesildaramirez added a commit to pkp/ojs that referenced this issue Sep 18, 2024
@blesildaramirez
Merge pull request #4435 from blesildaramirez/i9890
ca54c05 
pkp/pkp-lib#9890 [OJS] - Implement new sidebar navigation
blesildaramirez added a commit to pkp/omp that referenced this issue Sep 18, 2024
@blesildaramirez
Merge pull request #1699 from blesildaramirez/i9890
3a4e528 
pkp/pkp-lib#9890 [OMP] - Implement new sidebar navigation
blesildaramirez added a commit to pkp/ops that referenced this issue Sep 18, 2024
@blesildaramirez
Merge pull request #773 from blesildaramirez/i9890
82afbd2 
pkp/pkp-lib#9890 [OPS] - Implement new sidebar navigation
@blesildaramirez blesildaramirez changed the title Implement Collapsible Primary navigation Implement side menu navigation component Sep 19, 2024
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 11, 2024
@blesildaramirez
pkp/pkp-lib#9890 Change how expectedKeys are set when using useSideMe…
bc201ac 
…nu API
blesildaramirez added a commit to pkp/ui-library that referenced this issue Oct 11, 2024
@blesildaramirez
pkp/pkp-lib#9890 Change how expectedKeys are set when using useSideMe…
3f74ed3 
…nu API (#425)
jardakotesovec added a commit to pkp/ui-library that referenced this issue Oct 17, 2024
@jardakotesovec
pkp/pkp-lib#9890 don't affect other expandedKeys when using setActive…
5b972e8 
…ItemKey
ipula pushed a commit to ipula/ui-library that referenced this issue Oct 22, 2024
@jardakotesovec @ipula
pkp/pkp-lib#9890 don't affect other expandedKeys when using setActive…
a3ddbe5 
…ItemKey
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@blesildaramirez blesildaramirez

Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. UI/UX Issues affecting the user interface/user experience
Projects
None yet
Milestone
3.5.0 LTS
Development

No branches or pull requests
2 participants
@jardakotesovec @blesildaramirez