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

Add support for Left/Right rail to Layout #185

Closed
AlexSkrypnyk opened this issue Jun 4, 2024 · 1 comment · Fixed by #183
Closed

Add support for Left/Right rail to Layout #185

AlexSkrypnyk opened this issue Jun 4, 2024 · 1 comment · Fixed by #183
Assignees
@AlexSkrypnyk
Labels
State: Confirmed The issue was triaged and confirmed for development
Milestone
1.8

Comments

@AlexSkrypnyk
Copy link
Contributor

CivicTheme__Design_System_v1_8_0__WIP_ Cursor_and_CivicTheme__Design_System_v1_8_0__WIP_

The layout should support a specific ordering of regions: the content region should always be the first in the markup for better SEO.

The mobile and desktop order of top and bottom rail regions may be different.

Solution direction

  1. Replace Sidebar with 4 rail regions.
  2. Use CSSGrid rules for the Layout component to set the order of the regions within mobile and desktop breakpoints.
  3. Allow to set attributes on 4 new rail regions (in the same way as attributes were allowed to be passed as a sidebar prop).
  4. Add backwards compatibility with sidebar within Page template.
@AlexSkrypnyk AlexSkrypnyk self-assigned this Jun 4, 2024
@AlexSkrypnyk AlexSkrypnyk added the State: Confirmed The issue was triaged and confirmed for development label Jun 4, 2024
@AlexSkrypnyk AlexSkrypnyk added this to the 1.8 milestone Jun 4, 2024
@AlexSkrypnyk AlexSkrypnyk mentioned this issue Jun 4, 2024
Merged
@sonamchaturvedi28
Copy link
Collaborator

Test Env: DEV
Test Status: PASS
Test Result:

  • Sidebar is replaced with 4 rail regions.
  • Attributes are available on 4 new rail regions.
  • Verified different permutation of enabled and disabled regions - when a rail region is disabled, the other region takes the full height.
  • Adding long content - blocks stay at the top.
image image image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@AlexSkrypnyk AlexSkrypnyk

Labels
State: Confirmed The issue was triaged and confirmed for development
Projects
UI Kit
Status: Done
Milestone
1.8
Development

Successfully merging a pull request may close this issue.

[#185] Updated Layout to support Left/Right rail. civictheme/uikit
2 participants
@AlexSkrypnyk @sonamchaturvedi28