add sidebar component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerberos-io/ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "main": "index.js",
   "repository": "https://github.com/kerberos-io/ui",
   "author": "cedricve <[email protected]>",
@@ -25,8 +25,8 @@
     "typescript": "^4.3.2"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build",
+    "storybook": "start-storybook -s ./public -p 9001",
+    "build-storybook": "build-storybook -s ./public -o docs-build",
     "build": "rollup -c"
   },
   "main": "lib/index.js",

src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta } from "@storybook/react/types-6-0";
+import { Story } from "@storybook/react";
+import Sidebar, { SidebarProps } from "./Sidebar";
+
+export default {
+    title: "Components/Sidebar",
+    component: Sidebar,
+} as Meta;
+
+// Create a master template for mapping args to render the Button component
+const Template: Story<SidebarProps> = (args) => <Sidebar {...args} />;
+
+// Reuse that template for creating different stories
+export const Default = Template.bind({});
+Default.args = { title: "Kerberos.io", version: "v1.0" };
+
+export const Version = Template.bind({});
+Version.args = { ...Default.args, version: "v2.0" };

src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import "./sidebar.css";
+
+export interface SidebarProps  {
+    logo: string;
+    title: string;
+    version: string;
+    mobile: boolean;
+};
+
+const Sidebar = ({
+                    logo = "images/header-minimal-logo-36x36.png",
+                    title = "Kerberos.io",
+                    version = "v1.0",
+                    mobile = false,
+                }: SidebarProps) => {
+
+    return (
+        <div className="sidebar-panel">
+            <div className="brand">
+                <div className="hamburger">
+                    <label for="close">
+                        <input type="checkbox" id="close"/>
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </label>
+                </div>
+
+                <a className="brand-logo">
+                    <img src={logo}/>
+                    <div className="name">
+                        {title}
+                        <span className="version">{version}</span>
+                    </div>
+                </a>
+            </div>
+        </div>);
+};
+
+export default Sidebar;

src/components/Sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from "./Sidebar";

src/components/Sidebar/sidebar.css

@@ -0,0 +1,53 @@
+.sidebar-panel {
+    height: 100%;
+}
+
+.hamburger {
+    display: block;
+    padding-bottom: 10px;
+    position: relative;
+    top: -12px;
+}
+
+label {
+    display: flex;
+    flex-direction: column;
+    width: 30px;
+    cursor: pointer;
+    justify-content: center;
+}
+
+span {
+    background: blue; /*var(--hub);*/
+    border-radius: 10px;
+    height: 3px;
+    margin: 3px 0;
+    transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+input[type="checkbox"] {
+    display: none;
+}
+
+
+.brand-logo {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+img {
+    margin-right: 10px;
+}
+
+.name {
+    color: red; /*var(--text);*/
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.version {
+    color: black; /*var(--text-light);*/
+    font-size: 10px;
+    font-weight: 400;
+    margin-left: 5px;
+}