<aside class="sidebar">
<div class="sidebar-collapse">
<button class="btn btn-small sidebar__collapse-btn btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="20px"
height="20px"
viewBox="0 0 20 20"
enable-background="new 0 0 20 20"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.842 13.825L9.02533 10L12.842 6.175L11.667 5L6.66699 10L11.667 15L12.842 13.825Z" />
</svg>
</span>
</span>
</button>
</div>
<ul class="sidebar__inner">
<li class="sidebar-item">
<div class="sidebar-item__inner">
<a class="sidebar-item__link" href="#">
<span class="sidebar-item__text">Teammates</span>
</a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item__inner">
<a class="sidebar-item__link" href="#">
<?xml version="1.0" encoding="utf-8"?>
<svg class='sidebar-item__icon' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50065 9.79199C6.92565 9.79199 6.45898 10.2587 6.45898 10.8337C6.45898 11.4087 6.92565 11.8753 7.50065 11.8753C8.07565 11.8753 8.54232 11.4087 8.54232 10.8337C8.54232 10.2587 8.07565 9.79199 7.50065 9.79199V9.79199ZM12.5007 9.79199C11.9257 9.79199 11.459 10.2587 11.459 10.8337C11.459 11.4087 11.9257 11.8753 12.5007 11.8753C13.0757 11.8753 13.5423 11.4087 13.5423 10.8337C13.5423 10.2587 13.0757 9.79199 12.5007 9.79199V9.79199ZM10.0003 1.66699C5.40033 1.66699 1.66699 5.40033 1.66699 10.0003C1.66699 14.6003 5.40033 18.3337 10.0003 18.3337C14.6003 18.3337 18.3337 14.6003 18.3337 10.0003C18.3337 5.40033 14.6003 1.66699 10.0003 1.66699V1.66699ZM10.0007 16.6669C6.32565 16.6669 3.33398 13.6753 3.33398 10.0003C3.33398 9.75859 3.35065 9.51693 3.37565 9.28359C5.34232 8.40859 6.90065 6.80026 7.71732 4.80859C9.22565 6.94193 11.709 8.33359 14.5173 8.33359C15.1673 8.33359 15.7923 8.25859 16.3923 8.11693C16.5673 8.70859 16.6673 9.34193 16.6673 10.0003C16.6673 13.6753 13.6756 16.6669 10.0007 16.6669V16.6669Z" />
</svg>
<span class="sidebar-item__text">Guests</span>
</a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item__inner">
<a class="sidebar-item__link" href="#">
<span class="sidebar-item__text">Teammates</span>
</a>
<a class="btn btn-icon-only " href="#">
<span class="btn__inner">
</span></a>
</div>
</li>
</ul>
<div class="sidebar__footer">
<div class="sidebar-item">
<div class="sidebar-item__inner">
<a class="sidebar-item__link" href="#">
<?xml version="1.0" encoding="utf-8"?>
<svg class='sidebar-item__icon' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
<path fill="none" d="M7 6.99999C7.00019 5.98295 7.76364 5.128 8.77418 5.01317C9.78472 4.89833 10.7205 5.56018 10.9489 6.55125C11.1773 7.54232 10.6255 8.54698 9.66667 8.88599C9.26694 9.02732 8.99978 9.40535 9 9.82933V9.99999" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9 12C8.86193 12 8.75 12.1119 8.75 12.25C8.75 12.3881 8.86193 12.5 9 12.5C9.13807 12.5 9.25 12.3881 9.25 12.25C9.25 12.1119 9.13807 12 9 12V12" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5H15C15.8284 1.5 16.5 2.17157 16.5 3V15C16.5 15.8284 15.8284 16.5 15 16.5H3C2.17157 16.5 1.5 15.8284 1.5 15V3Z" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="sidebar-item__text">Help</span>
</a>
</div>
</div>
<p class="sidebar__footer-text"><a href="#" class="sidebar__footer-link">Terms of Service</a><a href="#" class="sidebar__footer-link">Privacy Policy</a></p>
<p class="sidebar__footer-text">© Spruce Labs 2018</p>
</div>
</aside>
<aside class="sidebar">
<div class="sidebar-collapse">
{{> @button className="btn-small sidebar__collapse-btn" icon='<path fill-rule="evenodd" clip-rule="evenodd" d="M12.842 13.825L9.02533 10L12.842 6.175L11.667 5L6.66699 10L11.667 15L12.842 13.825Z" />' width="20" height="20"}}
</div>
{{!-- Add search to be accessible on mobile --}}
{{#if user}}
<div class="sidebar__search-wrapper">
{{> @search class="text-input-small" placeholder="Search anything…"}}
</div>
{{/if}}
<ul class="sidebar__inner">
{{#each items}}
{{> @sidebar-item text=text}}
{{/each}}
</ul>
<div class="sidebar__footer">
<div class="sidebar-item">
<div class="sidebar-item__inner">
<a class="sidebar-item__link" href="#">
{{> @icon icon='<path fill="none" d="M7 6.99999C7.00019 5.98295 7.76364 5.128 8.77418 5.01317C9.78472 4.89833 10.7205 5.56018 10.9489 6.55125C11.1773 7.54232 10.6255 8.54698 9.66667 8.88599C9.26694 9.02732 8.99978 9.40535 9 9.82933V9.99999" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M9 12C8.86193 12 8.75 12.1119 8.75 12.25C8.75 12.3881 8.86193 12.5 9 12.5C9.13807 12.5 9.25 12.3881 9.25 12.25C9.25 12.1119 9.13807 12 9 12V12" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 3C1.5 2.17157 2.17157 1.5 3 1.5H15C15.8284 1.5 16.5 2.17157 16.5 3V15C16.5 15.8284 15.8284 16.5 15 16.5H3C2.17157 16.5 1.5 15.8284 1.5 15V3Z" stroke="#737780" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' class="sidebar-item__icon" width="18" height="18"}}
<span class="sidebar-item__text">Help</span>
</a>
</div>
</div>
<p class="sidebar__footer-text"><a href="#" class="sidebar__footer-link">Terms of Service</a><a href="#" class="sidebar__footer-link">Privacy Policy</a></p>
<p class="sidebar__footer-text">© Spruce Labs 2018</p>
</div>
</aside>
{
"items": [
{
"text": "Teammates"
},
{
"text": "Guests",
"icon": "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.50065 9.79199C6.92565 9.79199 6.45898 10.2587 6.45898 10.8337C6.45898 11.4087 6.92565 11.8753 7.50065 11.8753C8.07565 11.8753 8.54232 11.4087 8.54232 10.8337C8.54232 10.2587 8.07565 9.79199 7.50065 9.79199V9.79199ZM12.5007 9.79199C11.9257 9.79199 11.459 10.2587 11.459 10.8337C11.459 11.4087 11.9257 11.8753 12.5007 11.8753C13.0757 11.8753 13.5423 11.4087 13.5423 10.8337C13.5423 10.2587 13.0757 9.79199 12.5007 9.79199V9.79199ZM10.0003 1.66699C5.40033 1.66699 1.66699 5.40033 1.66699 10.0003C1.66699 14.6003 5.40033 18.3337 10.0003 18.3337C14.6003 18.3337 18.3337 14.6003 18.3337 10.0003C18.3337 5.40033 14.6003 1.66699 10.0003 1.66699V1.66699ZM10.0007 16.6669C6.32565 16.6669 3.33398 13.6753 3.33398 10.0003C3.33398 9.75859 3.35065 9.51693 3.37565 9.28359C5.34232 8.40859 6.90065 6.80026 7.71732 4.80859C9.22565 6.94193 11.709 8.33359 14.5173 8.33359C15.1673 8.33359 15.7923 8.25859 16.3923 8.11693C16.5673 8.70859 16.6673 9.34193 16.6673 10.0003C16.6673 13.6753 13.6756 16.6669 10.0007 16.6669V16.6669Z\" />"
},
{
"text": "Teammates",
"action": "Add"
}
]
}
const sidebarCollapse = document.getElementsByClassName('sidebar-collapse');
sidebarCollapse[0].addEventListener('click', function() {
const sidebar = this.parentNode;
sidebar.classList.toggle('sidebar--is-collapsed');
document.body.classList.toggle('sidebar--is-collapsed')
})
const sidebarCollapse = document.getElementsByClassName('sidebar-collapse');
sidebarCollapse[0].addEventListener('click', function() {
const sidebar = this.parentNode;
sidebar.classList.toggle('sidebar--is-collapsed');
document.body.classList.toggle('sidebar--is-collapsed')
})
The Sidebar provides links to top-level views within the platform, as well as a support link and legal information.