From c67bed4f782f88699dbc8afc02c08a9bcbd06a7d Mon Sep 17 00:00:00 2001
From: Angelina Gadzhieva <lunory@yandex-team.ru>
Date: Wed, 4 Oct 2023 21:40:41 +0300
Subject: [PATCH] chore: add ref to AsideHeader story

---
 .../AsideHeader/__stories__/AsideHeaderShowcase.scss     | 6 +++++-
 .../AsideHeader/__stories__/AsideHeaderShowcase.tsx      | 9 +++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
index 0b470cd..eb97bbf 100644
--- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
+++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.scss
@@ -27,10 +27,14 @@ body {
         }
     }
 
-    &__settings-ul {
+    &__settings {
         padding-right: 30px;
     }
 
+    &__settings-ul {
+        margin: 0;
+    }
+
     &__panel {
         width: 300px;
         height: 100%;
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
index af8e08b..92376b7 100644
--- a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
+++ b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -35,6 +35,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
     multipleTooltip = false,
     initialCompact = false,
 }) => {
+    const ref = React.useRef<HTMLDivElement>(null);
     const [popupVisible, setPopupVisible] = React.useState(false);
     const [subheaderPopupVisible, setSubheaderPopupVisible] = React.useState(false);
     const [visiblePanel, setVisiblePanel] = React.useState<Panel>();
@@ -73,6 +74,7 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                 </div>
             </Modal>
             <AsideHeader
+                ref={ref}
                 logo={{
                     text: 'Service',
                     icon: logoIcon,
@@ -93,12 +95,15 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                                 setSubheaderPopupVisible(!subheaderPopupVisible);
                             },
                         },
+                        popupAnchor: ref,
+                        popupPlacement: ['right-start'],
+                        popupOffset: [10, 10],
                         popupVisible: subheaderPopupVisible,
                         onClosePopup: () => setSubheaderPopupVisible(false),
                         renderPopupContent: () => {
                             return (
-                                <div className={b('settings-ul')}>
-                                    <ul>
+                                <div className={b('settings')}>
+                                    <ul className={b('settings-ul')}>
                                         <li>Set 1</li>
                                         <li>Set 2</li>
                                         <li>Set 3</li>