<div class="l-atlas-container__aside" id="js-atlas-aside" role="contentinfo">
    <script>
        document.getElementById('js-atlas-aside').style.width =
            window.sessionStorage && (window.sessionStorage.getItem('asideWidth')) ?
                window.sessionStorage.getItem('asideWidth') + 'px' : '';
    </script>
    <div class="atlas-aside">
        <div class="atlas-aside__header">
            <div class="atlas-header">
                <div class="atlas-header__logo" role="banner">
                    {{>logo}}
                </div>
                <div class="atlas-header__search">
                    <div class="atlas-search" role="search">
                        <svg class="atlas-search__icon" width="14" height="14" role="img"><use xlink:href="#icon-filter"></use></svg>
                        <input class="atlas-search__input" type="search" id="js-atlas-search" placeholder="Filter" />
                        <button class="atlas-search__clear" id="js-atlas-search-clear" title="Clear input">
                            <svg width="8" height="14" role="img"><use xlink:href="#icon-cancel"></use></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="atlas-aside__content" role="navigation" id="js-atlas-aside-content">
            <div class="atlas-nav" role="list" id="js-atlas-navigation">
                {{> navigation}}

                <div class="atlas-nav__item" role="listitem">
                    <a class="atlas-nav__ln _bundle js-atlas-nav-ln" href="bundle.html" id="nav-bundle" data-name="bundle">
                        <svg width="14" height="14" role="img">
                            <use xlink:href="#icon-bundle"></use>
                        </svg>
                        Bundle
                    </a>
                </div>
                <div class="atlas-nav__item" role="listitem">
                    <a class="atlas-nav__ln _insights js-atlas-nav-ln" href="insights.html" id="nav-insights" data-name="insights">
                        <svg width="14" height="14" role="img">
                            <use xlink:href="#icon-insights"></use>
                        </svg>
                        Insights
                    </a>
                </div>
            </div>
            <script>
                const atlasContentPosition = window.sessionStorage && (window.sessionStorage.getItem('navigationScroll')) ?
                    window.sessionStorage.getItem('navigationScroll') : '';
                document.getElementById('js-atlas-aside-content').scrollTo(0, atlasContentPosition);
            </script>
        </div>
        <div class="atlas-aside__footer">
            {{> copyright}}
        </div>
    </div>
    <button class="atlas-aside-ctrl" id="js-atlas-aside-resizer" title="Double click to toggle aside"></button>
    <div class="atlas-aside-resizer-overlay" id="js-atlas-aside-resizer-overlay"></div>
</div>
