id: 66
source: 1
name: jkBurgerOffCanvasCalc
description: 'Das Burgermenü mit OffCanvas und Untermenüf für die Berechnungen'
category: JustKnit
properties: 'a:0:{}'

-----

            [[- Die Klasse "nogid" sorgt dafür, dass das Menü ausgeblendet ist]]
            <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,24,23`
                        &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`
                    ]]
[[!pdoMenu?
        &context=`justknit`
    &parents=`[[GetID? &alias=`justknit`]],[[GetID? &alias=`rechnen`]],[[GetID? &alias=`einstellungen`]],[[GetID? &alias=`glossar`]]`
    &displayStart=`1`
    &level=`2`
    &tpl=`@INLINE <li[[+classes]]><a class="nav-link [[+attributes]]" href="[[+link]]">  <i class="bi bi-[[!+attributes]]"></i>[[+menutitle]]</a>[[+wrapper]]</li>`
    &rowClass=`nav-item`
    &innerClass=`calc`
    &outerClass=`sidenav-body navbar-nav justify-content-start`    
    &tplStart=`@INLINE <li[[+classes]]><a class="nav-link [[+attributes]]" href="[[+link]]">  <i class="bi bi-[[!+attributes]]"></i>[[+menutitle]]</a><ul[[+classes]]>[[+wrapper]]</ul></li>`
    ]]
[[-&tplStart=`<li[[+classes]]><a class="nav-link [[+attributes]]" href="[[+link]]">  <i class="bi bi-[[+attributes]]"></i>[[+menutitle]]</a></li>`
<span class="dropdown-icon"><i class="bi bi-chevron-down"></i></span>
]]

                    [[-!+isLoggedIn:is=`1`:then=`
                    <li class="nav-item last"><a class="nav-link box-arrow-right" href="[[~[[GetID? &alias=`login`]]? &service=`logout`]]">  <i class="bi bi-box-arrow-right"></i>Logout</a></li>`
                    [[!+alias:is=`login`:then=`box-arrow-right`:else:=`[[!+attributes]]`]]
                    ,[[GetID? &alias=`login`]]
                    ]]
                    
                    <!-- 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>[[!jkDate]] © Made by <a href="https://zahlenhexe.de/">ZahlenHexe</a></p>
                </div>
            </div>
            <!-- OffCanvas Bootstrap END-->