SideNav always visible


Topic: SideNav always visible

Kiril asked 5 years ago

I want to use SideNav and at some places in the site, I need to have the SideMenu always displayed (fixed) and with no overlay.In the doc, it's said to use the .fixed class, but it does nothing, the menu is hidden. I used an example found in the doc. The "slim" option doesn't work either, when I click "Minimize menu" nothing happen. Here's the HTML code:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    @*<link asp-append-version="true" rel="stylesheet" href="~/css/site.css" />*@

    <link href="~/lib/mdbootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/lib/fontawesome/fontawesome-all.css" rel="stylesheet" />
    <link href="~/lib/mdbootstrap/css/mdb.css" rel="stylesheet" />
</head>
<body>
    <!-- SideNav slide-out button -->
    <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse">
        <i class="fas fa-bars"></i>
    </a>

    <!-- Sidebar navigation -->
    <div id="slide-out" class="side-nav fixed wide sn-bg-1">
        <ul class="custom-scrollbar">
            <!-- Logo -->
            <li>
                <div class="logo-wrapper sn-ad-avatar-wrapper">
                    <a href="#">
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
                             class="rounded-circle"><span>
                            Anna
                            Deynah
                        </span>
                    </a>
                </div>
            </li>
            <!--/. Logo -->
            <!-- Side navigation links -->
            <li>
                <ul class="collapsible collapsible-accordion">
                    <li>
                        <a class="collapsible-header waves-effect arrow-r active">
                            <i class="sv-slim-icon fas fa-chevron-right"></i>
                            Submit blog<i class="fas fa-angle-down rotate-icon"></i>
                        </a>
                        <div class="collapsible-body">
                            <ul>
                                <li>
                                    <a href="#" class="waves-effect active">
                                        <span class="sv-slim"> SL </span>
                                        <span class="sv-normal">Submit listing</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> RF </span>
                                        <span class="sv-normal">Registration form</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="collapsible-header waves-effect arrow-r">
                            <i class="sv-slim-icon far fa-hand-point-right"></i>
                            Instruction<i class="fas fa-angle-down rotate-icon"></i>
                        </a>
                        <div class="collapsible-body">
                            <ul>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> FB </span>
                                        <span class="sv-normal">For bloggers</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> FA </span>
                                        <span class="sv-normal">For authors</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="collapsible-header waves-effect arrow-r">
                            <i class="sv-slim-icon fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i>
                        </a>
                        <div class="collapsible-body">
                            <ul>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> I </span>
                                        <span class="sv-normal">Introduction</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> MM </span>
                                        <span class="sv-normal">Monthly meetings</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a class="collapsible-header waves-effect arrow-r">
                            <i class="sv-slim-icon far fa-envelope"></i>
                            Contact me<i class="fas fa-angle-down rotate-icon"></i>
                        </a>
                        <div class="collapsible-body">
                            <ul>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> F </span>
                                        <span class="sv-normal">FAQ</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="waves-effect">
                                        <span class="sv-slim"> W </span>
                                        <span class="sv-normal">Write a message</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a id="toggle" class="waves-effect">
                            <i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize
                            menu
                        </a>
                    </li>
                </ul>
            </li>
            <!--/. Side navigation links -->
        </ul>
        <div class="sidenav-bg rgba-blue-strong"></div>
    </div>
    <!--/. Sidebar navigation -->
    @*<script asp-append-version="true" src="~/js/main.bundle.js"></script>*@

    <script src="~/lib/mdbootstrap/js/jquery.js"></script>
    <script src="~/lib/mdbootstrap/js/bootstrap.js"></script>
    <script src="~/lib/mdbootstrap/js/popper.js"></script>
    <script src="~/lib/mdbootstrap/js/mdb.js"></script>
    <script src="~/lib/mdbootstrap/js/modules/sidenav.min.js"></script>
    <script src="~/Src/js/test.js"></script>
</body>


</html>

And the javascript:

$(document).ready(function () {

    $(".button-collapse").sideNav({
        slim: true,
        showOverlay: false
    });


    // SideNav Scrollbar Initialization
    var sideNavScrollbar = document.querySelector('.custom-scrollbar');
    var ps = new PerfectScrollbar(sideNavScrollbar);



});

Kiril commented 5 years ago

OK, my browser windows was opened at a lower resolution than the default breakpoint, so that's why the fixed class didn't worked. Setting the breakpoint to 0 did the trick. BUT the slim option still doesn't work.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.10.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags