Content
View differences
Updated by Parimal Satyal over 1 year ago
#### **Buggy behaviour** **Context**
Currently, sidebar items has too many alignment points. Consider this comparison between sidebar items in Admininstration (1st level), Notifications and Meetings (2nd level):
<img class="image_resized op-uc-image op-uc-image_inline" style="width:1161px;" src="/api/v3/attachments/200067/content">
The lines represent:
* Pink: Base left margin, 1st level
* Yellow:
* Base left margin, 2nd level
* Sub-header
* Cyan: Base left margin, Notificaiton center (when there are icons)
* Light pink: Text when there are icons (except Notifications)
* Blue:
* Headings, 2nd level
* Project selector (top nav)
Notifications is particularly problematic, because there are four alignment points in just that one sidebar:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:972px;" src="/api/v3/attachments/200068/content">
Some of these problems might have been already been fixed but reintroduced with new margins and paddings introduced by Primer.
#### Expected Behaviour **Acceptance criteria**
* Implement just two alignment points:
* **Base left margin:**
* the same for 1st and 2nd level)
* sub-headings
* **Second alignment point:**
* Items with icons
* Headings (with back icon, icon will be in base left margin)
* Aligned with project selector (top-nav)
#### **Visuals**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:257px;" src="/api/v3/attachments/200069/content">**
Figma link: [https://www.figma.com/design/fWIF9BCEE03xNKNKxiKg9I/Sidebar-upgrades?node-id=302-979](https://www.figma.com/design/fWIF9BCEE03xNKNKxiKg9I/Sidebar-upgrades?node-id=302-979)
Currently, sidebar items has too many alignment points. Consider this comparison between sidebar items in Admininstration (1st level), Notifications and Meetings (2nd level):
<img class="image_resized op-uc-image op-uc-image_inline" style="width:1161px;" src="/api/v3/attachments/200067/content">
The lines represent:
* Pink: Base left margin, 1st level
* Yellow:
* Base left margin, 2nd level
* Sub-header
* Cyan: Base left margin, Notificaiton center (when there are icons)
* Light pink: Text when there are icons (except Notifications)
* Blue:
* Headings, 2nd level
* Project selector (top nav)
Notifications is particularly problematic, because there are four alignment points in just that one sidebar:
<img class="image_resized op-uc-image op-uc-image_inline" style="width:972px;" src="/api/v3/attachments/200068/content">
Some of these problems might have been already been fixed but reintroduced with new margins and paddings introduced by Primer.
#### Expected Behaviour
* Implement just two alignment points:
* **Base left margin:**
* the same for 1st and 2nd level)
* sub-headings
* **Second alignment point:**
* Items with icons
* Headings (with back icon, icon will be in base left margin)
* Aligned with project selector (top-nav)
#### **Visuals**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:257px;" src="/api/v3/attachments/200069/content">**
Figma link: [https://www.figma.com/design/fWIF9BCEE03xNKNKxiKg9I/Sidebar-upgrades?node-id=302-979](https://www.figma.com/design/fWIF9BCEE03xNKNKxiKg9I/Sidebar-upgrades?node-id=302-979)