There’s some unnecessary shifting around of icons and text while the state of the nav changes between the narrow and wide states.

When changing from wide to narrow:

  • The text disappears (good)
  • The icons get horizontally centered (bad)

When changing from narrow to wide

  • The icons go back to left aligned (ok)
  • The text starts off squished and some menu items wrap. Additionally some of the submenu expand buttons wrap underneath as its opening (bad)

My thought is we could utilize the transitionend event to somehow fix this and make it less janky.

Here's a gif with the animation slowed down.

CommentFileSizeAuthor
#8 Screenshot 2023-08-09 at 9.28.45 AM.png78.08 KBclaireristow
nav-animation.gif280.29 KBmherchel

Issue fork navigation-3378781

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

Utkarsh_33 made their first commit to this issue’s fork.

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: Unassigned » hooroomoo

working on this

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: hooroomoo » Unassigned
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: Unassigned » hooroomoo

hooroomoo opened merge request !44

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: hooroomoo » Unassigned
Status: Active » Needs review
claireristow’s picture

claireristow commented
Status: Needs review » Needs work
StatusFileSize
new Screenshot 2023-08-09 at 9.28.45 AM.png78.08 KB

Thanks for your work on this @Utkarsh_33 and @hooroomoo, it's looking great!

I noticed the following two items that still need fixing:

  1. This item from the issue details still hasn't been addressed: "When changing from wide to narrow: The icons get horizontally centered (bad)"
  2. A new bug has been introduced - the dropdown arrows in the expanded state are right next to the list item (see screenshot). Instead, they should be right aligned to the edge of the sidebar container.
  3. Another bug has been introduced - the "Bookmarks" flyout is no longer working when the sidebar is in the collapsed state. I have also noted this in the PR.

Screenshot of arrow bug

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: Unassigned » hooroomoo
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Needs work » Needs review
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Assigned: hooroomoo » Unassigned
claireristow’s picture

claireristow commented
Assigned: Unassigned » claireristow
Status: Needs review » Needs work

claireristow’s picture

claireristow commented
Assigned: claireristow » Unassigned
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.