Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sidebar collapse is not working in Vertical Layout with Navbar #289

Open
my-reminiscence opened this issue Apr 4, 2024 · 14 comments
Open

Sidebar collapse is not working in Vertical Layout with Navbar #289

my-reminiscence opened this issue Apr 4, 2024 · 14 comments
Labels
type: bug Something isn't working

Comments

@my-reminiscence
Copy link

Sidebar collapse is not working in Vertical Layout with Navbar either on localhost or server.

`

<title>Vertical Navbar - Mazer Admin Dashboard</title> 
<link rel="shortcut icon" href="./assets/compiled/svg/favicon.svg" type="image/x-icon">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAEs2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMzIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC4xIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTAzLTMxVDEwOjUwOjIzKzAyOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz5V57uAAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz9maORHo1hYKC9hISNGTWwsRn4VFmOUX5uZZ36oeTOv954kW2WrKLHxa8FfwFZZK0WkZClrYoOe87ypmWTO7dzzud97z+nec8ETzaiaWd4NWtYyIiNhZWZ2TvE946WZSjqoj6mmPjE1HKWkfdxR5sSbgFOr9Ll/rXoxYapQVik8oOqGJTwqPL5i6Q5vCzeo6dii8KlwpyEXFL519LjLLw6nXP5y2IhGBsFTJ6ykijhexGra0ITl5bRqmWU1fx/nJTWJ7PSUxBbxJkwijBBGYYwhBgnRQ7/MIQIE6ZIVJfK7f/MnyUmuKrPOKgZLpEhj0SnqslRPSEyKnpCRYdXp/9++msneoFu9JgwVT7b91ga+LfjetO3PQ9v+PgLvI1xkC/m5A+h7F32zoLXug38dzi4LWnwHzjeg8UGPGbFfySvuSSbh9QRqZ6H+Gqrm3Z7l9zm+h+iafNUV7O5Bu5z3L/wAdthn7QIme0YAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJTSURBVFiF7Zi9axRBGIefEw2IdxFBRQsLWUTBaywSK4ubdSGVIY1Y6HZql8ZKCGIqwX/AYLmCgVQKfiDn7jZeEQMWfsSAHAiKqPiB5mIgELWYOW5vzc3O7niHhT/YZvY37/swM/vOzJbIqVq9uQ04CYwCI8AhYAlYAB4Dc7HnrOSJWcoJcBS4ARzQ2F4BZ2LPmTeNuykHwEWgkQGAet9QfiMZjUSt3hwD7psGTWgs9pwH1hC1enMYeA7sKwDxBqjGnvNdZzKZjqmCAKh+U1kmEwi3IEBbIsugnY5avTkEtIAtFhBrQCX2nLVehqyRqFoCAAwBh3WGLAhbgCRIYYinwLolwLqKUwwi9pxV4KUlxKKKUwxC6ZElRCPLYAJxGfhSEOCz6m8HEXvOB2CyIMSk6m8HoXQTmMkJcA2YNTHm3congOvATo3tE3A29pxbpnFzQSiQPcB55IFmFNgFfEQeahaAGZMpsIJIAZWAHcDX2HN+2cT6r39GxmvC9aPNwH5gO1BOPFuBVWAZue0vA9+A12EgjPadnhCuH1WAE8ivYAQ4ohKaagV4gvxi5oG7YSA2vApsCOH60WngKrA3R9IsvQUuhIGY00K4flQG7gHH/mLytB4C42EgfrQb0mV7us8AAMeBS8mGNMR4nwHamtBB7B4QRNdaS0M8GxDEog7iyoAguvJ0QYSBuAOcAt71Kfl7wA8DcTvZ2KtOlJEr+ByyQtqqhTyHTIeB+ONeqi3brh+VgIN0fohUgWGggizZFTplu12yW8iy/YLOGWMpDMTPXnl+Az9vj2HERYqPAAAAAElFTkSuQmCC" type="image/png">
<script src="assets/static/js/initTheme.js"></script>
Logo
  • Menu
    •         <li
            class="sidebar-item  ">
            <a href="index.html" class='sidebar-link'>
                <i class="bi bi-grid-fill"></i>
                <span>Dashboard</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-stack"></i>
                <span>Components</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="component-accordion.html" class="submenu-link">Accordion</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-alert.html" class="submenu-link">Alert</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-badge.html" class="submenu-link">Badge</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-breadcrumb.html" class="submenu-link">Breadcrumb</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-button.html" class="submenu-link">Button</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-card.html" class="submenu-link">Card</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-carousel.html" class="submenu-link">Carousel</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-collapse.html" class="submenu-link">Collapse</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-dropdown.html" class="submenu-link">Dropdown</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-list-group.html" class="submenu-link">List Group</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-modal.html" class="submenu-link">Modal</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-navs.html" class="submenu-link">Navs</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-pagination.html" class="submenu-link">Pagination</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-progress.html" class="submenu-link">Progress</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-spinner.html" class="submenu-link">Spinner</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-toasts.html" class="submenu-link">Toasts</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="component-tooltip.html" class="submenu-link">Tooltip</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-collection-fill"></i>
                <span>Extra Components</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="extra-component-avatar.html" class="submenu-link">Avatar</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="extra-component-divider.html" class="submenu-link">Divider</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="extra-component-date-picker.html" class="submenu-link">Date Picker</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="extra-component-sweetalert.html" class="submenu-link">Sweet Alert</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="extra-component-toastify.html" class="submenu-link">Toastify</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="extra-component-rating.html" class="submenu-link">Rating</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item active has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-grid-1x2-fill"></i>
                <span>Layouts</span>
            </a>
            
            <ul class="submenu active">
                
                <li class="submenu-item  ">
                    <a href="layout-default.html" class="submenu-link">Default Layout</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="layout-vertical-1-column.html" class="submenu-link">1 Column</a>
                    
                </li>
                
                <li class="submenu-item active ">
                    <a href="layout-vertical-navbar.html" class="submenu-link">Vertical Navbar</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="layout-rtl.html" class="submenu-link">RTL Layout</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="layout-horizontal.html" class="submenu-link">Horizontal Menu</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li class="sidebar-title">Forms &amp; Tables</li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-hexagon-fill"></i>
                <span>Form Elements</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="form-element-input.html" class="submenu-link">Input</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-element-input-group.html" class="submenu-link">Input Group</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-element-select.html" class="submenu-link">Select</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-element-radio.html" class="submenu-link">Radio</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-element-checkbox.html" class="submenu-link">Checkbox</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-element-textarea.html" class="submenu-link">Textarea</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="form-layout.html" class='sidebar-link'>
                <i class="bi bi-file-earmark-medical-fill"></i>
                <span>Form Layout</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-journal-check"></i>
                <span>Form Validation</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="form-validation-parsley.html" class="submenu-link">Parsley</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-pen-fill"></i>
                <span>Form Editor</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="form-editor-quill.html" class="submenu-link">Quill</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-editor-ckeditor.html" class="submenu-link">CKEditor</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-editor-summernote.html" class="submenu-link">Summernote</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="form-editor-tinymce.html" class="submenu-link">TinyMCE</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="table.html" class='sidebar-link'>
                <i class="bi bi-grid-1x2-fill"></i>
                <span>Table</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-file-earmark-spreadsheet-fill"></i>
                <span>Datatables</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="table-datatable.html" class="submenu-link">Datatable</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="table-datatable-jquery.html" class="submenu-link">Datatable (jQuery)</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li class="sidebar-title">Extra UI</li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-pentagon-fill"></i>
                <span>Widgets</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="ui-widgets-chatbox.html" class="submenu-link">Chatbox</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-widgets-pricing.html" class="submenu-link">Pricing</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-widgets-todolist.html" class="submenu-link">To-do List</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-egg-fill"></i>
                <span>Icons</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="ui-icons-bootstrap-icons.html" class="submenu-link">Bootstrap Icons </a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-icons-fontawesome.html" class="submenu-link">Fontawesome</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-icons-dripicons.html" class="submenu-link">Dripicons</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-bar-chart-fill"></i>
                <span>Charts</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="ui-chart-chartjs.html" class="submenu-link">ChartJS</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-chart-apexcharts.html" class="submenu-link">Apexcharts</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="ui-file-uploader.html" class='sidebar-link'>
                <i class="bi bi-cloud-arrow-up-fill"></i>
                <span>File Uploader</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-map-fill"></i>
                <span>Maps</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="ui-map-google-map.html" class="submenu-link">Google Map</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="ui-map-jsvectormap.html" class="submenu-link">JS Vector Map</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-three-dots"></i>
                <span>Multi-level Menu</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  has-sub">
                    <a href="#" class="submenu-link">First Level</a>
                    
                    <ul class="submenu submenu-level-2 ">

                        
                        <li class="submenu-item ">
                            <a href="ui-multi-level-menu.html" class="submenu-link">Second Level</a>
                        </li>
                        
                        <li class="submenu-item ">
                            <a href="#" class="submenu-link">Second Level Menu</a>
                        </li>
                        

                    </ul>
                    
                </li>
                
                <li class="submenu-item  has-sub">
                    <a href="#" class="submenu-link">Another Menu</a>
                    
                    <ul class="submenu submenu-level-2 ">

                        
                        <li class="submenu-item ">
                            <a href="#" class="submenu-link">Second Level Menu</a>
                        </li>
                        

                    </ul>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li class="sidebar-title">Pages</li>
        
        <li
            class="sidebar-item  ">
            <a href="application-email.html" class='sidebar-link'>
                <i class="bi bi-envelope-fill"></i>
                <span>Email Application</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="application-chat.html" class='sidebar-link'>
                <i class="bi bi-chat-dots-fill"></i>
                <span>Chat Application</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="application-gallery.html" class='sidebar-link'>
                <i class="bi bi-image-fill"></i>
                <span>Photo Gallery</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="application-checkout.html" class='sidebar-link'>
                <i class="bi bi-basket-fill"></i>
                <span>Checkout Page</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-person-badge-fill"></i>
                <span>Authentication</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="auth-login.html" class="submenu-link">Login</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="auth-register.html" class="submenu-link">Register</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="auth-forgot-password.html" class="submenu-link">Forgot Password</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li
            class="sidebar-item  has-sub">
            <a href="#" class='sidebar-link'>
                <i class="bi bi-x-octagon-fill"></i>
                <span>Errors</span>
            </a>
            
            <ul class="submenu ">
                
                <li class="submenu-item  ">
                    <a href="error-403.html" class="submenu-link">403</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="error-404.html" class="submenu-link">404</a>
                    
                </li>
                
                <li class="submenu-item  ">
                    <a href="error-500.html" class="submenu-link">500</a>
                    
                </li>
                
            </ul>
            

        </li>
        
        <li class="sidebar-title">Raise Support</li>
        
        <li
            class="sidebar-item  ">
            <a href="https://zuramai.github.io/mazer/docs" class='sidebar-link'>
                <i class="bi bi-life-preserver"></i>
                <span>Documentation</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md" class='sidebar-link'>
                <i class="bi bi-puzzle"></i>
                <span>Contribute</span>
            </a>
            

        </li>
        
        <li
            class="sidebar-item  ">
            <a href="https://github.com/zuramai/mazer#donation" class='sidebar-link'>
                <i class="bi bi-cash"></i>
                <span>Donate</span>
            </a>
            

        </li>
        
    </ul>
</div>

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-lg-0">
                            <li class="nav-item dropdown me-1">
                                <a class="nav-link active dropdown-toggle text-gray-600" href="#" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class='bi bi-envelope bi-sub fs-4'></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                                    <li>
                                        <h6 class="dropdown-header">Mail</h6>
                                    </li>
                                    <li><a class="dropdown-item" href="#">No new mail</a></li>
                                </ul>
                            </li>
                            <li class="nav-item dropdown me-3">
                                <a class="nav-link active dropdown-toggle text-gray-600" href="#" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                                    <i class='bi bi-bell bi-sub fs-4'></i>
                                    <span class="badge badge-notification bg-danger">7</span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end notification-dropdown" aria-labelledby="dropdownMenuButton">
                                    <li class="dropdown-header">
                                        <h6>Notifications</h6>
                                    </li>
                                    <li class="dropdown-item notification-item">
                                        <a class="d-flex align-items-center" href="#">
                                            <div class="notification-icon bg-primary">
                                                <i class="bi bi-cart-check"></i>
                                            </div>
                                            <div class="notification-text ms-4">
                                                <p class="notification-title font-bold">Successfully check out</p>
                                                <p class="notification-subtitle font-thin text-sm">Order ID #256</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="dropdown-item notification-item">
                                        <a class="d-flex align-items-center" href="#">
                                            <div class="notification-icon bg-success">
                                                <i class="bi bi-file-earmark-check"></i>
                                            </div>
                                            <div class="notification-text ms-4">
                                                <p class="notification-title font-bold">Homework submitted</p>
                                                <p class="notification-subtitle font-thin text-sm">Algebra math homework</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <p class="text-center py-2 mb-0"><a href="#">See all notification</a></p>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <div class="dropdown">
                            <a href="#" data-bs-toggle="dropdown" aria-expanded="false">
                                <div class="user-menu d-flex">
                                    <div class="user-name text-end me-3">
                                        <h6 class="mb-0 text-gray-600">John Ducky</h6>
                                        <p class="mb-0 text-sm text-gray-600">Administrator</p>
                                    </div>
                                    <div class="user-img d-flex align-items-center">
                                        <div class="avatar avatar-md">
                                            <img src="./assets/compiled/jpg/1.jpg">
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton" style="min-width: 11rem;">
                                <li>
                                    <h6 class="dropdown-header">Hello, John!</h6>
                                </li>
                                <li><a class="dropdown-item" href="#"><i class="icon-mid bi bi-person me-2"></i> My
                                        Profile</a></li>
                                <li><a class="dropdown-item" href="#"><i class="icon-mid bi bi-gear me-2"></i>
                                        Settings</a></li>
                                <li><a class="dropdown-item" href="#"><i class="icon-mid bi bi-wallet me-2"></i>
                                        Wallet</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#"><i
                                            class="icon-mid bi bi-box-arrow-left me-2"></i> Logout</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <div id="main-content">

Vertical Layout with Navbar

Navbar will appear on the top of the page.

  1. Dashboard
  2. Layout Vertical Navbar

About Vertical Navbar

Vertical Navbar is a layout option that you can use with Mazer. 

            <p>In case you want the navbar to be sticky on top while scrolling, add <code>.navbar-fixed</code> class alongside with <code>.layout-navbar</code> class.</p>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Dummy Text</h4>
        </div>
        <div class="card-body">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis tincidunt tempus. Duis vitae facilisis enim, at rutrum lacus. Nam at nisl ut ex egestas placerat sodales id quam. Aenean sit amet nibh quis lacus pellentesque venenatis vitae at justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse venenatis tincidunt odio ut rutrum. Maecenas ut urna venenatis, dapibus tortor sed, ultrices justo. Phasellus scelerisque, nibh quis gravida venenatis, nibh mi lacinia est, et porta purus nisi eget nibh. Fusce pretium vestibulum sagittis. Donec sodales velit cursus convallis sollicitudin. Nunc vel scelerisque elit, eget facilisis tellus. Donec id molestie ipsum. Nunc tincidunt tellus sed felis vulputate euismod.
            </p>
            <p>
                Proin accumsan nec arcu sit amet volutpat. Proin non risus luctus, tempus quam quis, volutpat orci. Phasellus commodo arcu dui, ut convallis quam sodales maximus. Aenean sollicitudin massa a quam fermentum, et efficitur metus convallis. Curabitur nec laoreet ipsum, eu congue sem. Nunc pellentesque quis erat at gravida. Vestibulum dapibus efficitur felis, vel luctus libero congue eget. Donec mollis pellentesque arcu, eu commodo nunc porta sit amet. In commodo augue id mauris tempor, sed dignissim nulla facilisis. Ut non mattis justo, ut placerat justo. Vestibulum scelerisque cursus facilisis. Suspendisse velit justo, scelerisque ac ultrices eu, consectetur ac odio.
            </p>                
            <p>
                In pharetra quam vel lobortis fermentum. Nulla vel risus ut sapien porttitor volutpat eu ac lorem. Vestibulum porta elit magna, ut ultrices sem fermentum ut. Vestibulum blandit eros ut imperdiet porttitor. Pellentesque tempus nunc sed augue auctor eleifend. Sed nisi sem, lobortis eget faucibus placerat, hendrerit vitae elit. Vestibulum elit orci, pretium vel libero at, imperdiet congue lectus. Praesent rutrum id turpis non aliquam. Cras dignissim, metus vitae aliquam faucibus, elit augue dignissim nulla, bibendum consectetur leo libero a tortor. Vestibulum non tincidunt nibh. Ut imperdiet elit vel vehicula ultricies. Nulla maximus justo sit amet fringilla laoreet. Aliquam malesuada diam in augue mattis aliquam. Pellentesque id eros dignissim, dapibus sem ac, molestie dolor. Mauris purus lacus, tempor sit amet vestibulum vitae, ultrices eu urna. 
            </p>
        </div>
    </div>
</section>

        </div>
        <footer>
<div class="footer clearfix mb-0 text-muted">
    <div class="float-start">
        <p>2023 &copy; Mazer</p>
    </div>
    <div class="float-end">
        <p>Crafted with <span class="text-danger"><i class="bi bi-heart-fill icon-mid"></i></span>
            by <a href="https://saugi.me">Saugi</a></p>
    </div>
</div>
<script src="assets/static/js/components/dark.js"></script> <script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script> 
<script src="assets/compiled/js/app.js"></script>
`
@alfianchii
Copy link
Collaborator

Can you provide screenshots? The Vertical Navbar looks fine TBH.

image

@my-reminiscence
Copy link
Author

Not working

Screenshot 2024-04-05 at 4 26 24 AM

@alfianchii
Copy link
Collaborator

What browser are you using?

@my-reminiscence
Copy link
Author

Firefox 124.0.2

@alfianchii
Copy link
Collaborator

Firefox 124.0.2

Can you provide any gif or video for the demonstration of the error, sir?

@my-reminiscence
Copy link
Author

Screen.Recording.2024-04-05.at.6.05.20.PM.mov

check this

@alfianchii
Copy link
Collaborator

Is it just on Firefox? How about on your other browsers (such Chrome, Opera, etc)?

@my-reminiscence
Copy link
Author

Same with Safari and Chrome.

@alfianchii
Copy link
Collaborator

Same with Safari and Chrome.

I just tried in other browsers such as Brave or even Firefox on 124.0.2 version. And after all, it looks fine. There is no trouble in the vertical navbar like you mentioned earlier. Neither in production or local development.

@alfianchii
Copy link
Collaborator

You can try it on another PC, @my-reminiscence. If the issue still persists, please lemme know~

@alfianchii
Copy link
Collaborator

And sir, can you please provide what is in your browser console?

@github-actions GitHub Actions
Copy link

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

@github-actions github-actions bot added the stale label Apr 20, 2024
@alfianchii alfianchii added type: bug Something isn't working and removed type: bug Something isn't working stale labels Apr 20, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented May 5, 2024

This issue has been automatically marked as stale because it has been open for 14 days without activity. It will be closed if no further activity occurs within the next 14 days. If this is still an issue, just leave a comment or remove the "stale" label.

@github-actions github-actions bot added the stale label May 5, 2024
@alfianchii alfianchii added type: bug Something isn't working and removed stale labels May 9, 2024
@herculanosilva
Copy link

This problem persists.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@alfianchii @herculanosilva @my-reminiscence