수정 및 추가하는 파일은 다음과 같습니다.

_includes/body/nav.html
_sass/my-style.scss
assets/js/sidebar-folder.js
_includes/my-head.html
_config.yml

1.1 가장먼저 _includes/body/nav.html 파일을 만들어주세요.

아래 코드를 넣어주세요.

<!--네비게이션바에 메뉴선정-->
<span class="sr-only">Navigation:</span>
<ul>
  
    
      
      <!-- 메뉴 각각을 식별하기위한 인덱스 -->
      
      <li>
        <div class="menu-wrapper" onmouseover="javascript:spread(9)" onmouseout="javascript:spread(9)">
           <!-- submenu 변수는 _config.yml 에서 추가합니다 -->
          
          <a
            id="_drawer--opened"
            href="/about/"
            class="sidebar-nav-item "
            
            >
            About
          </a>
        
          
       </div>
      </li>
    
      
      <!-- 메뉴 각각을 식별하기위한 인덱스 -->
      
      <li>
        <div class="menu-wrapper" onmouseover="javascript:spread(10)" onmouseout="javascript:spread(10)">
           <!-- submenu 변수는 _config.yml 에서 추가합니다 -->
          
          <a
            
            href="/project/"
            class="sidebar-nav-item "
            
            >
            Project
          </a>
        
          
       </div>
      </li>
    
      
      <!-- 메뉴 각각을 식별하기위한 인덱스 -->
      
      <li>
        <div class="menu-wrapper" onmouseover="javascript:spread(11)" onmouseout="javascript:spread(11)">
           <!-- submenu 변수는 _config.yml 에서 추가합니다 -->
          
            <!-- spread 함수는 js 파일로 작성하고 my-head.html에 추가합니다 -->
            <!-- spread-btn class는 my-style.scss에 추가합니다. -->
          <button class="spread-btn">
                <!-- marterial stylesheet를 my-head.html에 추가합니다 -->
              <span id="spread-icon-11" class="material-icons">arrow_right</span>
          </button>
          
          <a
            
            href="/study/"
            class="sidebar-nav-item "
            
            >
            Study
          </a>
        
          
          <div id="submenu-11" class="menu-wrapper submenu hide">
            <ul style="list-style: none;">
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/papers/"
                  >
                  Papers
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/library/"
                  >
                  Library
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/mldl/"
                  >
                  MLDL
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/codingtest/"
                  >
                  CodingTest
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/python/"
                  >
                  Python
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/study-etc/"
                  >
                  Study-etc
                </a>
              </li>
            
            </ul>
          </div>
          
       </div>
      </li>
    
      
      <!-- 메뉴 각각을 식별하기위한 인덱스 -->
      
      <li>
        <div class="menu-wrapper" onmouseover="javascript:spread(12)" onmouseout="javascript:spread(12)">
           <!-- submenu 변수는 _config.yml 에서 추가합니다 -->
          
            <!-- spread 함수는 js 파일로 작성하고 my-head.html에 추가합니다 -->
            <!-- spread-btn class는 my-style.scss에 추가합니다. -->
          <button class="spread-btn">
                <!-- marterial stylesheet를 my-head.html에 추가합니다 -->
              <span id="spread-icon-12" class="material-icons">arrow_right</span>
          </button>
          
          <a
            
            href="/blog/"
            class="sidebar-nav-item "
            
            >
            Blog
          </a>
        
          
          <div id="submenu-12" class="menu-wrapper submenu hide">
            <ul style="list-style: none;">
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/daily/"
                  >
                  Daily
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/travel/"
                  >
                  Travel
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/aiblog/"
                  >
                  AIblog
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/blog-etc/"
                  >
                  Blog-etc
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/githubpages/"
                  >
                  GithubPages
                </a>
              </li>
            
            </ul>
          </div>
          
       </div>
      </li>
    
  
</ul>

1.2 assets/js 폴더를 만들어줍니다. 거기에 sidebar-folder.js 파일을 만들어줍니다.

아래코드를 넣어줍니다.

function spread(count){
    let submenu = document.getElementById('submenu-' + count);
    if(submenu){
        if(submenu.classList.contains('hide')) submenu.classList.remove('hide');
        else submenu.classList.add('hide');
    }

    let spreadIcon = document.getElementById('spread-icon-' + count);
    if(spreadIcon){
        if(spreadIcon.innerHTML == 'arrow_right') {
            spreadIcon.innerHTML = 'arrow_drop_down';
            spreadIcon.style.color = 'grey';
        }else{
            spreadIcon.innerHTML = 'arrow_right';
            spreadIcon.style.color = 'white';
        } 
    }
}

2.1 _sass > my-style.scss 에서 아래 코드를 추가해줍니다.

// 메뉴
.spread-btn{
  right: 15%;
  position: absolute;
  padding: 0;
  padding-top: 2px;
  border: none;
  background: none;
  color: white;
  cursor: pointer;
  z-index: 1;
}
.menu-wrapper {
  text-align: left;
  margin-left: 30%;
}
.submenu.menu-wrapper{
  right: 10%;
  position: absolute;
  background-color: rgb(34,31,32);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  width: 10rem;
  z-index: 5;
  ul{
    margin: 0;
    padding: 0 1.25rem;
  }
}
.submenu.menu-wrapper.hide{
  display: none;
}

2.2 _includes > my-head.html 에 아래코드를 추가해줍니다.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="/assets/js/sidebar-folder.js"></script>