id: 58
source: 1
name: NavTop-LogoBurger
description: 'Die Top Navbar mit Logo und Burger'
category: knit
properties: 'a:0:{}'

-----

    <nav class="navbar fixed-top jk-topnav">
        <div class="container">
            <a class="navbar-brand" href="[[++base_url]]">
                <!-- Logo-->
                <svg id="svgLogo" width="26" height="26" viewBox="0 0 138 138">
                    <g transform="translate(-35 -65)" >
                        <path d="m 39.214757,82.378956 c 0,-8.97794 7.27806,-16.256 16.256,-16.256 H 158.42543 c 8.97792,0 16.256,7.27806 16.256,16.256 V 185.33363 c 0,8.97792 -7.27808,16.256 -16.256,16.256 H 55.470757 c -8.97794,0 -16.256,-7.27808 -16.256,-16.256 z" fill="#f0c" />
                        <path d="m 98.014167,148.71557 c -1.8e-4,11.70068 -4.66188,16.84742 -9.48843,19.21264 -4.8771,2.67144 -5.62269,2.66475 -15.48933,2.66475 -1.87583,0 -3.13251,-0.80122 -3.77032,-2.40409 -0.45087,-1.12142 -0.67486,-1.2406 -0.67486,-4.07229 0,-4.22076 2.38445,-6.56443 5.51721,-6.93314 0.44994,-0.053 3.55048,-0.13036 4.13417,-0.60019 3.09755,-0.18392 5.87413,-3.00837 5.87413,-7.62731 v -28.78821 c 0,-4.16706 1.46331,-6.25066 4.38934,-6.25066 3.11384,0 6.28225,0.11487 6.80749,0.3202 1.80074,0.6964 2.70108,2.67131 2.70103,5.93032 z" fill="#ffffff" />
                        <path d="m 116.50483,146.66858 c 0,5.39947 -1.73311,8.09921 -5.19946,8.09921 -3.28859,0 -5.31059,-0.23836 -6.06601,-0.71651 -1.86649,-0.95772 -2.79967,-3.41768 -2.79967,-7.38141 V 92.276426 c 0,-5.33113 1.7331,-7.99683 5.19946,-7.99683 3.28859,0 5.31059,0.20533 6.066,0.61455 1.8665,0.95773 2.79968,3.41782 2.79968,7.38156 z" fill="#ffffff" />
                        <path d="m 153.63932,117.38748 c 0,1.24922 -0.21397,5.00521 -1.4722,5.94267 l -10.74783,8.00778 9.58328,8.15318 c 1.4926,0.85435 2.32426,6.7258 2.32426,9.02536 0,3.81039 -1.63705,5.71565 -4.91099,5.71565 -1.34829,0 -2.86487,-0.45948 -4.54986,-1.37844 l -24.24287,-17.3296 c -1.10706,-0.59014 -1.66102,-1.83892 -1.66102,-3.74476 0,-1.51098 0.62604,-2.82495 1.87769,-3.94177 l 24.55537,-16.46007 c 1.68514,-0.7883 3.37028,-1.18317 5.05543,-1.18317 2.7925,0 4.18874,1.41291 4.18874,4.23742 z" fill="#ffffff" />
                    </g>
                </svg>
                [[++site_name]]
            </a>
            <button class="navbar-toggler nogid" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Menu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- OffCanvas Bootstrap -->
            <div class="offcanvas offcanvas-end overflow-auto" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                <button type="button" class="btn-close btn-close-white text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                <div class="sidenav-header text-light ">
                    <div class="sidenav-style1"></div>
                    <div class="sidenav-title py-3">
                        <h6 class="user-name mb-0">[[++site_name]]</h6><span>Stricken was wirklich passt</span>
                    </div>
                </div>
                <div class="flex-grow-1">
                    [[!pdoMenu?
                        &parents=`0`
                        &resources=`4,6,9`
                        &tpl=`@INLINE <li[[+classes]]><a class="nav-link [[+attributes]]" href="[[+link]]">  <i class="bi bi-[[+attributes]]"></i>[[+menutitle]]</a>[[+wrapper]]</li>`
                        &rowClass=`nav-item`
                        &outerClass=`sidenav-body navbar-nav [[-flex-grow-1]] justify-content-start`
                    ]]
                    <!-- Install button, hidden by default -->
                    <!-- Die Buttons kommen hier weg. Die kommen auf die Settings-Seite in Abhängigkeit vom Status User -->
                    <div id="installContainer" class="d-none">
                        <button id="installBtn" class="btn btn-secondary d-flex align-items-center justify-content-center" type="button">Install</button>
                        <button id="pushBtn" class="btn btn-secondary d-flex align-items-center justify-content-center" type="button" [[-class="js-push-btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"]]>Push</button>
                    </div>
                </div>
                <!-- Social Info -->
                <div class="social-info-wrap d-flex justify-content-center">
                    <a href="https://www.facebook.com/zahlenhexe.de"><i class="bi bi-facebook"></i></a><i class="bull">&bull;</i>
                    <a href="https://www.instagram.com/riwollis/"><i class="bi bi-instagram"></i></a><i class="bull">&bull;</i>
                    <a href="https://www.pinterest.de/iris_hammer_zahlenhexe">
                        <svg width="18" height="18" viewBox="0 0 15.559 20" xmlns="http://www.w3.org/2000/svg">
                            <g transform="matrix(.059149 0 0 -.059149 -30.922 36.498)" stroke-width="25.802">
                                <path id="pinterest" d="m630.92 393.44c-8.8928-46.559-19.73-91.193-51.869-114.51-9.9071 70.363 14.556 123.2 25.935 179.29-19.392 32.63 2.3332 98.259 43.197 82.082 50.297-19.882-43.551-121.25 19.442-133.93 65.783-13.204 92.629 114.12 51.836 155.52-58.919 59.817-171.54 1.4034-157.67-84.229 3.3645-20.93 24.988-27.27 8.6392-56.165-37.719 8.3519-48.979 38.106-47.523 77.77 2.3332 64.922 58.311 110.35 114.48 116.65 71.024 7.9629 137.69-26.087 146.9-92.883 10.364-75.419-32.055-157.11-108.02-151.23-20.592 1.6061-29.215 11.818-45.344 21.623z" fill="currentColor" stroke-width="85.2"/>
                            </g>
                        </svg>
                    </a><i class="bull">&bull;</i>
                    <a href="https://www.youtube.com/channel/UCWq701p1tBj1rGWOkc-1E8Q"><i class="bi bi-youtube"></i></a>
                </div>
                <!-- Copyright Info -->
                <div class="copyright-info">
                    <p>2021 © Made by <a href="https://zahlenhexe.de/">ZahlenHexe</a></p>
                </div>
            </div>
            <!-- OffCanvas Bootstrap END-->
        </div>
    </nav>