diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 92202a6..cef0fa2 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -122,3 +122,5 @@
 - Styled `.logo` in `header`. The styling is now far simpler and easier to use.
 - Removed `display:block` fix from `nav` as it was targeting IE 9-.
 - Tweaked and rebuilt the styling of `nav` elements. It should now be more mobile-friendly, too, especially when used in combination with a `.drawer`.
+- Rebuilt `.drawer`, breaking changes in the old code, but managable as far as I can tell.
+- `.drawer` will now be either left or right, no option for both. This can be altered in the code or by hand (if I make a tool, I should remember to add an option - *TODO*).
diff --git a/docs/v3_dev/src/App.js b/docs/v3_dev/src/App.js
index 67fafbc..7d16685 100644
--- a/docs/v3_dev/src/App.js
+++ b/docs/v3_dev/src/App.js
@@ -9,11 +9,12 @@ class App extends Component {
           <button id='button'>Docs</button>
 <a class='button' href='#'>Get started</a>
 <input class='button' type='submit' value='github' />
-        {/*<label htmlFor="doc-drawer-checkbox" className="button drawer-toggle hide"></label>*/}
+        <label htmlFor="doc-drawer-checkbox" className="button drawer-toggle">menu</label>
         </header>
         <div className="row" id="doc-wrapper">
-          <input type="checkbox" id="doc-drawer-checkbox" />
+          <input type="checkbox" id="doc-drawer-checkbox" class="drawer" />
           <nav>
+          <label htmlFor="doc-drawer-checkbox" className="drawer-close"></label>
   <a href="#">Home</a>
   <span>News</span>
   <a href="#" class="sublink-1">New Courses</a>
diff --git a/docs/v3_dev/src/index.css b/docs/v3_dev/src/index.css
index de9b45f..b4eef1b 100644
--- a/docs/v3_dev/src/index.css
+++ b/docs/v3_dev/src/index.css
@@ -778,6 +778,9 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
   --nav-hover-back-color: #f0f0f0;
   --nav-fore-color: #444;
   --nav-border-color: #ddd;
+  --drawer-back-color: #f8f8f8;
+  --drawer-hover-back-color: #f0f0f0;
+  --drawer-border-color: #ddd;
 }
 
 header {
@@ -827,7 +830,6 @@ nav {
   border: 0.0625rem solid var(--nav-border-color);
   border-radius: var(--universal-border-radius);
   margin: var(--universal-margin);
-  padding: 0;
 }
 
 nav * {
@@ -890,6 +892,96 @@ footer.sticky {
   bottom: 0;
 }
 
+.drawer-toggle:before {
+  display: inline-block;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  vertical-align: text-top;
+  content: '';
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
+}
+
+@media screen and (min-width: 768px) {
+  .drawer-toggle:not(.persistent) {
+    display: none;
+  }
+}
+
+[type="checkbox"].drawer {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+}
+
+[type="checkbox"].drawer + * {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: 320px;
+  height: 100vh;
+  overflow-y: auto;
+  background: var(--drawer-back-color);
+  border: 0.0625rem solid var(--drawer-border-color);
+  border-radius: 0;
+  margin: 0;
+  z-index: 1110;
+  right: -320px;
+  transition: right 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close {
+  position: absolute;
+  top: var(--universal-margin);
+  right: var(--universal-margin);
+  z-index: 1111;
+  border-radius: var(--universal-border-radius);
+  padding: var(--universal-padding);
+  margin: 0;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+[type="checkbox"].drawer + * .drawer-close:before {
+  display: block;
+  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
+  content: '';
+  position: relative;
+  width: 24px;
+  height: 24px;
+}
+
+[type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
+  background: var(--drawer-hover-back-color);
+}
+
+@media screen and (max-width: 320px) {
+  [type="checkbox"].drawer + * {
+    width: 100%;
+  }
+}
+
+[type="checkbox"].drawer:checked + * {
+  right: 0;
+}
+
+@media screen and (min-width: 768px) {
+  [type="checkbox"].drawer:not(.persistent) + * {
+    position: static;
+    height: 100%;
+    z-index: 1100;
+  }
+  [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
+    display: none;
+  }
+}
+
 :not(.doc) {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
 }
@@ -1018,110 +1110,6 @@ p.splash {
   cursor: pointer;
 }
 
-[type="checkbox"], [type="radio"] {
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-}
-
-.drawer-toggle:before {
-  position: relative;
-  top: 0.4375rem;
-  font-family: sans-serif;
-  font-size: 2.5rem;
-  line-height: 0.125;
-  content: '\2261';
-}
-
-.drawer {
-  display: block;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  width: 320px;
-  height: 100vh;
-  overflow-y: auto;
-  background: #eceff1;
-  border: 0.0625rem solid #c9c9c9;
-  margin: 0;
-  z-index: 1110;
-}
-
-.drawer:not(.right) {
-  left: -320px;
-  transition: left 0.3s;
-}
-
-.drawer.right {
-  right: -320px;
-  transition: right 0.3s;
-}
-
-.drawer .close {
-  position: absolute;
-  top: 0.75rem;
-  right: 0.25rem;
-  z-index: 1111;
-  padding: 0;
-}
-
-@media screen and (max-width: 320px) {
-  .drawer {
-    width: 100%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .drawer:not(.persistent) {
-    position: static;
-    height: 100%;
-    z-index: 1100;
-  }
-  .drawer:not(.persistent) .close {
-    display: none;
-  }
-  .drawer-toggle:not(.persistent) {
-    display: none;
-  }
-}
-
-:checked + .drawer:not(.right) {
-  left: 0;
-}
-
-:checked + .drawer.right {
-  right: 0;
-}
-
-.close {
-  display: inline-block;
-  width: 1.5rem;
-  font-family: sans-serif;
-  font-size: 1.5rem;
-  line-height: 1;
-  font-weight: 700;
-  border-radius: 2rem;
-  background: rgba(230, 230, 230, 0);
-  vertical-align: top;
-  cursor: pointer;
-  transition: background 0.3s;
-}
-
-.close:hover, .close:focus {
-  background: #e6e6e6;
-}
-
-.close:before {
-  content: "\00D7";
-  display: block;
-  text-align: center;
-}
-
 #root, #App {
   height: 100vh;
 }
diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss
index bc673ea..29e58bf 100644
--- a/src/flavors/mini-doc.scss
+++ b/src/flavors/mini-doc.scss
@@ -126,111 +126,6 @@ p.splash {
   }
 }
 
-[type="checkbox"], [type="radio"] {
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(100%);
-  clip-path: inset(100%);
-}
-
-
-.drawer-toggle:before {
-  position: relative;
-  top: 0.4375rem;
-  font-family: sans-serif;
-  font-size: 2.5rem;
-  line-height: 0.125;
-  content: '\2261';
-}
-
-.drawer {
-  display: block;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  width: 320px;
-  height: 100vh;
-  overflow-y: auto;
-  background: #eceff1;
-  border: 0.0625rem solid #c9c9c9;
-  margin: 0;
-  z-index: 1110;
-}
-
-.drawer:not(.right) {
-  left: -320px;
-  transition: left 0.3s;
-}
-
-.drawer.right {
-  right: -320px;
-  transition: right 0.3s;
-}
-
-.drawer .close {
-  position: absolute;
-  top: 0.75rem;
-  right: 0.25rem;
-  z-index: 1111;
-  padding: 0;
-}
-
-@media screen and (max-width: 320px) {
-  .drawer {
-    width: 100%;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .drawer:not(.persistent) {
-    position: static;
-    height: 100%;
-    z-index: 1100;
-  }
-  .drawer:not(.persistent) .close {
-    display: none;
-  }
-  .drawer-toggle:not(.persistent) {
-    display: none;
-  }
-}
-
-:checked + .drawer:not(.right) {
-  left: 0;
-}
-
-:checked + .drawer.right {
-  right: 0;
-}
-
-.close {
-  display: inline-block;
-  width: 1.5rem;
-  font-family: sans-serif;
-  font-size: 1.5rem;
-  line-height: 1;
-  font-weight: 700;
-  border-radius: 2rem;
-  background: rgba(230, 230, 230, 0);
-  vertical-align: top;
-  cursor: pointer;
-  transition: background 0.3s;
-}
-
-.close:hover, .close:focus {
-  background: #e6e6e6;
-}
-
-.close:before {
-  content: "\00D7";
-  display: block;
-  text-align: center;
-}
-
 #root, #App {
   height: 100vh;
 }
diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss
index 17b4aaf..da47371 100644
--- a/src/mini/_navigation.scss
+++ b/src/mini/_navigation.scss
@@ -7,10 +7,13 @@ $header-back-color: #f8f8f8 !default;        // Background color for the header
 $header-hover-back-color: #f0f0f0 !default;  // Background color for the header element (hover).
 $header-fore-color:   #444 !default;         // Text color for the header element.
 $header-border-color: #ddd !default;         // Border color for the header element.
-$nav-back-color:      #f8f8f8 !default;      // Background color for the header element.
-$nav-hover-back-color: #f0f0f0 !default;     // Background color for the header element (hover).
-$nav-fore-color:      #444 !default;         // Text color for the header element.
-$nav-border-color:    #ddd !default;         // Border color for the header element.
+$nav-back-color:      #f8f8f8 !default;      // Background color for the nav element.
+$nav-hover-back-color: #f0f0f0 !default;     // Background color for the nav element (hover).
+$nav-fore-color:      #444 !default;         // Text color for the nav element.
+$nav-border-color:    #ddd !default;         // Border color for the nav element.
+$drawer-back-color:   #f8f8f8 !default;      // Background color for the drawer component.
+$drawer-border-color: #ddd !default;         // Border color for the drawer component.
+$drawer-hover-back-color: #f0f0f0 !default;  // Background color for the drawer component's close (hover).
 $_header-only-bottom-border:  true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
 $_header-links-uppercase:     true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
 $header-logo-name:    'logo' !default;       // Class name for the header logo element.
@@ -18,6 +21,14 @@ $header-logo-font-size: 1.75rem !default;    // Font ize for the header logo ele
 $nav-sublink-prefix:   'sublink' !default;   // Prefix for the subcategory tabs in nav.
 $nav-sublink-depth:    2 !default;           // Amount of subcategory classes to add.
 $sticky-name:         'sticky' !default;     // Class name for sticky headers and footers.
+$drawer-name:       'drawer' !default;       // Class name for the drawer component.
+$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
+$drawer-mobile-breakpoint: 768px !default;   // Mobile breakpoint for the drawer component.
+$_drawer-right:     true !default;           // [Hidden] Should the drawer appear on the right side of the screen?
+$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
+$drawer-width:      320px !default;          // Width of the drawer component.
+$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
+$drawer-icons-color:  #212121 !default;      // Color for the icons used in the drawer component.
 // CSS variable name definitions [exercise caution if modifying these]
 $header-fore-color-var:          '--header-fore-color' !default;
 $header-back-color-var:          '--header-back-color' !default;
@@ -27,6 +38,25 @@ $nav-fore-color-var:             '--nav-fore-color' !default;
 $nav-back-color-var:             '--nav-back-color' !default;
 $nav-hover-back-color-var:       '--nav-hover-back-color' !default;
 $nav-border-color-var:           '--nav-border-color' !default;
+$drawer-back-color-var:          '--drawer-back-color' !default;
+$drawer-border-color-var:        '--drawer-border-color' !default;
+$drawer-hover-back-color-var:    '--drawer-hover-back-color' !default;
+// Necessary functions for certain elements (mainly the icons used for the drawer)
+/// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
+/// -----------------------------------------------------------------------
+/// Replace `$search` with `$replace` in `$string`
+/// @author Hugo Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+  @return $string;
+}
 /* Navigation module CSS variable definitions */
 :root {
   #{$header-back-color-var}: $header-back-color;
@@ -37,6 +67,9 @@ $nav-border-color-var:           '--nav-border-color' !default;
   #{$nav-hover-back-color-var}: $nav-hover-back-color;
   #{$nav-fore-color-var}: $nav-fore-color;
   #{$nav-border-color-var}: $nav-border-color;
+  #{$drawer-back-color-var}: $drawer-back-color;
+  #{$drawer-hover-back-color-var}: $drawer-hover-back-color;
+  #{$drawer-border-color-var}: $drawer-border-color;
 }
 // Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
 header {
@@ -93,7 +126,6 @@ nav {
   border: $__1px solid var(#{$nav-border-color-var});
   border-radius: var(#{$universal-border-radius-var});
   margin: var(#{$universal-margin-var});
-  padding: 0;
   @if $universal-box-shadow != none {
     box-shadow: var(#{$universal-box-shadow-var});
   }
@@ -107,7 +139,7 @@ nav {
     transition: background 0.3s;
     &:hover, &:focus {
       text-decoration: none;
-      background: var(#{$a-hover-back-color-var});
+      background: var(#{$nav-hover-back-color-var});
     }
   }
   // Subcategories in navigation.
@@ -141,3 +173,99 @@ footer.#{$sticky-name} {
   z-index: 1101;  // Deals with certain problems when combined with cards and tables.
   bottom: 0;
 }
+// Responsive drawer component.
+
+.#{$drawer-toggle-name} {
+  &:before {
+    display: inline-block;
+    position: relative;
+    width: 24px;
+    height: 24px;
+    vertical-align: text-top;
+    content: '';
+    background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') no-repeat;
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) {
+      display: none;
+    }
+  }
+}
+[type="checkbox"].#{$drawer-name} {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  + * {
+    display: block;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    width: $drawer-width;
+    height: 100vh;
+    overflow-y: auto;
+    background: var(#{$drawer-back-color-var});
+    border: $__1px solid var(#{$drawer-border-color-var});
+    border-radius: 0; // Set to 0 to override the value from `nav`.
+    margin: 0;        // Set to 0 to override the value from `nav`.
+    @if $universal-box-shadow != none {
+      box-shadow: var(#{$universal-box-shadow-var});
+    }
+    z-index: 1110;
+    @if $_drawer-right {
+      right: -$drawer-width;
+      transition: right 0.3s;
+    }
+    @else {
+      left: -$drawer-width;
+      transition: left 0.3s;
+    }
+    & .#{$drawer-close-name} {
+      position: absolute;
+      top: var(#{$universal-margin-var});
+      right: var(#{$universal-margin-var});
+      z-index: 1111;
+      border-radius: var(#{$universal-border-radius-var});
+      padding: var(#{$universal-padding-var});
+      margin: 0; // Fixes the offset from label
+      cursor: pointer;
+      transition: background 0.3s;
+      &:before {
+        display: block;
+        background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="'+str-replace(#{$drawer-icons-color}, '#', '%23')+'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') no-repeat;
+        content: '';
+        position: relative;
+        width: 24px;
+        height: 24px;
+      }
+      &:hover, &:focus {
+        background: var(#{$drawer-hover-back-color-var});
+      }
+    }
+    @media screen and (max-width: #{$drawer-width}) {
+      width: 100%;
+    }
+  }
+  &:checked + * {
+    @if $_drawer-right {
+      right: 0;
+    }
+    @else {
+      left: 0;
+    }
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) + * {
+      position: static;
+      height: 100%;
+      z-index: 1100;
+      & .#{$drawer-close-name} {
+        display: none;
+      }
+    }
+  }
+}