Move sidebar to the left of content (#2192)

* Move sidebar to the left
* Prevent sidebar links from wrapping per-word

Author: futurGH

src/lib/output/themes/default/layouts/default.tsx

@@ -33,17 +33,17 @@ export const defaultLayout = (context: DefaultThemeRenderContext, props: PageEve
             {context.toolbar(props)}
 
             <div class="container container-main">
+                <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+                    {context.hook("navigation.begin")}
+                    {context.navigation(props)}
+                    {context.hook("navigation.end")}
+                </div>
                 <div class="col-8 col-content">
                     {context.hook("content.begin")}
                     {context.header(props)}
                     {props.template(props)}
                     {context.hook("content.end")}
                 </div>
-                <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
-                    {context.hook("navigation.begin")}
-                    {context.navigation(props)}
-                    {context.hook("navigation.end")}
-                </div>
             </div>
 
             {context.footer()}

src/lib/output/themes/default/partials/navigation.tsx

@@ -173,7 +173,7 @@ export function secondaryNavigation(context: DefaultThemeRenderContext, props: P
                 >
                     <a href={context.urlTo(child)} class="tsd-index-link">
                         {context.icons[child.kind]()}
-                        {renderName(child)}
+                        <span>{renderName(child)}</span>
                     </a>
                 </li>
             );

static/style.css

@@ -253,7 +253,6 @@ dd {
 .col-8 {
     box-sizing: border-box;
     float: left;
-    padding: 2rem 1rem;
 }
 
 .col-4 {
@@ -262,7 +261,8 @@ dd {
 .col-8 {
     flex: 1 0;
     flex-wrap: wrap;
-    padding-left: 0;
+    padding: 2rem 3rem;
+    padding-right: 0;
 }
 
 @keyframes fade-in {
@@ -921,16 +921,13 @@ a.tsd-index-link {
         height: calc(100vh - 2rem);
         top: 4rem;
         right: 0;
-        padding: 0 1.5rem;
-        padding-top: 1rem;
+        padding: 2rem 0;
+        padding-right: 1rem;
         margin-top: 3rem;
         transition: 0.3s ease-in-out;
         transition-property: top, padding-top, padding, height;
         overflow-y: auto;
     }
-    .col-menu {
-        border-left: 1px solid var(--color-accent);
-    }
     .col-menu--hide {
         top: 1rem;
     }