Docs sidebar re-design

The smallest MVC possible for #770 (closed) using the design specs

Before	After

Known Issues / Questions

• Should we hide breadcrumbs on mobile as suggested per the design?
• The "collapse" button does not scroll on md screens currently as is a ~bug
• We are missing the left sidebar icons
• We need to decide about the "collapse button" border as it looks odd now
• Breadcrumbs come after the "On this page" section now

content/frontend/default/setup_table_of_contents.js

@@ -3,13 +3,13 @@ import TableOfContents from './components/table_of_contents.vue';
 import StickToFooter from './directives/stick_to_footer';
 import { parseTOC } from '../shared/toc/parse_toc';
 
-const SIDEBAR_ID_MOBILE = '.doc-nav';
+const SIDEBAR_SELECTOR = '.doc-nav';
 const MARKDOWN_TOC_ID = 'markdown-toc';
 const HELP_AND_FEEDBACK_ID = 'help-and-feedback';
 const MAIN_SELECTOR = '.js-main-wrapper';
 
 export default () => {
-  const sidebar = document.querySelector(SIDEBAR_ID_MOBILE);
+  const sidebar = document.querySelector(SIDEBAR_SELECTOR);
   const menu = document.getElementById(MARKDOWN_TOC_ID);
   const main = document.querySelector(MAIN_SELECTOR);
   const hasHelpAndFeedback = Boolean(document.getElementById(HELP_AND_FEEDBACK_ID));