Hi, I hope you can help. I need the buttons from the dropdown, controlling the widgets moved out in the calcite-navbar, like the picture, and they need to work :-):
The "Full map " are working, but that are not controlling the widgets, the basemap button don't do anything
Although it has the same lines as the links in the drop-down.
Iâm trying on this example: https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html
<nav
class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark"
>
<!-- Menu -->
<div
class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light"
role="presentation"
>
<a
class="dropdown-toggle"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<div class="calcite-dropdown-toggle">
<span class="sr-only">Toggle dropdown menu</span> <span></span>
<span></span> <span></span> <span></span>
</div>
</a>
<ul class="dropdown-menu">
<li class="active">
<a
class="hidden-md hidden-lg"
href="#mapTab"
aria-controls="mapTab"
role="tab"
data-toggle="tab"
>
Map</a
>
</li>
<li>
<a
class="hidden-md hidden-lg"
href="#sceneTab"
aria-controls="sceneTab"
role="tab"
data-toggle="tab"
>
Scene</a
>
</li>
<!-- Copied/Paste From Here: -->
<li>
<a role="button" data-target="#panelBasemaps" aria-haspopup="true"
><span class="glyphicon glyphicon-th-large"></span> Basemaps</a
>
</li>
<li>
<a role="button" data-target="#panelSettings" aria-haspopup="true"
><span class="glyphicon glyphicon-cog"></span> Settings</a
>
</li>
<li>
<a role="button" id="calciteToggleNavbar" aria-haspopup="true"
><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a
>
</li>
<!-- To Here -->
</ul>
</div>
<!-- Title -->
<div class="calcite-title calcite-overflow-hidden">
<span class="calcite-title-main">Calcite Maps</span>
<span class="calcite-title-divider hidden-xs"></span>
<span class="calcite-title-sub hidden-xs"
>A modern framework for building map apps</span
>
</div>
<!-- Nav -->
<ul class="nav navbar-nav calcite-nav">
<li class="active">
<a
id="mapNav"
class="hidden-xs hidden-sm"
href="#mapTab"
aria-controls="mapTab"
aria-expanded="true"
role="tab"
data-toggle="tab"
data-tooltip="tip"
title="2D View"
data-placement="bottom"
>Map</a
>
</li>
<li>
<a
id="sceneNav"
class="hidden-xs hidden-sm"
href="#sceneTab"
aria-controls="sceneTab"
role="tab"
data-toggle="tab"
data-tooltip="tip"
title="3D View"
data-placement="bottom"
>Scene</a
>
</li>
<li>
<div class="calcite-navbar-search calcite-search-expander">
<div id="searchWidgetDiv"></div>
</div>
</li>
<li>
<a role="button" data-target="#panelBasemaps" aria-haspopup="true"
><span class="glyphicon glyphicon-th-large"></span> Basemaps</a
>
</li>
<li>
<a role="button" id="calciteToggleNavbar" aria-haspopup="true"
><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a
>
</li>
</ul>
</nav>
And then it has to open this panel
<div id="panelSettings" class="panel panel-map collapse">
<div id="headingSettings" class="panel-heading">
<div class="panel-title">
<a
class="panel-toggle"
role="button"
data-toggle="collapse"
href="#collapseSettings"
data-parent="#panelAccordion"
aria-expanded="true"
aria-controls="collapseSettings"
><span class="glyphicon glyphicon-cog" aria-hidden="true"></span
><span class="panel-label">Settings</span></a
>
<a
class="panel-close"
role="button"
data-toggle="collapse"
data-target="#panelSettings"
><span class="esri-icon esri-icon-close" aria-hidden="true"></span
></a>
</div>
</div>
Hope it make sense ð
Thanks.
