The files we edit and add are as follows:

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

1.1 Create _includes/body/nav.html file

Add in the code below:

<!--네비게이션바에 메뉴선정-->
<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 에서 추가합니다 -->
          
            <!-- spread 함수는 js 파일로 작성하고 my-head.html에 추가합니다 -->
            <!-- spread-btn class는 my-style.scss에 추가합니다. -->
          <button class="spread-btn">
                <!-- marterial stylesheet를 my-head.html에 추가합니다 -->
              <span id="spread-icon-10" class="material-icons">arrow_right</span>
          </button>
          
          <a
            
            href="/project/"
            class="sidebar-nav-item "
            
            >
            Project
          </a>

          
          <div id="submenu-10" class="menu-wrapper submenu hide">
            <ul style="list-style: none;">
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/internship/"
                  >
                  Internship
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/side-projects/"
                  >
                  Side-Projects
                </a>
              </li>
            
            </ul>
          </div>
          
       </div>
      </li>
    
      
      <!-- 메뉴 각각을 식별하기위한 인덱스 -->
      
      <li>
        <div class="menu-wrapper" onmouseover="javascript:spread(11)" onmouseout="javascript:spread(11)">
           <!-- submenu 변수는 _config.yml 에서 추가합니다 -->
          
          <a
            
            href="/study/"
            class="sidebar-nav-item "
            
            >
            Study
          </a>

          
       </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="/githubpages/"
                  >
                  GithubPages
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/library/"
                  >
                  Library
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/mldl/"
                  >
                  ML/DL
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/class/"
                  >
                  Class
                </a>
              </li>
            
              <li>
                <a
                  class="sidebar-nav-item "
                  href="/blog-etc/"
                  >
                  blog-etc
                </a>
              </li>
            
            </ul>
          </div>
          
       </div>
      </li>
    
  
</ul>

1.2 Create a folder “assets/js” and a file “sidebar-folder.js” inside the folder

Add in the code below:

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 Add in the code below inside “_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: 2;
  ul{
    margin: 0;
    padding: 0 1.25rem;
  }
}
.submenu.menu-wrapper.hide{
  display: none;
}

2.2 Add in the code below inside the file “_includes > my-head.html”

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