nl_tokens: 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 .
pl_tokens: 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 . <mask> ( ) ; 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' ) ; } }