Overlay Calcite Panels

BobCowling2

I am wondering the proper way to overlay one or more Calcite Panels. The panels should not be side-by-side or stack on top of each other. I would start with an existing panel, the main panel, and then another panels would slide in and overlay the existing panel, not replace it. Then once the overlay panel is closed, the main panel would still be there. 

Right now I have a panel for Find and Explore. This is the main panel that should always be there. The search results panel should slide in and overlay the Find and Explore Panel. Right now they are stacked on top of each other. I know I can do this using CSS positioning and visibility but is there a way to Calcite to do this? 

 

 <calcite-panel heading="VPOL 3D Demo">    
    <calcite-input placeholder="Search for items in library collections..." scale="l" style="z-index: 99999999999999; position: absolute; width: 20%; top: 2px; left: 300px;" id="searchText">
        <calcite-button icon-start="search" slot="action" scale="l" id="search">            
        </calcite-button>
    </calcite-input>   
  <calcite-shell style="margin-top: 48px">   
    <calcite-shell-panel slot="panel-start" position="start" id="shell-panel-start">
        <calcite-action-bar slot="action-bar">
            <calcite-action-group>
                <calcite-action text="Add" icon="plus"></calcite-action>
                <calcite-action active text="Explore" indicator icon="layers"></calcite-action>
            </calcite-action-group>
            <calcite-action-group>
                <calcite-action text="Undo" icon="undo"></calcite-action>
                <calcite-action text="Redo" indicator icon="redo"></calcite-action>
                <calcite-action text="Save" disabled icon="save"></calcite-action>
            </calcite-action-group>
            <calcite-action-group slot="bottom-actions">
                <calcite-action text="Tips" icon="question"></calcite-action>
                <calcite-action text="Settings" indicator icon="gear"></calcite-action>
            </calcite-action-group>
        </calcite-action-bar>
        <calcite-panel heading="Search Results" id="search-panel" closable>
    </calcite-panel>
        <calcite-panel heading="Find and Explore" id="panel-start" closable>
           <calcite-accordion>    
    <calcite-accordion-item heading="Collections" description="Search the Library's collection." value="book" id="collections">
        <calcite-action slot="actions-start" icon="book" scale="l" text="Search for books"></calcite-action>
         <calcite-chip value="0" slot="actions-start" scale="s" id="colChip">0</calcite-chip>
          <calcite-notice open>            
        </calcite-notice>
    </calcite-accordion-item>
    <calcite-accordion-item heading="Maps" description="Search the Library's map collection." value="maps">
        <calcite-action slot="actions-start" icon="collection" scale="l" text="Search for books"></calcite-action>
         <calcite-chip value="0" slot="actions-start" scale="s" id="mapChip">0</calcite-chip>
          <calcite-notice open>            
        </calcite-notice>
    </calcite-accordion-item>
    <calcite-accordion-item heading="Study Rooms" description="See available study rooms." value="rooms" id="rooms">
        <calcite-action slot="actions-start" icon="open-book" scale="l" text="See available study rooms"></calcite-action>
        <calcite-chip value="0" slot="actions-start" scale="s" id="studyChip">0</calcite-chip>
    </calcite-accordion-item>
    <calcite-accordion-item heading="Meeting Places" description="Locate library conference rooms." value="meeting" id="meeting">
        <calcite-action slot="actions-start" icon="conference-room" scale="l" text="Search for books"></calcite-action>
        <calcite-chip value="0" slot="actions-start" scale="s">0</calcite-chip>
    </calcite-accordion-item>
    <calcite-accordion-item heading="People" description="Find staff offices." value="people" id="people">
        <calcite-action slot="actions-start" icon="users" scale="l" text="Search for books"></calcite-action>
        <calcite-chip value="0" slot="actions-start" scale="s" id="offChip">0</calcite-chip>
    </calcite-accordion-item>
     <calcite-accordion-item heading="Classrooms" description="Show library classroom locations." value="rivers">
        <calcite-action slot="actions-start" icon="education" scale="l" text="Search for books"></calcite-action>
        <calcite-chip value="0" slot="actions-start" scale="s">0</calcite-chip>
    </calcite-accordion-item>
</calcite-accordion>
        </calcite-panel>
    </calcite-shell-panel>
    
    <calcite-panel> <div id="viewDiv"></div></calcite-panel>
</calcite-shell>    

 

Mac_And_Cheese

It seems like the Flow Component is what you are looking for. You can use Flow Item components as direct children, and programmatically switch between them based on your needs. Flow Item are essentially wrapped Panel components, so they should have familiar properties, slots, etc.

Here's an example in isolation: Flow example in Codepen

Depending on what you want the experience to look like, you could also explore using a Sheet or a Dialog component, that could be invoked and dismissed as needed.