--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -762,16 +762,18 @@ a.learn-more-link.webconsole-learn-more-
   height: 100%;
   -moz-user-focus: normal;
   color: var(--console-output-color);
   --console-output-indent-width: 1rem;
   --console-output-indent-border-color: var(--theme-selection-background);
   --icon-top-margin: 3px;
   --object-inspector-hover-background: transparent;
   --attachment-margin-block-end: 3px;
+  --primary-toolbar-height: 29px;
+  --close-button-image: url(chrome://devtools/skin/images/close.svg);
 }
 
 /* Webconsole specific theme variables */
 .theme-light .webconsole-output-wrapper,
 .theme-firebug .webconsole-output-wrapper {
   --error-color: var(--red-70);
   --error-background-color: #FDF2F5;
   --warning-color: var(--yellow-80);
@@ -1204,9 +1206,36 @@ body #output-container {
   grid-row: 1 / -1;
   grid-column: -1 / -2;
   background-color: var(--theme-sidebar-background);
 }
 
 .split-box.vert.sidebar {
   /* Set to prevent the sidebar from extending past the right edge of the page */
   width: unset;
+}
+
+.sidebar-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: 100%;
+}
+
+.webconsole-sidebar-toolbar {
+  grid-row: 1 / 2;
+  min-height: var(--primary-toolbar-height);
+  display: flex;
+  justify-content: end;
+}
+
+.sidebar-contents {
+  grid-row: 2 / 3;
+}
+
+.webconsole-sidebar-toolbar .sidebar-close-button {
+  padding: 4px 0;
+  margin: 0;
+  margin-inline-end: -3px;
+}
+
+.sidebar-close-button::before {
+  background-image: var(--close-button-image);
 }
\ No newline at end of file

--- a/devtools/client/webconsole/new-console-output/components/SideBar.js
+++ b/devtools/client/webconsole/new-console-output/components/SideBar.js
@@ -2,35 +2,62 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
+const actions = require("devtools/client/webconsole/new-console-output/actions/index");
 const SplitBox = createFactory(require("devtools/client/shared/components/splitter/SplitBox"));
 
 class SideBar extends Component {
   static get propTypes() {
     return {
+      dispatch: PropTypes.func.isRequired,
       sidebarVisible: PropTypes.bool
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.onClickSidebarToggle = this.onClickSidebarToggle.bind(this);
+  }
+
+  onClickSidebarToggle() {
+    this.props.dispatch(actions.sidebarToggle());
+  }
+
   render() {
     let {
       sidebarVisible,
     } = this.props;
 
+    let endPanel = dom.aside({
+      className: "sidebar-wrapper"
+    },
+      dom.header({
+        className: "devtools-toolbar webconsole-sidebar-toolbar"
+      },
+        dom.button({
+          className: "devtools-button sidebar-close-button",
+          onClick: this.onClickSidebarToggle
+        })
+      ),
+      dom.aside({
+        className: "sidebar-contents"
+      }, "Sidebar WIP")
+    );
+
     return (
       sidebarVisible ?
         SplitBox({
           className: "sidebar",
-          endPanel: dom.aside({}, "Sidebar WIP"),
+          endPanel,
           endPanelControl: true,
           initialSize: "200px",
           minSize: "100px",
           vert: true,
         })
         : null
     );
   }

--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_close_sidebar.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_close_sidebar.js
@@ -1,14 +1,14 @@
 /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-// Test that the sidebar is hidden when the console is cleared.
+// Test that the sidebar is hidden for all methods of closing it.
 
 "use strict";
 
 const TEST_URI = "data:text/html;charset=utf8,";
 
 add_task(async function () {
   // Should be removed when sidebar work is complete
   await SpecialPowers.pushPrefEnv({"set": [
@@ -44,16 +44,27 @@ add_task(async function () {
     clearShortcut = WCUL10n.getStr("webconsole.clear.keyOSX");
   } else {
     clearShortcut = WCUL10n.getStr("webconsole.clear.key");
   }
   synthesizeKeyShortcut(clearShortcut);
   await waitFor(() => findMessages(hud, "").length == 0);
   sidebar = hud.ui.document.querySelector(".sidebar");
   ok(!sidebar, "Sidebar hidden after console.clear()");
+
+  await showSidebar(hud);
+
+  info("Click the close button");
+  let closeButton = hud.ui.document.querySelector(".sidebar-close-button");
+  let wrapper = hud.ui.document.querySelector(".webconsole-output-wrapper");
+  let onSidebarShown = waitForNodeMutation(wrapper, { childList: true });
+  closeButton.click();
+  await onSidebarShown;
+  sidebar = hud.ui.document.querySelector(".sidebar");
+  ok(!sidebar, "Sidebar hidden after clicking on close button");
 });
 
 async function showSidebar(hud) {
   let toggleButton = hud.ui.document.querySelector(".webconsole-sidebar-button");
   let wrapper = hud.ui.document.querySelector(".webconsole-output-wrapper");
   let onSidebarShown = waitForNodeMutation(wrapper, { childList: true });
   toggleButton.click();
   await onSidebarShown;