<amp-sidebar
    layout="{{amplayout}}"
    side="{{side}}"
    id="{{id}}"
    class="Drawer Drawer--noPad {{modifier}}"
    {{#if open}}open{{/if}}
>
    <div class="Drawer-close">
        <button class="IconButton" type="button" aria-label="Close Sidebar" on="tap:{{id}}.close">
            <span aria-hidden="true">×</span>
        </button>
    </div>

    <div class="AMPSidebar-contents">
        {{#if static}}
            <amp-img
                src="https://media.sproutsocial.com/uploads/sprout-social-logo.svg"
                width="196"
                height="40"
                class="db mx-auto my400"
                layout="fixed"
            ></amp-img>
            <nav class="Nav Nav--vertical Nav--removeTopMargin" role="navigation">
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <amp-accordion class="AMPAccordion--icon">
                            <section>
                                <header class="icon _arrow _after">
                                    Solutions
                                </header>

                                <ul class="list">
                                    <li>
                                        <a href="/enterprise/">Enterprise</a>
                                    </li>
                                    <li>
                                        <a href="/agencies/">Agencies</a>
                                    </li>
                                    <li>
                                        <a href="/small-business/">Small Business</a>
                                    </li>
                                    <li>
                                        <a href="/social-media-management/">Social Media Management</a>
                                    </li>
                                    <li>
                                        <a href="/social-customer-service/">Customer Service</a>
                                    </li>
                                    <li>
                                        <a href="/social-media-marketing/">Social Media Marketing</a>
                                    </li>
                                </ul>
                            </section>
                        </amp-accordion>
                    </li>

                    <li>
                        <amp-accordion class="AMPAccordion--icon">
                            <section>
                                <header class="icon _arrow _after">
                                    Platform
                                </header>

                                <ul class="list">
                                    <li>
                                        <a href="/features/social-media-analytics/">Analytics</a>
                                    </li>
                                    <li>
                                        <a href="/features/social-media-engagement/">Engagement</a>
                                    </li>
                                    <li>
                                        <a href="/features/social-media-publishing/">Publishing</a>
                                    </li>
                                    <li>
                                        <a href="/features/team-collaboration/">Collaboration</a>
                                    </li>
                                    <li>
                                        <a href="/features/flexible-account-structure/">Account Structure</a>
                                    </li>
                                    <li>
                                        <a href="/features/social-media-crm/">Social CRM</a>
                                    </li>
                                    <li>
                                        <a href="/features/social-media-monitoring/">Monitoring</a>
                                    </li>
                                    <li>
                                        <a href="/features/social-media-listening/">Listening</a>
                                    </li>
                                    <li>
                                        <a href="/features/mobile-apps/">Mobile</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/twitter/">Twitter</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/facebook/">Facebook</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/instagram/">Instagram</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/linkedin/">LinkedIn</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/google-plus/">Google+</a>
                                    </li>
                                    <li>
                                        <a href="/integrations/">Other Integrations</a>
                                    </li>
                                </ul>
                            </section>
                        </amp-accordion>
                    </li>
                    <li>
                        <a href="/pricing/">Pricing</a>
                    </li>
                    <li>
                        <amp-accordion class="AMPAccordion--icon">
                            <section>
                                <header class="icon _arrow _after">
                                    About
                                </header>

                                <ul class="list">
                                    <li>
                                        <a href="/customers">Customers</a>
                                    </li>
                                    <li>
                                        <a href="/about/">Company</a>
                                    </li>
                                    <li>
                                        <a href="/careers/">Careers</a>
                                    </li>
                                    <li>
                                        <a href="/insights/">Blog</a>
                                    </li>
                                    <li>
                                        <a href="/insights/resources/">Resources</a>
                                    </li>
                                    <li>
                                        <a href="https://getbambu.com/" target="_blank" rel="noopener noreferrer">Bambu</a>
                                    </li>
                                </ul>
                            </section>
                        </amp-accordion>
                    </li>
                </ul>

                <a href="/demo/" class="button db mx500">Request a Demo</a>
            </nav>

        {{else}}
            {{> @children}}
        {{/if}}
    </div>
</amp-sidebar>