Shared: Aside: The header is placed in a separate component.

packages/shared/components/aside/Aside.styled.tsx

@@ -139,4 +139,31 @@ const StyledControlContainer = styled.div`
 
 StyledControlContainer.defaultProps = { theme: Base };
 
-export { StyledAside, StyledControlContainer };
+const StyledHeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 16px;
+  height: 53px;
+
+  .additional-icons-container {
+    display: flex;
+    margin-inline: 16px 16px;
+    gap: 16px;
+  }
+  .arrow-button {
+    margin-inline: 0 12px;
+  }
+  .close-button {
+    margin-inline: auto 0;
+  }
+  ::after {
+    content: "";
+    border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 53px;
+  }
+`;
+export { StyledAside, StyledControlContainer, StyledHeaderContainer };

packages/shared/components/aside/Aside.tsx

@@ -27,12 +27,9 @@
 import React from "react";
 
 import { Scrollbar } from "../scrollbar";
-import { IconButton } from "../icon-button";
-
-import { StyledAside, StyledControlContainer } from "./Aside.styled";
+import { StyledAside } from "./Aside.styled";
 import { AsideProps } from "./Aside.types";
-
-import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+import { AsideHeader } from "./AsideHeader";
 
 const AsidePure = (props: AsideProps) => {
   const {
@@ -44,9 +41,10 @@ const AsidePure = (props: AsideProps) => {
     contentPaddingBottom,
     withoutBodyScroll = false,
     onClose,
+    ...rest
   } = props;
   const contentRef = React.useRef<HTMLElement | null>(null);
-  console.log("AsidePure");
+
   return (
     <StyledAside
       visible={visible}
@@ -57,16 +55,7 @@ const AsidePure = (props: AsideProps) => {
       forwardRef={contentRef}
       data-testid="aside"
     >
-      {visible && (
-        <StyledControlContainer className="close-button" onClick={onClose}>
-          <IconButton
-            size={17}
-            className="close-button"
-            iconName={CrossReactSvg}
-            isClickable
-          />
-        </StyledControlContainer>
-      )}
+      <AsideHeader onCloseClick={onClose} {...rest} />
       {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
     </StyledAside>
   );

packages/shared/components/aside/Aside.types.ts

@@ -33,8 +33,22 @@ export interface AsideProps {
   children: React.ReactNode;
   withoutBodyScroll?: boolean;
   onClose: () => void;
-}
 
+  header: AsideHeaderProps["header"];
+  isBackButton?: AsideHeaderProps["isBackButton"];
+  isCloseable?: AsideHeaderProps["isCloseable"];
+  hederIcons?: AsideHeaderProps["hederIcons"];
+  onBackClick?: AsideHeaderProps["onBackClick"];
+  onCloseClick?: AsideHeaderProps["onCloseClick"];
+}
+export interface AsideHeaderProps {
+  header: string;
+  isBackButton?: boolean;
+  isCloseable?: boolean;
+  hederIcons?: { id: string; url: string; onClick: () => void }[];
+  onBackClick?: () => void;
+  onCloseClick?: () => void;
+}
 export interface StyledAsideProps {
   visible: boolean;
   scale?: boolean;

packages/shared/components/aside/AsideHeader.tsx

@@ -0,0 +1,89 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
+import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg?url";
+
+import { IconButton } from "../icon-button";
+import { Text } from "../text";
+import { AsideHeaderProps } from "./Aside.types";
+import { StyledHeaderContainer } from "./Aside.styled";
+
+const AsideHeader = (props: AsideHeaderProps) => {
+  const {
+    isBackButton = false,
+    onBackClick,
+    onCloseClick,
+    header,
+    hederIcons = [],
+    isCloseable = true,
+  } = props;
+
+  const backButtonRender = (
+    <IconButton
+      className="arrow-button"
+      iconName={ArrowPathReactSvgUrl}
+      size={17}
+      onClick={onBackClick}
+    />
+  );
+
+  const closeIconRender = (
+    <IconButton
+      size={17}
+      className="close-button"
+      iconName={CrossReactSvg}
+      onClick={onCloseClick}
+      isClickable
+    />
+  );
+
+  return (
+    <StyledHeaderContainer>
+      {isBackButton && backButtonRender}
+      <Text fontSize="21px" fontWeight={700}>
+        {header}
+      </Text>
+      {hederIcons.length > 0 && (
+        <div className="additional-icons-container">
+          {hederIcons.map((item) => (
+            <IconButton
+              key={item.id}
+              size={17}
+              className="close-button"
+              iconName={item.url}
+              onClick={item.onClick}
+              isClickable
+            />
+          ))}
+        </div>
+      )}
+      {isCloseable && closeIconRender}
+    </StyledHeaderContainer>
+  );
+};
+
+export { AsideHeader };

packages/shared/components/aside/index.tsx

@@ -25,3 +25,4 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 export { Aside } from "./Aside";
+export { AsideHeader } from "./AsideHeader";