ag-common 0.0.620 → 0.0.621

package/dist/ui/components/Sidebar/index.d.ts

@@ -2,5 +2,10 @@ import React from 'react';
 export interface ISidebar {
     children: React.ReactNode;
     className?: string;
+    /** default:defaultClosed
+     * defaultClosed: always closed by default.
+     * fixedOpen: always open on bigscreen. cant close if bigscreen
+     */
+    mode?: 'defaultClosed' | 'fixedOpen';
 }
-export declare const Sidebar: ({ children, className }: ISidebar) => React.JSX.Element;
+export declare const Sidebar: ({ children, className, mode, }: ISidebar) => React.JSX.Element;

package/dist/ui/components/Sidebar/index.js

@@ -28,13 +28,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
+const react_1 = require("@emotion/react");
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importStar(require("react"));
+const react_2 = __importStar(require("react"));
 const helpers_1 = require("../../helpers");
 const Hamburger_1 = require("../../icons/Hamburger");
 const common_1 = require("../../styles/common");
 const media_1 = require("../../styles/media");
 const Chevron_1 = require("../Chevron");
+const closedSidebarHover = (0, react_1.css) `
+  width: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  &:hover,
+  &:hover [data-hover='true'] {
+    background-color: #ccc;
+  }
+  &:hover {
+    border-right: solid 1px #999;
+  }
+`;
 const Base = styled_1.default.div `
   position: relative;
   transition: all 200ms;
@@ -42,46 +55,56 @@ const Base = styled_1.default.div `
   padding-left: 0.5rem;
   height: 100vh;
 
+  ${common_1.NoTextSelect};
+  &:hover {
+    [data-type='content-block'] {
+      left: 1rem;
+    }
+  }
+
   &[data-open='true'] {
-    width: 80vw;
-    max-width: 30rem;
+    width: fit-content;
+
     @media ${media_1.smallScreen} {
       max-width: unset;
       position: fixed;
       top: 0;
       left: 0;
+      z-index: 1;
     }
   }
   &[data-open='false'] {
-    width: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    &:hover,
-    &:hover [data-hover='true'] {
-      background-color: #ccc;
-    }
-    &:hover {
-      border-right: solid 1px #999;
-    }
+    ${closedSidebarHover};
   }
-  ${common_1.NoTextSelect};
 
-  &:hover {
-    [data-type='content-block'] {
-      left: 1rem;
+  :not([data-open]) {
+    @media ${media_1.smallScreen} {
+      ${closedSidebarHover};
+    }
+    @media ${media_1.bigScreen} {
+      width: fit-content;
     }
   }
 `;
-const ContentBlock = styled_1.default.div `
-  left: -30rem;
+const closedContentBlockOffScreen = (0, react_1.css) `
+  left: -100vw;
   transition: left 200ms;
   height: 100%;
+`;
+const ContentBlock = styled_1.default.div `
+  ${closedContentBlockOffScreen};
   &[data-open='false'] {
     position: absolute;
     top: 0;
     z-index: 1;
-    width: 80vw;
-    max-width: 30rem;
+    width: fit-content;
+  }
+
+  :not([data-open]) {
+    @media ${media_1.smallScreen} {
+      position: absolute;
+      ${closedContentBlockOffScreen};
+    }
   }
 `;
 const Content = styled_1.default.div `
@@ -100,10 +123,24 @@ const HamburgerB = styled_1.default.div `
   position: absolute;
   transition: all 200ms;
   z-index: 2;
+
+  &[data-hide-on-big='true'] {
+    @media ${media_1.bigScreen} {
+      display: none;
+    }
+  }
+
   &[data-open='false'] {
     top: 0.5rem;
     left: 0.25rem;
   }
+
+  :not([data-open]) {
+    @media ${media_1.bigScreen} {
+      top: 0.5rem;
+      right: -0.75rem;
+    }
+  }
   &[data-open='true'] {
     top: 0.5rem;
     right: -0.75rem;
@@ -127,19 +164,22 @@ const ChevronStyled = (0, styled_1.default)(Chevron_1.Chevron) `
     fill: #555;
   }
 `;
-const Sidebar = ({ children, className }) => {
-    const ref = (0, react_1.useRef)(null);
-    const [open, setOpen] = (0, react_1.useState)(false);
+const Sidebar = ({ children, className, mode = 'defaultClosed', }) => {
+    const ref = (0, react_2.useRef)(null);
+    const [open, setOpen] = (0, react_2.useState)(mode === 'defaultClosed' ? false : null);
     (0, helpers_1.useOnClickOutside)({ ref }, () => {
         if (!open || window.innerWidth > media_1.smallScreenPx) {
             return;
         }
         setOpen(false);
     });
-    return (react_1.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },
-        react_1.default.createElement(HamburgerB, { "data-open": open, onClick: () => setOpen(!open), "data-hover": true }, open ? react_1.default.createElement(ChevronStyled, { point: 'left', width: "100%" }) : react_1.default.createElement(Hamburger_1.Hamburger, null)),
-        react_1.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open },
-            react_1.default.createElement(Content, { "data-type": "content", "data-open": open, onClick: (e) => {
+    return (react_2.default.createElement(Base, { "data-type": "sidebar", className: className, "data-open": open, onClick: () => !open && setOpen(true), "data-hover": true, ref: ref },
+        react_2.default.createElement(HamburgerB, { "data-hide-on-big": mode === 'fixedOpen', "data-open": open, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(!open);
+            }, "data-hover": true }, open ? react_2.default.createElement(ChevronStyled, { point: "left", width: "100%" }) : react_2.default.createElement(Hamburger_1.Hamburger, null)),
+        react_2.default.createElement(ContentBlock, { "data-type": "content-block", "data-open": open },
+            react_2.default.createElement(Content, { "data-type": "content", "data-open": open, onClick: (e) => {
                     e.stopPropagation();
                 } }, children))));
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.620",
+  "version": "0.0.621",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",