diff --git a/themes/beautifulhugo/layouts/partials/footer_custom.html b/themes/beautifulhugo/layouts/partials/footer_custom.html
index b37ac3fd6bb204fdb8163d5c624ce7baba033a56..9238f54a36ecca7e5e24ddb0fe922600fa90c090 100644
--- a/themes/beautifulhugo/layouts/partials/footer_custom.html
+++ b/themes/beautifulhugo/layouts/partials/footer_custom.html
@@ -2,3 +2,14 @@
 <script>
 anchors.add('h1,h2,h3,h4,h5,h6').remove('.page-heading > h1');
 </script>
+
+<script>
+function toggleSidebar(item) {
+  $('#site-sidebar').toggleClass('sidebar-hidden');
+  if ($('#site-sidebar').width() != 300) {
+    item.innerHTML = "&#x25B2"
+  } else {
+    item.innerHTML = "&#x25BC"
+  }
+}
+</script>
diff --git a/themes/beautifulhugo/layouts/partials/nav.html b/themes/beautifulhugo/layouts/partials/nav.html
index 86f99c0eeb94b3909eb0c468b74fc7df641fe658..334da1bb3c1204dd23cc70b72d929589c80774db 100644
--- a/themes/beautifulhugo/layouts/partials/nav.html
+++ b/themes/beautifulhugo/layouts/partials/nav.html
@@ -7,6 +7,7 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
+      <a class="navbar-brand navbar-sitebar" href="javascript:void(0)" onclick="toggleSidebar(this)">&#x25BC</a>
       <a class="navbar-brand" href="{{ "" | absLangURL }}">{{ .Site.Title }}</a>
     </div>
 
@@ -72,3 +73,24 @@
 
   </div>
 </nav>
+
+
+<nav class="sidebar sidebar-hidden" id="site-sidebar">
+      <ul>
+        {{ range sort .Site.Sections.ByTitle }}
+          <li class="sidebar-section">
+            <a href="{{ .URL | relLangURL }}">{{ .Title }}</a>
+            <div class="sidebar-pages">
+              <ul>
+                {{ range .Pages }}
+                  <li class="sidebar-page">
+                    <a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+                  </li>
+                {{ end }}
+              </ul>
+            </div>
+          </li>
+        {{ end }}
+
+      </ul>
+</nav>
diff --git a/themes/beautifulhugo/static/css/main.css b/themes/beautifulhugo/static/css/main.css
index 6df3784e40ac70bcf62bfde98fbb549d3bf1e85c..3833897354e7e4433294575545c296cb3bd66840 100644
--- a/themes/beautifulhugo/static/css/main.css
+++ b/themes/beautifulhugo/static/css/main.css
@@ -172,6 +172,12 @@ img {
   }
 }
 
+@media only screen and (min-width: 1450px) {
+  .navbar-custom .navbar-sitebar {
+    display: none;
+  }
+}
+
 .navbar-custom .avatar-container {
   opacity: 1;
   position: absolute;
@@ -817,3 +823,54 @@ div.notices.tip p:first-child:after {
   color: #e67d1e;
   text-decoration: none;
 }
+
+/* --- Sidebar --- */
+
+.sidebar {
+  height: 100%;
+  width: 300px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #414141;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 100px;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.sidebar-hidden {
+  width: 0px;
+}
+
+@media only screen and (min-width: 1450px) {
+  .sidebar-hidden {
+    width: 300px;
+  }
+}
+
+.sidebar-section a {
+  color: #e67d1e;
+}
+
+.sidebar ul {
+  padding-left: 20px;
+}
+
+.sidebar-page a {
+  color: #bebebe;
+}
+
+.sidebar-page li {
+  list-style-type: circle;
+}
+
+.sidebar-section {
+  font-size: 18px;
+}
+
+.sidebar-page {
+  font-size: 14px;
+}
+