adding #26

public/components.html

@@ -598,6 +598,90 @@
                     <div class="progress__inner" style="width: 20%;"></div>
                 </div>
 
+                <!-- sidebar -->
+                <h2 class="m-top-5">
+                    Sidebar
+                </h2>
+                <div class="content">
+<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
+    &#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
+&#x3C;/div&#x3E;
+</code>
+                </div>
+                <button class="button" onclick="openSidebar()">
+                    Click me!
+                </button>
+                <script type="text/javascript">
+                    function openSidebar() {
+                        document.querySelector('.sidebar').classList.add('sidebar--open')
+                    }
+
+                    function closeSidebar() {
+                        document.querySelector('.sidebar').classList.remove('sidebar--open')
+                    }
+                </script>
+                <div class="sidebar">
+                    <div class="sidebar__inner">
+                        <div class="sidebar__body">
+
+                        </div>
+                        <div class="sidebar__footer">
+                            <button type="button" class="button m-bottom-0" onclick="closeSidebar()">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- sidebar -->
+                <h2 class="m-top-5">
+                    Sidebar + Bar
+                </h2>
+                <div class="content">
+<code>&#x3C;div class=&#x22;progress&#x22;&#x3E;
+    &#x3C;div class=&#x22;progress__inner&#x22; style=&#x22;width: 20%;&#x22;&#x3E;&#x3C;/div&#x3E;
+&#x3C;/div&#x3E;
+</code>
+                </div>
+                <button class="button" onclick="openSidebarBar()">
+                    Click me!
+                </button>
+                <script type="text/javascript">
+                    function openSidebarBar() {
+                        document.querySelector('#sidebar-bar').classList.add('sidebar--open')
+                    }
+
+                    function closeSidebarBar() {
+                        document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
+                    }
+                </script>
+                <div id="sidebar-bar" class="sidebar">
+                    <div class="sidebar__inner">
+
+                        <div class="bar">
+                            <div class="bar__main">
+                                Sidebar
+                            </div>
+                            <div class="bar__end">
+                                <button class="button button--transparent" type="button" onclick="closeSidebarBar()">
+                                    <svg class="icon fill-text-contrast" aria-hidden="true">
+                                        <use xlink:href="/symbol-defs.svg#icon-close"></use>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="sidebar__body">
+
+                        </div>
+                        <div class="sidebar__footer">
+                            <button type="button" class="button m-bottom-0" onclick="closeSidebarBar()">
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- table -->
                 <h2 class="m-top-5">
                     Table

public/spritemap.js

@@ -1 +1,13 @@
-(self.webpackChunk_tentakelfabrik_plain_ui=self.webpackChunk_tentakelfabrik_plain_ui||[]).push([[355],{256:()=>{}}]);
+(self["webpackChunk_tentakelfabrik_plain_ui"] = self["webpackChunk_tentakelfabrik_plain_ui"] || []).push([["spritemap"],{
+
+/***/ "?4e0c":
+/*!******************************!*\
+  !*** spritemap-dummy-module ***!
+  \******************************/
+/***/ (() => {
+
+
+
+/***/ })
+
+}]);

src/scss/components/_sidebar.scss

@@ -0,0 +1,85 @@
+/**
+ *  <div class="sidebar">
+ *      <div class="sidebar__inner">
+ *          <div class="sidebar__body">
+ *          </div>
+ *          <div class="sidebar__footer">
+ *          </div>
+ *      </div>
+ *  </div>
+ *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://gitea.com/tentakelfabrik/plain-ui
+ *
+ */
+
+.sidebar {
+    position: fixed;
+    z-index: 9;
+
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    max-width: 95%;
+
+    visibility: hidden;
+    transition: visibility 0s linear 0.5s;
+
+    // adding overlay with transition for open / close
+    &:before {
+        @include overlay($z-index: 9);
+        transition: background-color 0.5s;
+    }
+
+    // extends from panel
+    &__body {
+        @extend .panel__body;
+    }
+
+    // extends from panel
+    &__inner {
+        @extend .panel;
+
+        position: relative;
+        height: 100%;
+        z-index: 10;
+
+        transition: transform 0.2s;
+        transform: translateX(-100%);
+    }
+
+    &__footer {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+
+        display: flex;
+        justify-content: space-between;
+
+        background: var(--background);
+        width: 100%;
+        padding: 1rem;
+    }
+
+    // open sidebar and slide in display
+    &--open {
+        visibility: visible;
+        transition: visibility 0s linear 0s;
+
+        .sidebar__inner {
+            transform: translateX(0);
+        }
+
+        &:before {
+            background: var(--background-alpha);
+        }
+    }
+
+    @include media-md() {
+        max-width: 33%;
+    }
+}

src/scss/plain-ui.scss

@@ -25,6 +25,7 @@
     'components/bar',
     'components/modal',
     'components/loading',
+    'components/sidebar',
 
     'layouts/masonry',
     'layouts/slider',