diff --git a/packages/asc-web-components/aside/aside.js b/packages/asc-web-components/aside/aside.js
index 8ff72d7bf5..7e26d622d0 100644
--- a/packages/asc-web-components/aside/aside.js
+++ b/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) => {
) : (
{children}
)}
+
+ {visible && (
+
+
+
+ )}
);
});
@@ -46,6 +57,7 @@ Aside.propTypes = {
PropTypes.node,
]),
withoutBodyScroll: PropTypes.bool,
+ onClose: PropTypes.func,
};
Aside.defaultProps = {
scale: false,
diff --git a/packages/asc-web-components/aside/styled-aside.js b/packages/asc-web-components/aside/styled-aside.js
index c738c2be98..b71b0dc25b 100644
--- a/packages/asc-web-components/aside/styled-aside.js
+++ b/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 };