feat: Sticky head sidebar

Resolves #235
spring-io · May 9, 2024 · e93882d · e93882d
1 parent 420af97
commit e93882d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -177,6 +177,12 @@ html.is-clipped--nav {
 
 .nav-panel-menu .context {
   padding: 0.8rem 1rem;
+  padding-bottom: 0;
+  margin-bottom: 0.5rem;
+  position: sticky;
+  top: 0;
+  background-color: var(--body-background-color);
+  z-index: 99;
 }
 
 .nav-panel-menu .context .title {
@@ -252,9 +258,10 @@ html.dark-theme button.browse-version:hover {
 .nav-menu .search {
   position: relative;
   border: 0 none;
-  height: 44px;
+  height: 40px;
   display: none;
-  margin-bottom: 0.5rem;
+  margin: 0 -1rem;
+  margin-top: 1rem;
 }
 
 .nav-resize {

diff --git a/src/css/vendor/search.css b/src/css/vendor/search.css
@@ -12,7 +12,7 @@
   color: var(--body-font-color);
   background: var(--body-background-color);
   text-align: left;
-  padding-left: 35px;
+  padding-left: 50px;
   border: 1px solid var(--nav-panel-divider-color);
   border-left-width: 0;
   border-right-width: 0;
@@ -67,7 +67,7 @@
 .DocSearch-Button svg {
   position: absolute;
   top: 10px;
-  left: 10px;
+  left: 25px;
   width: 20px;
   fill: var(--body-font-color);
 }
@@ -333,5 +333,9 @@ a.ais-Hits-item:hover {
   .DocSearch-Button {
     border-left-width: 1px;
     border-right-width: 1px;
+    padding-left: 35px;
+  }
+  .DocSearch-Button svg {
+    left: 10px;
   }
 }
diff --git a/src/partials/nav-explore.hbs b/src/partials/nav-explore.hbs
@@ -18,4 +18,5 @@
           d="M384,224c-17.7,0-32,14.3-32,32s14.3,32,32,32s32-14.3,32-32S401.7,224,384,224L384,224z"
         ></path></g></svg>
   </button>
+  {{> nav-search}}
 </div>
diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs
@@ -1,4 +1,3 @@
-{{> nav-search}}
 {{#with page.navigation}}
 {{> nav-tree navigation=this}}
 {{/with}}