[Bootstrap] 'SB Admin 2' Template 네비(navigation menu) 버그 수정

최근 웹 애플리케이션을 제작하면서 Bootstrap 을 사용해볼까 싶어 'SB Admin 2' 라는 Template을 기반으로 부트스트랩 공부를 하며 적용을 하고 있다.
(https://startbootstrap.com/template-overviews/sb-admin-2/)


적용을 하다보니 'SB Admin 2'의 버그를 발견하게 되었는데 많은 기능중에 아래의 기능에 버그가 있었다.

 Responsive top navigation menu with dropdown menu items

증상

1. 기본적인 아래의 화면에서
1004lucifer

2. 아래와 같이 resize를 하여 화면을 줄이면 네비게이션 메뉴가 없어지는데
1004lucifer

3. 처음부터 모바일 화면에서 새로고침(refresh/reload) 하게되었을 때 처음부터 Menu가 펼쳐진채로 나타나게 된다.
(오른쪽 상단의 메뉴 버튼을 눌렀을 때 아래와 같이 보여줘야 한다.)

아래의 'SB Admin 2' 의 스크립트를 확인해 보았다.

/*!
 * Start Bootstrap - SB Admin 2 v3.3.7+1 (http://startbootstrap.com/template-overviews/sb-admin-2)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */
$(function() {
    $('#side-menu').metisMenu();
});

//Loads the correct sidebar on window load,
//collapses the sidebar on window resize.
// Sets the min-height of #page-wrapper to window size
$(function() {
    $(window).bind("load resize", function() {
        var topOffset = 50;
        var width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        var height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    var url = window.location;
    // var element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    var element = $('ul.nav a').filter(function() {
        return this.href == url;
    }).addClass('active').parent();

    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }
});

원인
1004lucifer
문제가 된 부분은 $(window).bind("load") 이 부분 인데..
jQuery 라이브러리 로딩 후 나중에 실행이 되다보니 window 의 load 이벤트는 이미 실행이 되어버린 상황이라서 load event 가 수행이 되지 않았다.




해결방법

그렇다고 head에 넣기에는 싫어 이것저것 해보다가 결국엔 아래와 같이 추가로 collapse class 를 넣어서 해결을 했다.
(collapse 클래스가 있는경우 mobile 에선 접혀지고 desktop 에선 펼쳐지는데 굳이 처음에 뺄 이유는 없어보였다.)

<div class="navbar-default sidebar" role="navigation">
 <div class="sidebar-nav navbar-collapse collapse">
  <ul class="nav" id="side-menu">
   <li class="sidebar-search">
    <div class="input-group custom-search-form">
     <input type="text" class="form-control" placeholder="Search..." />
     <span class="input-group-btn">
     <button class="btn btn-default" type="button">
      <i class="fa fa-search"></i>
     </button>
     </span>
    </div>
    <!-- /input-group -->