<div class="demo-container">
<div class="acl-toolbar acl-toolbar--left">
<div class="acl-toolbar__navigation">
<div class="acl-toolbar__navigation-drag-indicator"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="7" viewBox="0 0 17 7">
<image width="72" height="30" transform="translate(-0.14 -0.1) scale(0.24)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAeUlEQVRoQ+3QsRGCQBRFUbEH6RATLYeIEm1CIgMhuDtDek60s+9Hd3q8lu/t4LNu0+89v5+nfeTm6j5yc3UfubkfP/gnUBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECjvXRyIguwnw9QAAAABJRU5ErkJggg==" />
</svg></div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="plus">
<i class="aforza-icons animated fadeIn">acl_dashboard</i>
<div class="acl-toolbar__navigation-item-label">Survey</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="intell">
<i class="aforza-icons animated fadeIn">acl_product_placeholder</i>
<div class="acl-toolbar__navigation-item-label">Order</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_product_catalogue</i>
<div class="acl-toolbar__navigation-item-label">Attribute</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_audit_assessment</i>
<div class="acl-toolbar__navigation-item-label">Audit</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_price_book</i>
<div class="acl-toolbar__navigation-item-label">Payment</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_settings</i>
<div class="acl-toolbar__navigation-item-label">Tools</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="plus">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-search">
<div class="acl-toolbar__search-icon"><i class="aforza-icons">acl_search</i></div>
<input type="text" class="acl-toolbar__panel-header-input" placeholder="">
</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="intell">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-title">Intell</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="fav">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-title">Fav</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const toolbarElement = document.querySelector('.acl-toolbar');
const toolbar = new acl.ACLToolbar(toolbarElement);
toolbarElement.addEventListener('navitemclick', function(event) {
console.log('navitemclick event fired.');
});
toolbarElement.addEventListener('panelopen', function(event) {
console.log('panelopen event fired.');
});
toolbarElement.addEventListener('closeallpanels', function(event) {
console.log('closeallpanels event fired.');
});
</script>
<div class="demo-container">
<div class="acl-toolbar acl-toolbar--left">
<div class="acl-toolbar__navigation">
<div class="acl-toolbar__navigation-drag-indicator"><svg id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="7"
viewBox="0 0 17 7">
<image width="72" height="30" transform="translate(-0.14 -0.1) scale(0.24)"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAeCAYAAACPOlitAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAeUlEQVRoQ+3QsRGCQBRFUbEH6RATLYeIEm1CIgMhuDtDek60s+9Hd3q8lu/t4LNu0+89v5+nfeTm6j5yc3UfubkfP/gnUBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECgIFgYJAQaAgUBAoCBQECjvXRyIguwnw9QAAAABJRU5ErkJggg==" />
</svg></div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="plus">
<i class="aforza-icons animated fadeIn">acl_dashboard</i>
<div class="acl-toolbar__navigation-item-label">Survey</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="intell">
<i class="aforza-icons animated fadeIn">acl_product_placeholder</i>
<div class="acl-toolbar__navigation-item-label">Order</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_product_catalogue</i>
<div class="acl-toolbar__navigation-item-label">Attribute</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_audit_assessment</i>
<div class="acl-toolbar__navigation-item-label">Audit</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_price_book</i>
<div class="acl-toolbar__navigation-item-label">Payment</div>
</div>
<div class="acl-toolbar__navigation-item acl-toolbar__navigation-item--column" data-panel-target="fav">
<i class="aforza-icons animated fadeIn">acl_settings</i>
<div class="acl-toolbar__navigation-item-label">Tools</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="plus">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-search">
<div class="acl-toolbar__search-icon"><i class="aforza-icons">acl_search</i></div>
<input type="text" class="acl-toolbar__panel-header-input" placeholder="">
</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
{{!-- <div class="acl-toolbar__panel-items">
<div class="acl-toolbar__panel-item">
<div class=" acl-toolbar__panel-item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-toolbar__panel-item-content">
<div class="acl-toolbar__panel-item-category">Rating Attribute - Category Name</div>
<div class="acl-toolbar__panel-item-title">Volume Prediction</div>
<div class="acl-toolbar__panel-item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-toolbar__panel-item-cta"><i
class="aforza-icons animated fadeIn">acl_discount_store
</i>
</div>
</div>
<div class="acl-toolbar__panel-item">
<div class=" acl-toolbar__panel-item-icon">
<i class="aforza-icons animated fadeIn">acl_email</i>
</div>
<div class="acl-toolbar__panel-item-content">
<div class="acl-toolbar__panel-item-category">Rating Attribute - Category Name</div>
<div class="acl-toolbar__panel-item-title">Volume Prediction</div>
<div class="acl-toolbar__panel-item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-toolbar__panel-item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-toolbar__panel-item">
<div class="acl-toolbar__panel-item-icon">
<i class="aforza-icons animated fadeIn">acl_navigation</i>
</div>
<div class="acl-toolbar__panel-item-content">
<div class="acl-toolbar__panel-item-category">Rating Attribute - Category Name</div>
<div class="acl-toolbar__panel-item-title">Volume Prediction</div>
<div class="acl-toolbar__panel-item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-toolbar__panel-item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div> --}}
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">
Rating Attribute - Category Name
</div>
<div class="acl-actionable-list__item-title">
Volume Prediction
</div>
<div class="acl-actionable-list__item-info">
Company name -Similar Store / Popular for Corner Shop
</div>
</div>
<div class="acl-actionable-list__item-cta">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="intell">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-title">Intell</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
<div class="acl-toolbar__panel acl-toolbar__panel--hidden" data-panel-name="fav">
<div class="acl-toolbar__panel-header">
<div class="acl-toolbar__panel-header-title">Fav</div>
<div class="acl-toolbar__panel-header-icon acl-toolbar__panel-close">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
<div class="acl-toolbar__panel-content">
<div class="acl-actionable-list__items">
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
<div class="acl-actionable-list__item acl-actionable-list__item--favourite">
<div class=" acl-actionable-list__item-icon">
<i class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
<div class="acl-actionable-list__item-content">
<div class="acl-actionable-list__item-category">Rating Attribute - Category Name</div>
<div class="acl-actionable-list__item-title">Volume Prediction</div>
<div class="acl-actionable-list__item-info">Company name -Similar Store / Popular for Corner
Shop
</div>
</div>
<div class="acl-actionable-list__item-cta"><i
class="aforza-icons animated fadeIn">acl_close_small</i>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const toolbarElement = document.querySelector('.acl-toolbar');
const toolbar = new acl.ACLToolbar(toolbarElement);
toolbarElement.addEventListener('navitemclick', function (event) {
console.log('navitemclick event fired.');
});
toolbarElement.addEventListener('panelopen', function (event) {
console.log('panelopen event fired.');
});
toolbarElement.addEventListener('closeallpanels', function (event) {
console.log('closeallpanels event fired.');
});
</script>
/* No context defined. */
.acl-toolbar {
display: flex;
flex-direction: row-reverse;
font-family: 'Open Sans';
&--left {
flex-direction: row;
.acl-toolbar__panel-header {
flex-direction: row-reverse;
}
.acl-toolbar__panel-header-icon {
transform: rotate(180deg);
}
}
&__navigation {
width: 42px;
height: 100%;
border: 1px solid #26a39a;
border-radius: 4px;
background: linear-gradient(180deg, #2dbdb2 0%, #46ccc2 100%);
display: flex;
flex-direction: column;
align-items: center;
margin: 0 8px;
}
&__navigation-drag-indicator {
height: 10px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
border-radius: 4px 4px 0 0;
background-color: rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
align-items: center;
}
&__navigation-item {
width: 100%;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
i {
font-size: 34px;
color: $white;
cursor: pointer;
user-select: none;
}
&--active,
&:hover {
box-sizing: border-box;
height: 47px;
background-color: rgba(100, 240, 230, 0.6);
box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.15);
}
&--column {
display: flex;
flex-direction: column;
cursor: pointer;
margin: 5px;
i {
font-size: 19px;
color: $white;
cursor: pointer;
user-select: none;
}
}
}
&__navigation-item-label {
color: #ffffff;
font-size: 8px;
letter-spacing: 0;
line-height: 11px;
text-align: center;
margin-top: 5px;
width: 85%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__panel {
box-sizing: border-box;
width: 419px;
border: 1px solid #e0e0e0;
border-radius: 4px;
background-color: #ffffff;
&--hidden {
display: none;
}
}
&__panel-content {
padding: 11.5px;
}
&__panel-header {
background-color: #46ccc2;
color: #ffffff;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
line-height: 22px;
display: flex;
justify-content: space-between;
align-items: center;
}
&__panel-header-search {
display: flex;
align-items: center;
box-sizing: border-box;
margin: 0 12px;
height: 34px;
width: 360px;
border: 1px solid #e8ebf8;
border-radius: 6px;
background: linear-gradient(
180deg,
#ffffff 0%,
#f8fdff 1%,
#ffffff 3.85%,
#ffffff 92.38%,
#f5fafd 97.25%,
#ffffff 100%
);
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
&__panel-header-input {
border: none;
width: 88%;
font-size: 12px;
color: rgba(0, 0, 0, 0.75);
}
&__panel-header-title {
padding: 0 25px;
}
&__panel-header-icon {
padding: 18px 15px;
cursor: pointer;
display: flex;
i {
color: $white;
font-size: 18px;
user-select: none;
}
}
&__search-icon {
color: #b1b7cd;
display: flex;
padding: 0 5px;
}
}
//Salesforce changes.
.acl-toolbar__navigation {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
}
.acl-toolbar--right .acl-toolbar__panel {
position: absolute;
right: 65px;
}
.acl-toolbar__panel {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
border-radius: 5px;
overflow: hidden;
}
.acl-toolbar__navigation-item {
height: 47px;
}
.acl-toolbar__navigation-item--active {
height: 47px;
}
class ACLToolbar {
constructor(toolbarEl, navWrapper, panelWrapper) {
this.toolbarEl = toolbarEl;
this.navWrapper = navWrapper;
this.panelWrapper = panelWrapper;
this.panels = [];
this.navigationItems = [];
this.setToolbar();
}
setToolbar() {
if (this.toolbarEl) {
if (!this.navWrapper) {
this.navWrapper = this.toolbarEl.querySelector('.acl-toolbar__navigation');
}
if (!this.panelWrapper) {
this.panelWrapper = this.toolbarEl;
}
this.navigationItems = this.navWrapper.querySelectorAll('.acl-toolbar__navigation-item');
this.panels = this.panelWrapper.querySelectorAll('.acl-toolbar__panel');
this.toolbarEl.addEventListener('panelclose', event => {
this.closeAllPanels();
});
for (const item of this.navigationItems) {
item.addEventListener('click', event => {
let navItemClickEvent = new CustomEvent('navitemclick', {
detail: {
item: item,
},
});
this.toolbarEl.dispatchEvent(navItemClickEvent);
const panelName = item.getAttribute('data-panel-target');
const matchedPanel = this.panelWrapper.querySelector(`[data-panel-name="${panelName}"`);
if (matchedPanel) {
this.togglePanel(matchedPanel, panelName);
this.setActiveClass(item);
} else {
this.closeAllPanels();
this.removeActiveClass();
}
});
}
}
}
closeAllPanels() {
for (const panel of this.panels) {
if (!panel) continue;
panel.classList.add('acl-toolbar__panel--hidden');
}
this.removeActiveClass();
this.toolbarEl.dispatchEvent(new CustomEvent('closeallpanels'));
}
togglePanel(panel, panelName) {
if (panel.classList.contains('acl-toolbar__panel--hidden')) {
this.closeAllPanels();
panel.classList.remove('acl-toolbar__panel--hidden');
let event = new CustomEvent('panelopen', {
detail: {
panelName: panelName,
},
});
this.toolbarEl.dispatchEvent(event);
} else {
this.closeAllPanels();
}
}
setActiveClass(selectedItem) {
this.removeActiveClass();
if (this.checkForOpenPanels()) {
selectedItem.classList.add('acl-toolbar__navigation-item--active');
}
}
removeActiveClass() {
for (const item of this.navigationItems) {
item.classList.remove('acl-toolbar__navigation-item--active');
}
}
checkForOpenPanels() {
let hiddenPanels = this.panelWrapper.querySelectorAll('.acl-toolbar__panel--hidden');
if (hiddenPanels.length == this.panels.length) {
return false;
} else {
return true;
}
}
}
export { ACLToolbar };
No notes defined.