News line show/hide

docusaurus.config.js

@@ -53,10 +53,11 @@ const config = {
         }
       },
     },
-    news: [
-      {title: 'Rootstock Hacktivator Program is Live! Contribute and Earn Rewards!', url: 'https://dev.rootstock.io/resources/contribute/hacktivator-program/'},
-      {title: 'Contribute and Earn Rewards!', url: '/changelog'},
-      {title: 'Rootstock News', url: '/changelog'},
+    newsHighlight : [
+      {
+        title : '📣 Rootstock Hacktivator Program is Live! Contribute and Earn Rewards!',
+        url : '/resources/contribute/hacktivator-program/'
+      }
     ]
   },
   // GitHub pages deployment config.

src/components/NewsLine/index.js

@@ -1,27 +1,60 @@
-import React from "react";
-import clsx from "clsx";
-import styles from './styles.module.scss';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React, { useState, useEffect } from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.scss'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import Link from '/src/components/Link'
 
 export default function NewsLine () {
-  const {siteConfig} = useDocusaurusContext();
-  const news = siteConfig?.customFields?.news || [];
+  const { siteConfig } = useDocusaurusContext()
+  const news = siteConfig?.customFields?.newsHighlight || []
+  const [isClosed, setIsClosed] = useState(() => {
+    return sessionStorage.getItem('DevportalNewsLineClosed') === 'true'
+  })
+  const [isVisible, setIsVisible] = useState(true)
+  let lastScrollTop = 0
 
-  return news?.length > 0 && <div
-    className={clsx(`py-10 px-32 border-top border-bottom d-flex align-items-center justify-content-center gap-12 bg-black`, styles.NewsLine)}
-  >
-    <div class="d-flex align-items-center justify-content-center gap-12">
-      {news.map((item, index) => (
-        <Link key={index} href={item.url} className={clsx(`d-flex fs-14 gap-16 align-items-center link-base`)}>
-          {item.title}
-        </Link>
-      ))}
+  const handleClose = () => {
+    setIsClosed(true)
+    sessionStorage.setItem('DevportalNewsLineClosed', 'true')
+  }
+  const truncateTitle = (title, maxLength) => {
+    return title.length > maxLength ? `${title.substring(0, maxLength)}...` : title
+  }
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+      if (scrollTop > lastScrollTop) {
+        setIsVisible(false)
+      } else {
+        setIsVisible(true)
+      }
+      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop
+    }
+
+    window.addEventListener('scroll', handleScroll)
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  return (news?.length > 0 && !isClosed) && (
+    <div className={clsx(styles.NewsLineWrap, { [styles.hidden]: !isVisible })}>
+      <div className={clsx(`py-10`, styles.NewsLine)}>
+        <div className="container d-flex align-self-start align-items-md-center gap-8">
+          <div className="d-flex flex-column flex-wrap flex-md-row align-items-md-center justify-content-md-center gap-8 column-gap-lg-16 flex-grow-1">
+            {news.slice(0, 4).map((item, index) => (
+              <Link key={index} href={item.url} className={clsx(`d-flex fs-14 gap-16 align-items-center link-base`)}>
+                {truncateTitle(item.title, 150)}
+              </Link>
+            ))}
+          </div>
+          <button className="btn-blank d-flex" onClick={handleClose} aria-label="Close">
+            <svg width="16" height="16">
+              <use xlinkHref="#icon-close-circle"/>
+            </svg>
+          </button>
+        </div>
+      </div>
     </div>
-    <button className="btn-blank d-flex">
-      <svg width="24" height="24">
-        <use xlinkHref="#icon-close-circle"></use>
-      </svg>
-    </button>
-  </div>
+  )
 }

src/components/NewsLine/styles.module.scss

@@ -1,5 +1,38 @@
-.NewsLine{
+.NewsLine {
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-body-color);
+  border-width: 1px 0;
+
+  @media (max-width: 996.98px) {
+    border-width: 0 0 1px;
+  }
+}
+
+.NewsLineWrap {
   position: sticky;
   top: 88px;
-  z-index: var(--ifm-z-index-fixed);
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+
+  @media (max-width: 996.98px) {
+    top: 73px;
+    margin-top: -24px;
+    margin-bottom: 24px;
+    padding-left: 16px;
+    padding-right: 16px;
+
+    [class*="container"] {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  @media (max-width: 767.98px) {
+    top: 54px;
+    margin-top: -16px;
+    margin-bottom: 16px;
+  }
+
+  &.hidden {
+    transform: translateY(-102%);
+  }
 }