diff --git a/jekyll/_patterns/sidebars.md b/jekyll/_patterns/sidebars.md
new file mode 100644
index 000000000..a9875e554
--- /dev/null
+++ b/jekyll/_patterns/sidebars.md
@@ -0,0 +1,104 @@
+---
+layout: page
+title: Sidebars
+order: 8
+draft: true
+---
+
+
+## Usage
+
+
+
+
+
+Sidebars are a flexible mechanism which can be used to both group and control the visibility of panes. Sidebars can be utilised to subdivide an interface and provide an enhanced responsive experience for large displays.
+
+
+
+
+
+Enclosing sidebars are key layout influencers which can contain groups of individual panes.
+The presence of an enclosing sidebar is often signified by an expand/collapse panes button.
+
+Enclosing sidebars can also separate and subdivide panes into separate panels, a key example of this is the Inspector rules sidebar. Clicking the "Toggle 3-pane" button in the Inspector will toggle the location of the Rule View Panel to and from its own sidebar.
+
+
+
+
+
+Whereas enclosing sidebars would often contain separate panes, Ancillary sidebars are a subset which appear within individual panes.
+
+Ancillary sidebars are used to provide more granular data to a selected items within the main pane. An example of this behaviour is the console sidebar which appears when the user holds command (macOS) or control (Windows) and clicks an object reference within a console message, the sidebar appears and displays the object’s contents.
+
+
+
+{:.animated}
+
+
+All sidebars should be resizable, allowing the user to customize the layout to adapt to the task at hand. The ability to resize a sidebar should be signified to the user by changing the mouse cursor from a `default` pointer to a `ew-resize` pointer when the cursor enters the draggable edge of the sidebar.
+
+
+
+{:.animated}
+
+
+The "Collapse Panes" buttons in the debugger currently sport an onclick animation. When activated, the buttons rotate 180 degrees in 0.25 seconds. The quick animation escapes the user as their focus on the button is lost during the instant relocation of the panel and button. The animation is only witnessed in full if the user focuses on the area of the screen where the buttons will eventually move to (not from).
+
+
+
+
+
+In its current form the Network Details panel identifies as an enclosing sidebar, the sidebar contains a variety of individual panes and is closed by clicking the corresponding "Hide request details" button which utilises the same icon as the Debugger's "Collapse panes" button.
+
+However its behaviour is that of an ancillary sidebar, providing rich data specific to the selected item in the Network Monitor and only appearing when an item in its parent container is selected.
+
+