Design/UX #22941
openAdmin Bar Refresh
0%
Description
In giving the admin bar a refresh, we will be changing the following:
- remove the CUNY Academic Commons Name and drop down from the top left (this to be confirmed after analytics check)
- Adding My Groups and My Sites to the top Admin Bar
- Add groups and sites into a drop down with a scroll bar
- Refresh the Help Icon
- Refresh the Down carrot by the avatar
- Segment and add new sections to the drop down
- Remove the "fly out" of the groups and sites
- Add: Invitations (with number count)
- Move "My Profile" to the top
- Add "Commons Home" above log out
- Make the notification numbers round with 1-2 numbers and expand like a pill
- make the font Poppins
- Mobile screens curated to designs that show sites, groups, help icon (no text), avatar & notification count
- Mobile screens when on a site simplified even further to leave room for site tools
I'm still thinking about mobile when there are too many icons. A ••• menu might work here
Files
Related issues
Updated by Boone Gorges 5 months ago
- Target version set to 2.6.0
Sara, are you going to be building this as a Figma document for the dev team?
Updated by Sara Cannon 5 months ago
Here you go! https://www.figma.com/design/ePPpJucc02oge8kFA9duFc/CUNY-Navigation?node-id=14251-656&t=3wbeWptHMLQQWRvP-1 I've also added boone and Ray's email to the file
Updated by Boone Gorges 4 months ago
- Category name set to Toolbar
- Assignee changed from Boone Gorges to Raymond Hoh
- Target version changed from 2.6.0 to 2.7.0
Updated by Raymond Hoh 3 months ago
- Related to Design/UX #19624: Mobile Menu Tweaks added
Updated by Raymond Hoh 28 days ago
Hi Sara,
Do you have an updated Figma link? Or if you do not have access to Figma, can you post screenshots of the "My Groups" and "My Sites" dropdown menus when expanded and other assets that haven't already been attached to this ticket such as the Help icon SVG?
Updated by Sara Cannon 25 days ago
Updated by Raymond Hoh 25 days ago
Hi Sara, when I attempt to open the link, I get a message saying that there is an issue with the file sharing options:
Unable to open file
It looks like there’s an issue with this Design file’s sharing settings. We’ve emailed the owner to let them know.
Can you check the Figma permissions?
Updated by Sara Cannon 25 days ago
Updated by Raymond Hoh 17 days ago
I've committed a first pass of the new admin bar refresh design in https://github.com/cuny-academic-commons/cac/commit/0a46a9b216. This is available for testing on cdev. You might need to refresh your browser cache to see the new design.
There's still some work to do for the mobile view, specifically the More overflow menu and the various menu icons that get displayed when the screen width is < 400px, but I'll get to that in later revisions. In the meantime, let me know if you encounter any visual bugs.
Updated by Sara Cannon 8 days ago
- File Screen Recording 2025-12-11 at 10.00.04 PM.mov Screen Recording 2025-12-11 at 10.00.04 PM.mov added
This is looking so great! Can we have the hover states bold like you have it but not make the size of the box it's in expand? hovering moves the vertical lines a bit and it feels better when they stay still. Attaching screen recording that shows the slight movement when the text bolds on hover. All in all though I'm super excited about this change and improvement!!! great work here
Updated by Sara Cannon 7 days ago
I've added to the figma file a slightly refreshed login dropdown
Updated by Sara Cannon 7 days ago
Updated by Raymond Hoh 4 days ago
- File cac-logo-top-left.gif cac-logo-top-left.gif added
From the team meeting on Friday, we talked a tiny bit about adding back a CUNY Academic Commons icon to the admin bar when you are on a sub-site and logged out.
I've mocked up something with the smaller CAC logo with a little hover popup explaining that the current sub-site is part of the CUNY Academic Commons network. The "Learn more about us" button in the GIF links to the main Commons About page. Let me know what you think.
Updated by Raymond Hoh 3 days ago
Hi Sara,
This is where I grabbed the smaller CAC logo: https://gcdi.commons.gc.cuny.edu/cac-logo/. The letters look a little jagged due to some compression though.
Updated by Sara Cannon 1 day ago
I played around with different options, and I like the first one personally. I would love to hear the group's thoughts