Sidebar headers #2788
Description
Design
Sidebar types:
Figma link
Sidebar contexts
Figma link
Header rename
Specs
Sidebar headers have sidebar type, context, actions, tab navigation
- Type: shows the type "Info", "Add Content", "Align", "Help", and "Analytics"
- Clicking the dropdown icon next to type allows user to navigate between different types within a context
- Context shows which sidebar is open/ which type is selected: Course, Section, Subsection, Unit, Component
- if a component is selected on the Unit page, the component type will be shown in the header
- Sidebars for selected contexts (ie: not the Course level, or the Unit sidebar on the Unit page), there is a back arrow. Clicking the back arrow navigates up one level. ie: if clicked from a section, the course level sidebar opens, if clicked from a subsection, the parent section sidebar opens
- The selection state in the main area of the page should reflect which sidebar is opened: ie, if the back arrow is clicked from a subsection, the parent section should be selected in the outline content area
- Context title should show an edit icon upon hover. clicking the icon should allow users to rename the selected object in place. Note: Course title cannot be edited in this way.
- In line with the Context title is an three dot menu. The overflow menu for sidebars are specified in ticket Sidebar Overflow Menus #2790
- Actions are depended on the sidebar opened. Details of actions are contained within tickets for each sidebar type
- Tab navigation allow users to navigate between tabs on a sidebar. Details of tabs are contained within tickets for each sidebar type