Two semantic sidebars in "layers" on a page?

Question

Environment: Electron desktop single page app

I have a project where I would like to use two Semantic UI sidebars schemes. Only one scheme will be visible at a time. I've seen this earlier question ( Semantic-UI: Two Sidebars Conflict, Only One at a Time? ) but it only partly answers my question.

Doing a simple test, wrapping each sidebar scheme in a div, I've had some Semantic UI warnings ( "Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag"). Before I go further, can anyone tell me if the structure below will work or if there is some other recommended way to go about this?

I will show/hide these "layers" based on user interaction – both layers need the Semantic sidebar feature.

  <body>
  <div id="LAYER-1" class="ui sidebar inverted vertical menu">
    <!-- ************** Sidebar content ************* !-->
  </div>    
  <div class="pusher">
    <!-- ************** Layer content ************* !-->
  </div>

  <div id="LAYER-2" class="ui sidebar inverted vertical menu">
    <!-- ************** Sidebar content ************* !-->
  </div>    
  <div class="pusher">
    <!-- ************** Layer content ************* !-->
  </div>
  </body>

spring · Accepted Answer · 2018-09-17T19:26:20.350

I was able to solve this through setting the context for the Semantic sidebar. This answer (Semantic-ui - how to use sidebar in only part of a page? (ie with context)) helped to clarify how to specify the context somewhat better than the example in the Semantic docs

So what I've ended up with: wrap each "sidebar set" in a div with an ID and then specify that div as the context. The "layer" divs have buttons to show/hide the top-most layer. Not getting any Semantic warnings about the set up.

JS

$('#briefcaseExample .ui.sidebar')
        .sidebar({
            context: $('#briefcaseExample')
        })
        .sidebar('setting', 'transition', 'push')


$('#timelineExample .ui.sidebar')
        .sidebar({
            context: $('#timelineExample')
        })
        .sidebar('setting', 'transition', 'push')

HTML

<body onload="onLoadApp()">

    <div id="briefcaseExample">
        <div class="ui sidebar inverted vertical menu">
            <!-- ************** Sidebar content ************* !-->
            <div id="sidebarTree" style="height: 100%;"></div>
        </div>
        <!-- ************** End Sidebar content ************* !-->

        <div class="pusher">
            <!-- ************** Site content ************* !-->
            <div id="solidBlue"></div>
            <div id="container" width="100%" height="100%">
                <canvas id="c" width="100%" height="100%"></canvas>
            </div>

            <div class="briefcaseSidebarToggle">
                <i class="big sidebar icon grey" onclick="toggleMenu()"></i>
            </div>

            <div class="briefcaseClose">
                <i class="big remove circle icon grey" onclick="hideBriefcase()"></i>
            </div>
            <!-- ************** End Site content ************* !-->
        </div>
    </div>

    <div id="timelineExample">
        <div class="ui sidebar inverted vertical menu">
            <!-- ************** Sidebar content ************* !-->
            <div id="timelineSidebar" style="height: 100%;"></div>
        </div>
        <!-- ************** End Sidebar content ************* !-->

        <div class="pusher">
            <!-- ************** Site content ************* !-->
            <div class="timelineSidebarToggle">
                <i class="big sidebar icon grey" onclick="toggleTimelineMenu()"></i>
            </div>

            <!-- ************** End Site content ************* !-->

            <div id="solidColor">
                <button onclick="showBriefcase()">Show Briefcase</button>
            </div>
        </div>
    </div>
</body>

Two semantic sidebars in "layers" on a page?

1 Answers1