templates/zebra/src/js/app.core.js
function breakNavbarMenu() {
        // we set a reference to the actual width on first call.
        if (!navbarMenuActuallWidth) {
            navbarMenuActuallWidth = $navbarMenu.width() || 500;
        }

        // if we have a sidebar (API route), we'll check the difference with the
        // sidebar width, otherwise we'll check with the navbar brand with.
        var diff = $sidebarWrapper && $sidebarWrapper.length ? app.SIDEBAR_WIDTH : $navbarBrand.width();
        var breakMenu = ($navbarInner.width() || 0) - diff <= navbarMenuActuallWidth + 50;
        // console.log($navbarInner.width(), '-', $navbarBrand.width(), '<=', navbarMenuActuallWidth + 50, '»', breakMenu);
        if (breakMenu) {
            if ($nbmBtn.hasClass('break')) return;
            $nbmBtn.addClass('break');
            $navbarMenu.addClass('break');
            $navbarList.addClass('break');
        } else {
            toggleHamMenu(false);
            if (!$nbmBtn.hasClass('break')) return;
            $nbmBtn.removeClass('break');
            $navbarMenu.removeClass('break');
            $navbarList.removeClass('break');
        }
    }
function breakNavbarMenu() {
        // we set a reference to the actual width on first call.
        if (!navbarMenuActuallWidth) {
            navbarMenuActuallWidth = $navbarMenu.width() || 500;
        }

        // if we have a sidebar (API route), we'll check the difference with the
        // sidebar width, otherwise we'll check with the navbar brand with.
        var diff = $sidebarWrapper && $sidebarWrapper.length ? app.SIDEBAR_WIDTH : $navbarBrand.width();
        var breakMenu = ($navbarInner.width() || 0) - diff <= navbarMenuActuallWidth + 50;
        // console.log($navbarInner.width(), '-', $navbarBrand.width(), '<=', navbarMenuActuallWidth + 50, '»', breakMenu);
        if (breakMenu) {
            if ($nbmBtn.hasClass('break')) return;
            $nbmBtn.addClass('break');
            $navbarMenu.addClass('break');
            $navbarList.addClass('break');
        } else {
            toggleHamMenu(false);
            if (!$nbmBtn.hasClass('break')) return;
            $nbmBtn.removeClass('break');
            $navbarMenu.removeClass('break');
            $navbarList.removeClass('break');
        }
    }
function breakNavbarMenu ( ) { // we set a reference to the actual width on first call. if ( ! navbarMenuActuallWidth ) { navbarMenuActuallWidth = $navbarMenu . width ( ) || 500 ; } // if we have a sidebar (API route), we'll check the difference with the // sidebar width, otherwise we'll check with the navbar brand with. var diff = $sidebarWrapper && $sidebarWrapper . length ? app . SIDEBAR_WIDTH : $navbarBrand . width ( ) ; var breakMenu = ( $navbarInner . width ( ) || 0 ) - diff <= navbarMenuActuallWidth + 50 ; // console.log($navbarInner.width(), '-', $navbarBrand.width(), '<=', navbarMenuActuallWidth + 50, '»', breakMenu); if ( breakMenu ) { if ( $nbmBtn . hasClass ( 'break' ) ) return ; $nbmBtn . addClass ( 'break' ) ; $navbarMenu . addClass ( 'break' ) ; $navbarList . addClass ( 'break' ) ; } else { toggleHamMenu ( false ) ; if ( ! $nbmBtn . hasClass ( 'break' ) ) return ; $nbmBtn . removeClass ( 'break' ) ; $navbarMenu . removeClass ( 'break' ) ; $navbarList . removeClass ( 'break' ) ; } }
We'll determine the breakpoint by the navbar menu width. this menu can
have any width since the end-user can add nav-items freely when he/she
builds the documentation. So instead of media queries in CSS (which only
watch for screen widths, not elements), we set the breakpoint here via
JS.
@private
We ll determine the breakpoint by the navbar menu width . this menu can have any width since the end - user can add nav - items freely when he / she builds the documentation . So instead of media queries in CSS ( which only watch for screen widths not elements ) we set the breakpoint here via JS .