add sidebar title for custom names

assets/_main.scss

@@ -1,6 +1,5 @@
 @import "_dcl-ui.scss";
 @import "_home.scss";
-
 html {
   font-size: $font-size-base;
   scroll-behavior: smooth;
@@ -279,6 +278,7 @@ body[dir="rtl"] .book-menu {
   position: relative;
   margin: $padding-16 0;
   border-bottom: 1px solid transparent;
+  width: 356px;
   #book-search-input {
     display: flex;
     align-items: center;
@@ -391,6 +391,12 @@ body[dir="rtl"] .book-menu {
 }
 
 
+@media screen and (max-width: 991px) {
+  .book-search {
+    width: auto !important;
+  }
+}
+
 @media screen and (min-width: $mobile-breakpoint) {
   .book-search {
     position: relative;

layouts/partials/docs/menu-filetree.html

@@ -40,8 +40,8 @@
       {{- partial "docs/title" .Page -}}
     </a>
   {{ else if .Page.Content }}
-    <a href="{{ .Page.RelPermalink }}" class="{{ if $current }}active{{ end }}">
+    <a href="{{ .Page.RelPermalink }}" class="{{ if $current }}active{{ end }}" id="{{ .Page.Kind }}">
-      {{- partial "docs/title" .Page -}}
+      {{- partial "docs/sidebar-title" .Page -}}
     </a>
   {{ else }}
     <span>{{- partial "docs/title" .Page -}}</span>

layouts/partials/docs/sidebar-title.html

@@ -0,0 +1,17 @@
+<!--
+  Partial to generate page name from Title or File name.
+  Accepts Page as context
+-->
+{{ $title := "" }}
+
+{{ if .Params.sidebartitle }}
+  {{ $title = .Params.sidebartitle }}
+{{ else if .Title }}
+  {{ $title = .Title }}
+{{ else if and .IsSection .File }}
+  {{ $title = path.Base .File.Dir | humanize | title }}
+{{ else if and .IsPage .File }}
+  {{ $title = .File.BaseFileName | humanize | title }}
+{{ end }}
+
+{{ return $title }}