Offcanvas Sidebar Navigation

Videos
#1
10 Likes
#2

Thank you Ben, perfect timing to issue this video :+1::wink:

1 Like
#3

I have this really close to working but just can’t seem to get it. You have a style.css file you are linking to. Is there some other styles in there that you need that you don’t mention here? everything seems to work but doesn’t show the dynamic offcanvas component when above the large break. Take a look at my page:
https://testing.hitekfab.com/dashboard5.asp

If you go below that size then all seems to work as it should?

<!doctype html>
<html>

<head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Hitek Dashboard</title>

    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="stylefab.css" />
    <script src="dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
    <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
</head>

<body id="dashboard" is="dmx-app">
    <header class="">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg  justify-content-between">
                        <a class="navbar-brand me-auto ms-auto" href="#">HiTek Dashboard</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavigation" aria-controls="offcanvasNavigation" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="offcanvas offcanvas-start" id="offcanvasNavigation" is="dmx-bs5-offcanvas" tabindex="-1">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title">Hitek Dashboard</h5>
                        <button class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#offcanvasNavigation"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="row">
                            <div class="col">
                                <nav class="navbar">
                                    <div class="navbar-nav">
                                        <a class="nav-item nav-link active" href="#">Home</a>
                                        <a class="nav-item nav-link" href="#">About</a>
                                        <a class="nav-item nav-link" href="#">Contact</a>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-9">
                <main>
                    <div class="contentArea">
                        <p>Enter your content here</p>
                    </div>
                </main>
            </div>
        </div>
    </div>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>
#4

Well you need to select your offcanvas and set its responsive option to Responsive Large, in the dropdown.

#5

@Teodor ah, I bet that is the part i skipped. I think I did it because that option wasn’t a choice. I have 6.2.2 but it doesn’t show that. This is still on an older larger site that is still running asp. or maybe I need to do a full uninstall and try to reinstall 6.2.2?

Capture
Capture813Ă—1023 59.4 KB

#6

Sorry @ben to takeover your post. I was able to change offcanvas to offcanvas-lg and that fixed the issue. Not sure on why that choice isn’t showing up on the wappler GUI. Might need to reinstall from scratch. But really appreciate the video!

1 Like
#7

ok, So I’m chiming back in on this, in case anyone else has same issue. I tried to create this page again on a mac and couldn’t see the responsive stuff as in the above image. So I made a separate post about it. Turns out you have to have Beta extensions enabled for it to work. Just in case anyone else is having same issue.

1 Like