This sample demonstrates using Calcite components and the ArcGIS Maps SDK for JavaScript to create a common application layout — a sidebar adjacent to a map content area.
Layouts like this are often used to offer filtering or viewing controls to a user, or to house interactive content that is related to the main content area.
Layout considerations
The sidebar in this sample is comprised of a resizable Shell Panel that houses a Panel containing multiple Blocks. Most often used within Panels, Blocks help group related controls and content. In workflows or experiences with a large amount of controls, consider configuring Blocks to be collapsible to allow users to control what is in view.
The main content — an arcgis-map — is placed in a Panel that is slotted in the Shell component's default slot.
Application behavior
In this sample application, the user can resize the Shell Panel to provide more room for content while still keeping the main content visible. This can be helpful if the content is verbose or if a large set of controls are being used. Configure the Shell Panel's width with CSS to ensure the sizing is appropriate for the use case.