Use sticky layout

toshimaru · toshimaru · commit 443bc26d675c · 2019-03-23T17:06:24.000+09:00
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -21,38 +21,41 @@
   </script>
 </head>
 <body>
-  <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
+  <header class="navbar navbar-dark bg-dark flex-md-nowrap p-0 shadow sticky-header">
     <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">{{ site.title }}</a>
-    <form class="search-form" action="/search" method="get">
-      <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" name="q">
+    <form class="w-100" action="/search" method="get">
+      <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search" name="q">
     </form>
     <ul class="navbar-nav px-3">
       <li class="nav-item text-nowrap">
         <a class="nav-link" href="https://github.com/railsdoc/railsdoc.github.io">GitHub</a>
       </li>
     </ul>
-  </nav>
+  </header>
 
   <div class="container-fluid">
     <div class="row">
-      <nav class="col-md-2 d-none d-md-block bg-light sidebar">
-        <div class="sidebar-sticky">
+      <nav class="col-12 col-md-3 col-xl-2 d-none d-md-block bg-light sidebar-sticky">
+        <div class="sidebar-content">
           {%- include navigation.html -%}
         </div>
       </nav>
 
-      <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
+      <!-- <div class="col-12 col-md-3 col-xl-2 bg-light toc-content">
+        <div>toc-content!</div>
+      </div> -->
 
+      <main role="main" class="col-12 col-md-9 col-xl-10 py-md-3 pl-md-5">
         {{ content }}
-
         <footer class="site-footer">
           <!-- <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span> -->
         </footer>
       </main>
     </div>
   </div>
+
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
   <script src="/assets/js/app.js"></script>
 </body>
 </html>
diff --git a/src/_sass/railsdoc.scss b/src/_sass/railsdoc.scss
@@ -3,6 +3,8 @@ $grey: #aaa;
 $red: #cc0000;
 $dark-red: #990000;
 
+$navbar-height: 48px;
+
 // global
 a {
   color: $red;
@@ -17,18 +19,19 @@ code {
 }
 
 // Header
-.search-form {
-  width: 100%;
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 1030;
 }
 
 // Sidebar
-.sidebar {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
+.sidebar-sticky {
+  position: sticky;
+  order: 0;
+  top: $navbar-height;
+  height: calc(100vh - #{$navbar-height});
   z-index: 100; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 
   ul {
@@ -41,12 +44,20 @@ code {
   }
 }
 
-.sidebar-sticky {
+.toc-content {
+  position: sticky;
+  order: 2;
+  z-index: 100; /* Behind the navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+}
+
+.sidebar-content {
   position: relative;
-  top: 0;
-  height: calc(100vh - 48px);
+  max-height: calc(100vh - #{$navbar-height});
+  margin-right: -15px;
+  margin-left: -15px;
   padding-top: .5rem;
-  overflow-x: hidden;
+  overflow-x: hidden;  
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 
   a {
@@ -75,16 +86,10 @@ code {
   }
 }
 
-@supports ((position: -webkit-sticky) or (position: sticky)) {
-  .sidebar-sticky {
-    position: -webkit-sticky;
-    position: sticky;
-  }
-}
-
 // Content
 [role="main"] {
   padding-top: 133px; /* Space for fixed navbar */
+  order: 1;
 }
 
 @media (min-width: 768px) {
diff --git a/src/assets/js/app.js b/src/assets/js/app.js
@@ -1,5 +1,5 @@
 $(() => {
-  $(".sidebar .icon").on("click", function (e) {
+  $(".sidebar-sticky .icon").on("click", function (e) {
     $(this).siblings("ul").toggle();
     this.classList.toggle("icon-opened");
   });
