@stack-spot/portal-layout 0.0.2 → 0.0.4

package/src/Layout.tsx

@@ -1,6 +1,6 @@
 import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
-import { ReactElement } from 'react'
+import { ComponentClass, ReactElement, ReactNode } from 'react'
 import { Header, HeaderProps } from './components/Header'
 import { MenuContent } from './components/Menu/MenuContent'
 import { MenuSections } from './components/Menu/MenuSections'
@@ -9,21 +9,37 @@ import { Toaster } from './components/Toaster'
 import './layout.css'
 import { overlay } from './LayoutOverlayManager'
 
+type ErrorBoundaryComponent = ComponentClass<{ children: ReactNode }>
+
+interface ErrorBoundaries {
+  page?: ErrorBoundaryComponent,
+  menuSections?: ErrorBoundaryComponent,
+  menuContent?: ErrorBoundaryComponent,
+  modal?: ErrorBoundaryComponent,
+  rightPanel?: ErrorBoundaryComponent,
+  header?: ErrorBoundaryComponent,
+  bottomDialog?: ErrorBoundaryComponent,
+}
+
 interface Props extends WithStyle {
   menu: MenuProps,
   header: HeaderProps,
-  children: ReactElement,
+  children: ReactNode,
+  errorBoundaries?: ErrorBoundaries,
 }
 
 interface RawProps extends WithStyle {
   menuSections: ReactElement,
   menuContent?: ReactElement,
   header: ReactElement,
-  children: ReactElement,
+  children: ReactNode,
   compactMenu?: boolean,
+  errorBoundaries?: ErrorBoundaries,
 }
 
-export const RawLayout = ({ menuSections, menuContent, header, compactMenu = true, children, className, style }: RawProps) => {
+export const RawLayout = (
+  { menuSections, menuContent, header, compactMenu = true, children, errorBoundaries = {}, className, style }: RawProps,
+) => {
   // @ts-ignore
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const classes = [
@@ -32,21 +48,26 @@ export const RawLayout = ({ menuSections, menuContent, header, compactMenu = tru
     className,
   ]
 
+  function includeErrorBoundary(content: ReactNode, section: keyof ErrorBoundaries) {
+    const ErrorBoundary = errorBoundaries[section]
+    return ErrorBoundary ? <ErrorBoundary>{content}</ErrorBoundary> : content
+  }
+
   return (
     <CSSToCitricAdapter>
       <div id="layout" className={listToClass(classes)} style={style}>
-        <header id="header">{header}</header>
-        <aside id="menu">
-          <nav id="menuContent">{menuContent}</nav>
-          <nav id="menuSections">{menuSections}</nav>
-        </aside>
         <div id="page">
-          <article id="content">{children}</article>
+          <article id="content">{includeErrorBoundary(children, 'page')}</article>
         </div>
-        <div id="rightPanel">{rightPanel}</div>
-        <div id="bottomDialog">{bottomDialog}</div>
+        <header id="header">{includeErrorBoundary(header, 'header')}</header>
+        <aside id="menu">
+          <nav id="menuContent">{includeErrorBoundary(menuContent, 'menuContent')}</nav>
+          <nav id="menuSections">{includeErrorBoundary(menuSections, 'menuSections')}</nav>
+        </aside>
+        <div id="rightPanel">{includeErrorBoundary(rightPanel, 'rightPanel')}</div>
+        <div id="bottomDialog">{includeErrorBoundary(bottomDialog, 'bottomDialog')}</div>
         <div id="backdrop">
-          <div id="modal">{modal}</div>
+          <div id="modal">{includeErrorBoundary(modal, 'modal')}</div>
         </div>
         <Toaster />
       </div>
@@ -54,12 +75,21 @@ export const RawLayout = ({ menuSections, menuContent, header, compactMenu = tru
   )
 }
 
-export const Layout = ({ menu, header, children, className, style }: Props) => (
+const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'>>) => {
+  const menuContent = typeof content === 'function' ? content() : content
+  return <MenuContent {...menuContent} />
+}
+
+export const Layout = ({ menu, header, children, errorBoundaries, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
-    menuSections={<MenuSections sections={menu.sections} />}
-    menuContent={menu.content ? <MenuContent {...menu.content} /> : undefined}
+    menuSections={<MenuSections {...menu} />}
+    menuContent={menu.content
+      ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
+      : undefined
+    }
     compactMenu={menu.compact}
+    errorBoundaries={errorBoundaries}
     className={className}
     style={style}
   >

package/src/LayoutOverlayManager.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { Button, Flex } from '@citric/core'
+import { Button } from '@citric/core'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
 import { OverlayContent, OverlayContentProps } from './components/OverlayContent'
+import { getDictionary } from './dictionary'
 import { ElementNotFound, LayoutError } from './errors'
 import { showToaster as showReactToaster } from './toaster'
 import { valueOfLayoutVar } from './utils'
@@ -13,6 +14,8 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
 }
 
 type BottomDialogOptions = Omit<DialogOptions, 'title'>
+type OverlaySize = 'small' | 'medium' | 'large'
+type ModalSize = 'fit-content' | OverlaySize
 
 interface LayoutElements {
   backdrop: HTMLElement | null,
@@ -29,7 +32,15 @@ interface OverlayContentSetter {
   bottomDialog?: SetContentFn,
 }
 
-type ModalSize = 'fit-content' | 'small' | 'medium' | 'large'
+interface CustomModalOptions {
+  size?: ModalSize,
+  onClose?: () => void,
+}
+
+interface CustomRightPanelOptions {
+  size?: OverlaySize,
+  onClose?: () => void,
+}
 
 const BACKDROP_ID = 'backdrop'
 const MODAL_ID = 'modal'
@@ -71,23 +82,22 @@ class LayoutOverlayManager {
     return { modal, rightPanel, bottomDialog }
   }
 
-  showCustomModal(content: ReactElement, size: ModalSize = 'medium') {
+  showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: CustomModalOptions = {}) {
     if (!this.elements?.modal) throw new ElementNotFound('modal', MODAL_ID)
     if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
+    this.onModalClose = onClose
     this.setContent.modal(content)
     this.elements.backdrop?.setAttribute('class', 'visible')
     this.elements.modal.setAttribute('class', `visible ${size}`)
   }
 
-  showModal(props: OverlayContentProps) {
-    this.onModalClose = props.onClose
-    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />)
+  showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
+    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />, { size, onClose: props.onClose })
   }
 
   private showDialog(options: DialogOptions): Promise<boolean> {
     let dialogResult = false
     return new Promise((resolve, reject) => {
-      this.onModalClose = () => resolve(dialogResult)
       try {
         this.showCustomModal(
           <Dialog
@@ -98,7 +108,7 @@ class LayoutOverlayManager {
               this.closeModal()
             }}
           />,
-          'small',
+          { size: 'small', onClose: () => resolve(dialogResult) },
         )
       } catch (error) {
         reject(error)
@@ -106,48 +116,53 @@ class LayoutOverlayManager {
     })
   }
 
-  confirm({ confirm = 'OK', cancel = 'Cancel', ...options }: DialogOptions): Promise<boolean> {
-    return this.showDialog({ ...options, confirm, cancel })
+  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
+    const t = getDictionary()
+    return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
   }
 
-  async alert({ confirm = 'OK', showButton = true, ...options }: AlertOptions): Promise<void> {
-    await this.showDialog({ ...options, confirm: showButton ? confirm : undefined })
+  async alert({ confirm, showButton = true, ...options }: AlertOptions): Promise<void> {
+    const t = getDictionary()
+    await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined })
   }
 
   showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
     if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', BOTTOM_DIALOG_ID)
     if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
     return new Promise((resolve) => {
-      this.setContent.bottomDialog!(
-        <Flex gap>
+      this.setContent.bottomDialog?.(
+        <>
           {message}
-          {cancel && <Button onClick={() => resolve(true)} colorScheme="inverse" appearance="outlined">{cancel}</Button>}
-          {confirm && <Button onClick={() => resolve(false)} colorScheme="inverse">{confirm}</Button>}
-        </Flex>,
+          <div className="btn-group">
+            {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
+            {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
+          </div>
+        </>,
       )
       this.elements?.bottomDialog?.setAttribute('class', 'visible')
     })
   }
 
-  showCustomRightPanel(content: ReactElement) {
+  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
     if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', RIGHT_PANEL_ID)
     if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
+    this.onModalClose = onClose
     this.setContent.rightPanel(content)
-    this.elements?.rightPanel.setAttribute('class', 'visible')
+    this.elements?.rightPanel.classList.add(size)
+    setTimeout(() => this.elements?.rightPanel?.classList?.add('visible'))
   }
 
-  showRightPanel(props: OverlayContentProps) {
-    const onClose = () => {
-      this.closeRightPanel()
-      if (props.onClose) props.onClose()
-    }
-    this.showCustomRightPanel(<OverlayContent {...props} onClose={onClose} type="panel" />)
+  showRightPanel({ size, ...props }: OverlayContentProps & { size?: OverlaySize }) {
+    this.showCustomRightPanel(
+      <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
+      { size, onClose: props.onClose },
+    )
   }
 
-  closeModal() {
+  closeModal(runCloseListener = true) {
     this.elements?.modal?.classList.remove('visible')
     this.elements?.backdrop?.setAttribute('class', '')
-    if (this.onModalClose) {
+    if (runCloseListener && this.onModalClose) {
       this.onModalClose()
       this.onModalClose = undefined
     }
@@ -160,11 +175,16 @@ class LayoutOverlayManager {
     )
   }
 
-  closeRightPanel() {
-    this.elements?.rightPanel?.setAttribute('class', '')
+  closeRightPanel(runCloseListener = true) {
+    this.elements?.rightPanel?.classList.remove('visible')
+    if (runCloseListener && this.onModalClose) {
+      this.onModalClose()
+      this.onModalClose = undefined
+    }
     setTimeout(
       () => {
         if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
+        this.elements?.rightPanel?.removeAttribute('class')
       },
       parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000,
     )
@@ -174,6 +194,14 @@ class LayoutOverlayManager {
     this.elements?.bottomDialog?.setAttribute('class', '')
   }
 
+  isInsideModal(element: HTMLElement) {
+    return !!this.elements?.modal?.contains(element)
+  }
+
+  isInsideRightPanel(element: HTMLElement) {
+    return !!this.elements?.rightPanel?.contains(element)
+  }
+
   showToaster = showReactToaster
 }
 

package/src/components/Dialog.tsx

@@ -1,5 +1,7 @@
 import { Button, Flex, Input, Text } from '@citric/core'
+import { interpolate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
+import { useDictionary } from '../dictionary'
 import { OverlayContent } from './OverlayContent'
 
 interface Validation {
@@ -15,6 +17,14 @@ export interface DialogOptions {
   confirm?: string,
   cancel?: string,
   validation?: false | string | Validation,
+  /**
+   * @default modal
+   */
+  type?: 'modal' | 'panel',
+  /**
+   * @default right if type is "panel", "right" otherwise.
+   */
+  buttonPlacement?: 'left' | 'center' | 'right',
 }
 
 interface Props extends DialogOptions {
@@ -22,15 +32,34 @@ interface Props extends DialogOptions {
   onCancel: () => void,
 }
 
-export const Dialog = ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel }: Props) => {
+const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
+  center: 'center',
+  left: 'start',
+  right: 'end',
+}
+
+export const Dialog = ({
+  message,
+  title,
+  subtitle,
+  cancel,
+  confirm,
+  validation,
+  onConfirm,
+  onCancel,
+  type = 'modal',
+  buttonPlacement = type === 'panel' ? 'left' : 'right',
+}: Props,
+) => {
+  const t = useDictionary()
   const [enabled, setEnabled] = useState(!validation)
 
   function renderValidation() {
     if (!validation) return null
-    const value = typeof validation === 'string' ? validation : validation.label
+    const value = typeof validation === 'string' ? validation : validation.value
     const label = typeof validation === 'object' && validation.label
       ? validation.label
-      : `Please, confirm the action by typing "${value}" below:`
+      : interpolate(t.validationLabel, value)
     const placeholder = typeof validation === 'object' ? validation.placeholder : undefined
     return (
       <div style={{ margin: '16px 0' }}>
@@ -41,10 +70,12 @@ export const Dialog = ({ message, title, subtitle, cancel, confirm, validation,
   }
 
   return (
-    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type="modal">
-      {message}
-      {renderValidation()}
-      {(cancel || confirm) && <Flex gap justifyContent="end" alignItems="center" sx={{ mt: 6 }}>
+    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
+      <Flex flexDirection="column" flex={1}>
+        {message}
+        {renderValidation()}
+      </Flex>
+      {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>
         {cancel && <Button appearance="outlined" colorScheme="inverse" onClick={onCancel}>{cancel}</Button>}
         {confirm && <Button colorScheme="primary" onClick={onConfirm} disabled={!enabled}>
           {confirm}

package/src/components/Header.tsx

@@ -6,6 +6,7 @@ import { UserMenu } from './UserMenu'
 
 export interface HeaderProps {
   logo?: ReactNode,
+  logoHref?: string,
   userName?: string,
   email?: string,
   options?: SelectionListProps['items'],
@@ -13,9 +14,9 @@ export interface HeaderProps {
   right?: ReactNode,
 }
 
-export const Header = ({ logo, center, right, userName, email, options }: HeaderProps) => (
+export const Header = ({ logo, logoHref, center, right, userName, email, options }: HeaderProps) => (
   <>
-    {logo ?? <StackspotLogo title="stackspot" style={{ width: 130 }} />}
+    <a href={logoHref} title="Home">{logo ?? <StackspotLogo style={{ width: 130 }} />}</a>
     <Flex flex={1}>{center}</Flex>
     {right}
     {userName && <UserMenu userName={userName} email={email} options={options} />}

package/src/components/Menu/MenuContent.tsx

@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { IconBox, Text } from '@citric/core'
+import { Flex, IconBox, Text } from '@citric/core'
 import { ArrowLeft, ChevronDown } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
@@ -26,16 +28,34 @@ const MenuGroup = styled.ul`
     padding: 0;
   }
 
+  .item-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
   li a {
     position: relative;
     height: 0;
     overflow: hidden;
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
     transition: height 0.3s, background-color 0.2s;
     margin: 0 ${PADDING - ITEM_PADDING}px;
     border-radius: 4px;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     padding: 0 ${ITEM_PADDING}px;
 
     &:hover {
@@ -109,24 +129,32 @@ const Title = styled.header`
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-const ActionItem = ({ label, onClick, href, active }: MenuAction) => (
+const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => (
   <a
     href={active ? undefined : href}
-    onClick={active ? onClick : undefined}
-    className={listToClass(['action', active ? 'active' : undefined])}
+    onClick={() => {
+      if (active) return
+      if (onClick) onClick()
+      hideOverlayImmediately()
+    }}
+    className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
   >
-    <Text appearance="body2">{label}</Text>
+    {icon}
+    <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+    {badge}
   </a>
 )
 
-const CollapsibleGroupItem = ({ label, open: initiallyOpened, children }: ItemGroup) => {
+const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
 
   return (
     <>
-      <a onClick={() => setOpen(!open)}>
-        <Text appearance="body2">{label}</Text>
+      <a onClick={() => setOpen(!open)} className="item-row">
+        {icon}
+        <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+        {badge}
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
       <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
@@ -134,12 +162,16 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children }: ItemGr
   )
 }
 
-const RootGroupItem = ({ label, children }: ItemGroup) => {
-  const items = useMemo(() => children?.map(renderOption), [children])
+const RootGroupItem = ({ label, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
+  const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
 
   return (
     <>
-      <Text appearance="overheader2" colorScheme="light.700" className="group-title">{label}</Text>
+      <div className="item-row">
+        {icon}
+        <Text appearance="overheader2" colorScheme="light.700" className={`group-title label ${overflow}`}>{label}</Text>
+        {badge}
+      </div>
       <MenuGroup className="open no-indentation">{items}</MenuGroup>
     </>
   )
@@ -153,9 +185,21 @@ function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
   return <li key={option.label}>{'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}</li>
 }
 
-export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [] }: MenuSectionContent) => {
+export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [], loading, error }: MenuSectionContent) => {
   const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options])
 
+  function renderContent() {
+    if (loading) {
+      return (
+        <Flex justifyContent="center" alignItems="center" flex={1} sx={{ padding: '40px' }}>
+          <LoadingCircular />
+        </Flex>
+      )
+    }
+    if (error) return <Text colorScheme="danger">{error}</Text>
+    return <MenuGroup className="open root no-indentation">{items}</MenuGroup>
+  }
+
   return (
     <>
       {goBack && (
@@ -173,7 +217,7 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [
         </Title>
       )}
       {pageSelector && <PageSelector {...pageSelector} />}
-      <MenuGroup className="open root no-indentation">{items}</MenuGroup>
+      {renderContent()}
     </>
   )
 }

package/src/components/Menu/MenuSections.tsx

@@ -3,7 +3,7 @@ import { IconBox, Text } from '@citric/core'
 import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
-import { MenuProps, MenuSection, MenuSectionContent } from './types'
+import { MenuProps, MenuSection } from './types'
 
 const ARROW_HEIGHT = 24
 const HIDE_OVERLAY_DELAY_MS = 400
@@ -16,7 +16,8 @@ function hideOverlay() {
   hideOverlayTask = window.setTimeout(hideOverlayImmediately, HIDE_OVERLAY_DELAY_MS)
 }
 
-function hideOverlayImmediately() {
+// eslint-disable-next-line react-refresh/only-export-components
+export function hideOverlayImmediately() {
   document.getElementById(MENU_OVERLAY_ID)?.classList.remove('visible')
 }
 
@@ -35,19 +36,36 @@ function isMenuContentVisible() {
   return !!document.getElementById('layout')?.classList?.contains('menu-content-visible')
 }
 
-function renderSection(
-  { icon, label, href, onClick, active, content }: MenuSection,
-  setOverlayContent: (content: MenuSectionContent | undefined) => void,
-) {
+const Section = ({ 
+  icon,
+  label,
+  href,
+  onClick,
+  active,
+  content,
+  onOpen,
+  setCurrentOverlay,
+  id,
+  hasContent,
+}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean }) => {
+  const contentToRender = typeof content === 'function' ? content() : content
+
   function shouldShowOverlay() {
-    return !!content && (!active || !isMenuContentVisible())
+    /* The overlay should appear if:
+     * 1. The section has some content to render OR:
+     *   1.1 The section is active and there is a contextual menu for the active page.
+     * 2. The section is inactive OR:
+     *   2.1. The contextual menu is hidden.
+     */
+    return (!!contentToRender || (hasContent && active)) && (!active || !isMenuContentVisible())
   }
 
   function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
     if (!shouldShowOverlay()) return
+    onOpen?.()
     const rect = (event.target as HTMLElement)?.getBoundingClientRect()
     const arrow: HTMLElement | null = document.querySelector(`#${MENU_OVERLAY_ID} .arrow`)
-    setOverlayContent(content)
+    setCurrentOverlay(id)
     showOverlay()
     if (rect && arrow) {
       arrow.style.top = `${rect.top + rect.height / 2 - ARROW_HEIGHT / 2}px`
@@ -74,7 +92,14 @@ function renderSection(
   )
 }
 
-export const MenuSections = ({ sections }: Pick<MenuProps, 'sections'>) => {
+const OverlayRenderer = ({ content }: Pick<MenuSection, 'content'>) => {
+  const data = typeof content === 'function' ? content() : content
+  return <div><MenuContent {...data} /></div>
+}
+
+export const MenuSections = ({ sections, ...props }: MenuProps) => {
+  // this is a mock state only used to force an update on the component.
+  const [_, setUpdate] = useState(0)
   const toggleMenu = useCallback(() => {
     const layout = document.getElementById('layout')
     if (!layout) return
@@ -83,21 +108,40 @@ export const MenuSections = ({ sections }: Pick<MenuProps, 'sections'>) => {
     } else {
       layout.classList.add('menu-content-visible')
     }
+    setUpdate(current => current + 1)
   }, [])
-  const [overlayContent, setOverlayContent] = useState<MenuSectionContent | undefined>()
+  // the current overlay showing, when the user hovers the section icon. This is the index of the item in the sections array.
+  const [currentOverlay, setCurrentOverlay] = useState<number | undefined>()
   
-  const sectionItems = useMemo(() => sections.map(s => renderSection(s, setOverlayContent)), [sections])
+  const sectionItems = useMemo(
+    () => sections.map((s, i) => <Section key={i} id={i} {...s} setCurrentOverlay={setCurrentOverlay} hasContent={!!props.content} />),
+    [sections],
+  )
+
+  /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
+  instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
+  Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
+  component. Without this, React would see the content changing every time a new section is hovered. Since the content might be a
+  hook, this would cause some serious problems. */
+  function renderMenuOverlay() {
+    if (currentOverlay === undefined) return null
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active && !!props.content
+    return shouldRenderMenuContentInstead
+      ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content} />
+      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content} />
+  }
+
   return (
     <>
       <ul>{sectionItems}</ul>
-      <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
+      {!!props.content && <button className="toggle" onClick={toggleMenu} title="Toggle menu panel visibility">
         <IconBox>
           <MenuIcon className="expand" />
           <ChevronLeft className="collapse" />
         </IconBox>
-      </button>
+      </button>}
       <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
-        {overlayContent && <div><MenuContent {...overlayContent} /></div>}
+        {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>
     </>