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

Small Screen Responsiveness top menu nav Hamburger - Student #3900

Closed
3 of 5 tasks
Joshua-Lakusta opened this issue Nov 6, 2024 · 2 comments
Closed
3 of 5 tasks

Small Screen Responsiveness top menu nav Hamburger - Student #3900

Joshua-Lakusta opened this issue Nov 6, 2024 · 2 comments
Assignees
@sh16011993 @ninosamson @JerPearson @Joshua-Lakusta
Labels
Student Student Features
Milestone
Full-Time Student...

Comments

@Joshua-Lakusta
Copy link
Collaborator

Joshua-Lakusta commented Nov 6, 2024 •
edited by dheepak-aot
Loading

User Story:
As a student, I'd like to be able to access SIMS using my mobile phone as I do not have a tablet, laptop or computer and I am completing my studies with only my phone. In general, most of SIMS student account is mobile responsive, but needs some slight tweaks to ensure users can navigate.

Acceptance Criteria:

  • Add a hamburger menu to allow for the top bar navigation
  • Hamburger menu to be placed on the right
  • Default collapse
  • Hamburger menu configuration example. Would collapse to just Menu.
    Menu
    Home
    Applications
    File Uploader
    Request a Change
    Profile
    Account Activity
    Overawards
    Log Out

image.png

As a reference for ACs - can test on (reference iPhone 12/Samsung Galaxy 12).

Technical

  • Use as much as possible the out-of-box behavior of the Vue components, which means, even if the menu needs to be positioned in some other way, have it implemented and show the business the out-of-box behavior.
@Joshua-Lakusta Joshua-Lakusta added Business Items under Business Consideration Student Student Features labels Nov 6, 2024
@Joshua-Lakusta Joshua-Lakusta changed the title Copy of Small Screen Responsiveness for modal and top menu nav - Student Small Screen Responsiveness top menu nav Hamburger - Student Nov 6, 2024
@CarlyCotton CarlyCotton added Dev & Architecture Development and Architecture and removed Business Items under Business Consideration labels Nov 12, 2024
@andrewsignori-aot andrewsignori-aot removed the Dev & Architecture Development and Architecture label Dec 10, 2024
@sh16011993 sh16011993 self-assigned this Jan 15, 2025
@Joshua-Lakusta
Copy link
Collaborator Author

Updated AC on how the menu should look after discussion with Shashank.

@sh16011993
Copy link
Collaborator

Thanks @Joshua-Lakusta

sh16011993 added a commit that referenced this issue Jan 21, 2025
@sh16011993
#3900 - Small screen responsiveness: Top Menu Nav Hamburger
43f3c63
github-merge-queue bot pushed a commit that referenced this issue Jan 23, 2025
@sh16011993
#3900 - Small screen responsiveness: Top Menu Nav Hamburger (#4272)
6cdc2f8 
### As a part of this PR, the following have been completed:

1) Added a hamburger menu to allow for the top bar navigation when the
screen size is reduced.
2) The modal dialogs throughout the application have been updated to use
the `useDisplay` composable.

**Video representing the demo for the navigation drawer and the menu:**


https://github.com/user-attachments/assets/1c6d4f86-e4f3-402a-bcb6-067e275300e3

**Video representing the demo for the modal dialogs:**


https://github.com/user-attachments/assets/aa777d6c-6756-497f-a7cb-d55eef380838
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sh16011993 sh16011993

@ninosamson ninosamson

@JerPearson JerPearson

@Joshua-Lakusta Joshua-Lakusta

Labels
Student Student Features
Projects
None yet
Milestone
Full-Time Students MVP
Development

No branches or pull requests
6 participants
@sh16011993 @ninosamson @andrewsignori-aot @JerPearson @Joshua-Lakusta @CarlyCotton