feat: Update sidebar

Resolves #236

Author: oodamien

src/css/nav.css

@@ -72,12 +72,14 @@ html.is-clipped--nav {
 
 .nav-list {
   margin: 0;
-  padding: 0 1rem;
+  padding: 0;
+  padding-right: 1rem;
+  padding-left: 5px;
 }
 
 .nav-menu > .nav-list .nav-list {
   padding: 0;
-  margin: 0 0 0 0.75rem;
+  margin: 0 0 0 0.5rem;
 }
 
 .nav-list a.link-external::after {
@@ -124,11 +126,10 @@ html.is-clipped--nav {
   outline: none;
   line-height: inherit;
   position: absolute;
-  height: calc(var(--nav-line-height) * 1.5em);
-  width: calc(var(--nav-line-height) * 1.5em);
-  margin-top: 2px;
-  margin-left: calc(var(--nav-line-height) * -1em);
-  right: 2px;
+  height: calc(var(--nav-line-height) * 1.1em);
+  width: calc(var(--nav-line-height) * 1.1em);
+  margin-top: 6px;
+  left: 2px;
   transform: rotate(-90deg);
 }
 
@@ -164,14 +165,38 @@ html.is-clipped--nav {
   display: block;
   padding: 0.4rem 0.5rem;
   border-radius: 3px;
-  padding-right: 28px;
+  padding-left: 12px;
+  margin-left: 10px;
+}
+
+.nav-item-toggle + .nav-link,
+.nav-item-toggle + .nav-text {
+  margin-left: 0;
+  padding-left: 22px;
+}
+
+.nav-item-toggle:hover + .nav-link,
+.nav-item-toggle:hover + .nav-text {
+  background: #ebf2f2;
+}
+
+.nav-item.is-current-page > .nav-item-toggle:hover + .nav-link {
+  background: var(--selected-background-color);
+}
+
+.nav-link:hover {
+  color: #06c;
 }
 
 .nav-link:hover,
 .nav-text:hover {
   text-decoration: none;
   background: #ebf2f2;
-  color: #06c;
+}
+
+.dark-theme .nav-item-toggle:hover + .nav-link,
+.dark-theme .nav-item-toggle:hover + .nav-text {
+  background: #262a2d;
 }
 
 .dark-theme .nav-link:hover,

src/css/vendor/search.css

@@ -12,7 +12,7 @@
   color: var(--body-font-color);
   background: var(--body-background-color);
   text-align: left;
-  padding-left: 50px;
+  padding-left: 40px;
   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: 25px;
+  left: 15px;
   width: 20px;
   fill: var(--body-font-color);
 }