Panel Layout

References

Document that outlines the specifications for the panel-based layout.

Design used while implementation.

Breakpoints

• Phone: < 768px width
• Tablet: 768px to 1194px
• Desktop: > 1194px

Features

Desktop

• Resize feature is enabled.
• Maximum width the panels can be resized - vw * 0.3 .
• Minimum width the panels can be shrinked - 216px.
• localStorage is used to save the resized widths of panels with keys leftMenubarWidth and rightMenubarWidth.
• For tablets and mobile devices, we've implemented a clearLocalStorage function to clear the localStorage. This function is particularly useful when resizing the browser window on a desktop. When a window resized below 1195px, manual page refresh will clear the localStorage, and the panel width will be reset to 216px.

Tablet

• Resize feature is disabled.
• Width of panels is fixed to 216px.
• At any given time, either the left or right panel is open, but not both simultaneously.

Mobile

• Resize feature is disabled.
• Width of panels is fixed to 100%.

Split Screen in main content

• Clicking on an item will open details pane.
• Details pane has close icon in header.
• On mobile, details pane is stacked above the item list (on the top).