Web:Components:Aside: add close button

packages/asc-web-components/aside/aside.js

@@ -2,7 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 
 import Scrollbar from "../scrollbar";
-import StyledAside from "./styled-aside";
+import {
+  StyledAside,
+  StyledControlContainer,
+  StyledCrossIcon,
+} from "./styled-aside";
 
 const Aside = React.memo((props) => {
   //console.log("Aside render");
@@ -14,6 +18,7 @@ const Aside = React.memo((props) => {
     className,
     contentPaddingBottom,
     withoutBodyScroll,
+    onClose,
   } = props;
 
   return (
@@ -29,6 +34,12 @@ const Aside = React.memo((props) => {
       ) : (
         <Scrollbar stype="mediumBlack">{children}</Scrollbar>
       )}
+
+      {visible && (
+        <StyledControlContainer onClick={onClose}>
+          <StyledCrossIcon />
+        </StyledControlContainer>
+      )}
     </StyledAside>
   );
 });
@@ -46,6 +57,7 @@ Aside.propTypes = {
     PropTypes.node,
   ]),
   withoutBodyScroll: PropTypes.bool,
+  onClose: PropTypes.func,
 };
 Aside.defaultProps = {
   scale: false,

packages/asc-web-components/aside/styled-aside.js

@@ -2,6 +2,12 @@ import React from "react";
 import styled from "styled-components";
 import Base from "../themes/base";
 
+import CrossIcon from "@appserver/components/public/static/images/cross.react.svg";
+
+import { isMobile } from "react-device-detect";
+
+import { tablet } from "@appserver/components/utils/device";
+
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
 const Container = ({
@@ -17,8 +23,7 @@ const Container = ({
 const StyledAside = styled(Container)`
   background-color: ${(props) => props.theme.aside.backgroundColor};
   height: ${(props) => props.theme.aside.height};
-  overflow-x: ${(props) => props.theme.aside.overflowX};
+
-  overflow-y: ${(props) => props.theme.aside.overflowY};
   position: fixed;
   right: ${(props) => props.theme.aside.right};
   top: ${(props) => props.theme.aside.top};
@@ -30,6 +35,32 @@ const StyledAside = styled(Container)`
   z-index: ${(props) => props.zIndex};
   box-sizing: border-box;
 
+  @media ${tablet} {
+    max-width: calc(100% - 69px);
+    transform: translateX(
+      ${(props) =>
+        props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
+    );
+  }
+
+  ${isMobile &&
+  css`
+    max-width: calc(100% - 69px);
+    transform: translateX(
+      ${(props) =>
+        props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"}
+    );
+  `}
+
+  @media (max-width: 428px) {
+    bottom: 0;
+    top: unset;
+    height: calc(100% - 64px);
+    width: 100%;
+    max-width: 100%;
+    transform: translateX(${(props) => (props.visible ? "0" : "100%")});
+  }
+
   &.modal-dialog-aside {
     padding-bottom: ${(props) =>
       props.contentPaddingBottom
@@ -43,4 +74,47 @@ const StyledAside = styled(Container)`
   }
 `;
 StyledAside.defaultProps = { theme: Base };
-export default StyledAside;
+
+const StyledControlContainer = styled.div`
+  display: flex;
+
+  width: 24px;
+  height: 24px;
+  position: absolute;
+
+  border-radius: 100px;
+  cursor: pointer;
+
+  align-items: center;
+  justify-content: center;
+  z-index: 450;
+
+  top: 14px;
+  left: -34px;
+
+  ${isMobile &&
+  css`
+    top: 14px;
+  `}
+
+  @media (max-width: 428px) {
+    top: -34px;
+    right: 10px;
+    left: unset;
+  }
+`;
+
+StyledControlContainer.defaultProps = { theme: Base };
+
+const StyledCrossIcon = styled(CrossIcon)`
+  width: 17px;
+  height: 17px;
+  z-index: 455;
+  path {
+    fill: ${(props) => props.theme.catalog.control.fill};
+  }
+`;
+
+StyledCrossIcon.defaultProps = { theme: Base };
+
+export { StyledAside, StyledControlContainer, StyledCrossIcon };