fix: apply announcement bar class if only needed (#5699)

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx

@@ -14,18 +14,14 @@ import IconClose from '@theme/IconClose';
 import styles from './styles.module.css';
 
 function AnnouncementBar(): JSX.Element | null {
-  const {isClosed, close} = useAnnouncementBar();
+  const {isActive, close} = useAnnouncementBar();
   const {announcementBar} = useThemeConfig();
 
-  if (!announcementBar) {
+  if (!isActive) {
     return null;
   }
 
-  const {content, backgroundColor, textColor, isCloseable} = announcementBar;
+  const {content, backgroundColor, textColor, isCloseable} = announcementBar!;
-
-  if (!content || (isCloseable && isClosed)) {
-    return null;
-  }
 
   return (
     <div

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -25,14 +25,18 @@ import type {Props} from '@theme/DocSidebar';
 import styles from './styles.module.css';
 
 function useShowAnnouncementBar() {
-  const {isClosed} = useAnnouncementBar();
+  const {isActive} = useAnnouncementBar();
-  const [showAnnouncementBar, setShowAnnouncementBar] = useState(!isClosed);
+  const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
-  useScrollPosition(({scrollY}) => {
+
-    if (!isClosed) {
+  useScrollPosition(
+    ({scrollY}) => {
+      if (isActive) {
         setShowAnnouncementBar(scrollY === 0);
       }
-  });
+    },
-  return showAnnouncementBar;
+    [isActive],
+  );
+  return isActive && showAnnouncementBar;
 }
 
 function HideableSidebarButton({onClick}: {onClick: React.MouseEventHandler}) {
@@ -65,7 +69,6 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
     navbar: {hideOnScroll},
     hideableSidebar,
   } = useThemeConfig();
-  const {isClosed: isAnnouncementBarClosed} = useAnnouncementBar();
 
   return (
     <div
@@ -76,8 +79,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) {
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
       <nav
         className={clsx('menu thin-scrollbar', styles.menu, {
-          [styles.menuWithAnnouncementBar]:
+          [styles.menuWithAnnouncementBar]: showAnnouncementBar,
-            !isAnnouncementBarClosed && showAnnouncementBar,
         })}>
         <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
           <DocSidebarItems items={sidebar} activePath={path} level={1} />

packages/docusaurus-theme-classic/src/validateThemeConfig.ts

@@ -269,7 +269,7 @@ const ThemeConfigSchema = Joi.object({
     .default(DEFAULT_CONFIG.metadatas),
   announcementBar: Joi.object({
     id: Joi.string().default('announcement-bar'),
-    content: Joi.string(),
+    content: Joi.string().required(),
     backgroundColor: Joi.string(),
     textColor: Joi.string(),
     isCloseable: Joi.bool().default(true),

packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx

@@ -33,7 +33,7 @@ const setDismissedInStorage = (bool: boolean) =>
   AnnouncementBarDismissStorage.set(String(bool));
 
 type AnnouncementBarAPI = {
-  readonly isClosed: boolean;
+  readonly isActive: boolean;
   readonly close: () => void;
 };
 
@@ -87,7 +87,7 @@ const useAnnouncementBarContextValue = (): AnnouncementBarAPI => {
 
   return useMemo(() => {
     return {
-      isClosed,
+      isActive: !!announcementBar && !isClosed,
       close: handleClose,
     };
   }, [isClosed]);