Merge pull request #1347 from matiasbenary/feat/add-close-button-news…

…letter-banner

feat: add close button banner

src/pages/index.tsx

@@ -7,6 +7,7 @@ import { ChainAbstraction } from '@/components/home/ChainAbstraction';
 import { Contracts } from '@/components/home/Contracts';
 import { Data } from '@/components/home/Data';
 import { DecentralizedApps } from '@/components/home/DecentralizedApps';
+import { useNavigationStore } from '@/components/sidebar-navigation/store';
 import useDeviceType from '@/hooks/useDeviceType';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
@@ -37,29 +38,51 @@ const StyledCard = ({ href, title, description }: { href: string; title: string;
   );
 };
 
-const NewsletterBanner = styled.div`
+const NewsletterBanner = styled.div<{ isSidebarExpanded: boolean }>`
   background-color: #0072ce;
   color: white;
   padding: 8px;
   text-align: center;
   font-size: 14px;
   position: absolute;
   top: 0;
-  left: 0;
+  left: ${(p) => (p.isSidebarExpanded ? 'var(--sidebar-width-expanded)' : 'var(--sidebar-width-collapsed)')};
+  transition: all var(--sidebar-expand-transition-speed);
   right: 0;
 
   @media (max-width: 1240px) {
     top: 60px;
   }
 `;
 
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+`;
+
 const HomePage: NextPageWithLayout = () => {
   const [selectedTab, setTab] = useState('contracts');
   const [avgBlockTime, setAvgBlockTime] = useState('1.30');
   const [avgTxPrice, setAvgTxPrice] = useState('0.01');
   const [totalTx, setTotalTx] = useState('2,33');
   const [nearStats, setNearStats] = useState<NearBlocks>();
   const deviceType = useDeviceType();
+  const [visible, setVisible] = useState(false);
+  const isSidebarExpanded = useNavigationStore((store) => store.isSidebarExpanded && !store.expandedDrawer);
+
+  useEffect(() => {
+    const isClosed = localStorage.getItem('newsletterBannerClosed');
+    if (!isClosed) {
+      setVisible(true);
+    }
+  }, []);
 
   useEffect(() => {
     fetch('https://api.nearblocks.io/v1/stats')
@@ -86,14 +109,25 @@ const HomePage: NextPageWithLayout = () => {
     getAvrTx();
   }, [nearStats]);
 
+  const handleClose = () => {
+    setVisible(false);
+    localStorage.setItem('newsletterBannerClosed', 'true');
+  };
+
   return (
     <Section grow="available">
-      <NewsletterBanner>
-        Stay updated!{' '}
-        <a href="https://bit.ly/devhubnews" style={{ color: 'white', textDecoration: 'underline' }}>
-          Sign up for our newsletter →
-        </a>
-      </NewsletterBanner>
+      {visible && (
+        <NewsletterBanner isSidebarExpanded={isSidebarExpanded}>
+          Stay updated!{' '}
+          <a
+            href="https://bit.ly/devhubnews"
+            style={{ color: 'white', textDecoration: 'underline', marginLeft: '5px' }}
+          >
+            Sign up for our newsletter →
+          </a>
+          <CloseButton onClick={handleClose}>&times;</CloseButton>
+        </NewsletterBanner>
+      )}
       <Flex stack gap="l" style={{ padding: deviceType === 'mobile' ? '0' : '0 var(--gap-l)' }}>
         <Header>
           <Flex stack gap="s" style={{ backgroundColor: 'white', padding: '1rem', textAlign: 'center' }}>