<?js 
  self = this
?>

<div class="top-nav">
    <div class="inner">
        <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
        <div class="logo">
            <?js if(betterDocs.logo) { ?> 
                <a class="image" href="/">
                    <img class="mapgis-webclient-logo" src="<?js= betterDocs.logo ?>" alt="logo">
                </a>
            <?js } ?>
            <?js if(betterDocs.name) { ?> 
                <a href="/">
                    <h1 class="navbar-item"><?js= betterDocs.name?></h1>
                </a>
            <?js } ?>
        </div>
        <div class="menu">
            <?js if(betterDocs.navButtons && betterDocs.navButtons.length) { ?> 
                <div class="top-buttons">
                    <?js betterDocs.navButtons.forEach(function(nav) { ?>
                        <a  href="<?js= nav.href ?>"
                            target="<?js= nav.target ? '_blank' : '' ?>"
                            class="button <?js= nav.className ?>"
                        ?>
                            <?js= nav.label ?>
                        </a>
                    <?js }); ?>
                </div>
                <?js } ?>
            <div class="navigation">
                <a
                    href="<?js= betterDocs.landing ? 'docs.html' : 'index.html' ?>"
                    class="link"
                >
                    API
                </a>
            </div>
        </div>
    </div>
</div>