@redacto.io/consent-sdk-react 3.5.0 → 3.6.0

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/SideBarPC.tsx

@@ -0,0 +1,475 @@
+import { cn } from '../../utils/cn';
+import SimpleBar from '../../ui/SimpleBar';
+import { PCText, PCAvatar, PCButton, PCActionIcon } from '../../ui';
+import { PCTooltip } from '../../ui/PCTooltip';
+import { pcStyles } from '../../styles/pcStyles';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  IoArrowBackOutline,
+  IoChevronBackOutline,
+  IoChevronForwardOutline,
+  IoCloseOutline,
+  IoLogOutOutline,
+  IoMenuOutline,
+} from 'react-icons/io5';
+
+const getVar = (varName: string): string => `var(${varName})`;
+import { SideMenuPC } from './SideMenuPC';
+import { useMenuItemsPC } from '../../lib/constants';
+import { useOrganization } from '../../context/OrganizationContext';
+import type { SideBarPCProps } from './types';
+import { signOutPrivacyCenter } from '../../lib/utils';
+
+export default function SideBarPC({
+  className,
+  isCompact = false,
+  onBack,
+}: SideBarPCProps) {
+  const { t } = useTranslation();
+  const menuItems = useMenuItemsPC();
+  const [isCollapsed, setIsCollapsed] = useState(true); // Always start collapsed
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [isDesktopHovered, setIsDesktopHovered] = useState(false);
+  const [email, setEmail] = useState<string>('');
+  // const [isSigningOut, setIsSigningOut] = useState(false);
+  const { organization } = useOrganization();
+
+  useEffect(() => {
+    setEmail(sessionStorage.getItem('email') || '');
+  }, []);
+
+  // const handleSignOut = useCallback(async () => {
+  //   setIsSigningOut(true);
+  //   signOutPrivacyCenter();
+  //   // Sign out handled - parent component should handle navigation/error
+  //   setIsSigningOut(false);
+  // }, []);
+
+  const handleDesktopToggle = useCallback(() => {
+    if (!isCompact && !isMobileOpen) {
+      setIsCollapsed((prev) => !prev);
+    }
+  }, [isCompact, isMobileOpen]);
+
+  const handleMobileToggle = useCallback(() => {
+    setIsMobileOpen((prev) => !prev);
+  }, []);
+
+  const handleMobileClose = useCallback(() => {
+    setIsMobileOpen(false);
+  }, []);
+
+  const handleMenuItemSelect = useCallback(() => {
+    if (isMobileOpen) {
+      setIsMobileOpen(false);
+      return;
+    }
+
+    if (!isCompact) {
+      setIsCollapsed(true);
+    }
+  }, [isCompact, isMobileOpen]);
+
+  const handleDesktopMouseEnter = useCallback(() => {
+    if (!isMobileOpen) {
+      setIsDesktopHovered(true);
+    }
+  }, [isMobileOpen]);
+
+  const handleDesktopMouseLeave = useCallback(() => {
+    setIsDesktopHovered(false);
+  }, []);
+
+  // Close mobile menu when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (
+        isMobileOpen &&
+        !target.closest('aside') &&
+        !target.closest('[data-mobile-menu-button]')
+      ) {
+        setIsMobileOpen(false);
+      }
+    };
+
+    if (isMobileOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      // Prevent body scroll when mobile menu is open
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.body.style.overflow = '';
+    };
+  }, [isMobileOpen]);
+
+  const organizationName = organization?.name || '';
+
+  const sidebarClassName = useMemo(
+    () =>
+      cn(
+        className,
+        isCollapsed && 'pc-sidebar-collapsed'
+      ),
+    [isCollapsed, className]
+  );
+
+  const sidebarStyle = useMemo(
+    () => ({
+      position: 'fixed' as const,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      zIndex: 1100,
+      backgroundColor: getVar('--pc-bg-shell'),
+      boxShadow: getVar('--pc-sidebar-shadow'),
+      transition: 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease',
+      display: 'flex',
+      flexDirection: 'column',
+      overflowY: 'hidden' as const,
+      overflowX: 'visible' as const,
+      boxSizing: 'border-box',
+      height: '100vh',
+      willChange: 'width',
+      // Width will be controlled by CSS classes, but set default inline for non-desktop
+      width: isMobileOpen
+        ? getVar('--pc-sidebar-mobile-width')
+        : isCollapsed
+          ? getVar('--pc-sidebar-collapsed-width')
+          : getVar('--pc-sidebar-expanded-width'),
+    }),
+    [isCollapsed, isMobileOpen]
+  );
+
+  const headerTextStyle = useMemo(
+    () => ({
+      overflow: 'hidden',
+      transition: 'opacity 0.3s ease, width 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease',
+      flex: 1,
+      minWidth: 0,
+      willChange: 'opacity, width, max-width, margin-left',
+      ...(isMobileOpen || !isCollapsed ? {
+        opacity: 1,
+        maxWidth: '100%',
+        width: 'auto',
+        marginLeft: '0.75rem',
+      } : {
+        width: 0,
+        opacity: 0,
+        maxWidth: 0,
+        marginLeft: 0,
+      }),
+    }),
+    [isCollapsed, isMobileOpen]
+  );
+
+  const emailContainerStyle = useMemo(
+    () => ({
+      overflow: 'hidden',
+      transition: 'all 0.3s',
+      ...(isMobileOpen || !isCollapsed ? {
+        height: email ? 'auto' : 0,
+        opacity: email ? 1 : 0,
+        marginBottom: email ? '0.5rem' : 0,
+      } : {
+        height: 0,
+        opacity: 0,
+        marginBottom: 0,
+      }),
+    }),
+    [isCollapsed, isMobileOpen, email]
+  );
+
+  const buttonStyle = useMemo(
+    () => ({
+      height: 'auto',
+      minHeight: '2.25rem',
+      width: '100%',
+      justifyContent: (isMobileOpen || !isCollapsed) ? 'flex-start' : 'center',
+      padding: 0,
+      fontWeight: pcStyles.fontWeightMedium.fontWeight,
+      color: getVar('--pc-text-primary'),
+      outline: 'none',
+      transition: 'all 0.3s',
+      alignItems: 'center',
+      display: 'flex',
+    }),
+    [isCollapsed, isMobileOpen]
+  );
+
+  const handleBack = useCallback(() => {
+    if (onBack === 'back') {
+      window.history.back();
+    } else if (onBack === 'signout') {
+      signOutPrivacyCenter();
+      // Redirect to previous page after clearing cookies and sessionStorage
+      window.history.back();
+    }
+  }, [onBack]);
+
+  const footerActionLabel = onBack === 'back' ? t('back') : t('signOut');
+  const footerActionIconSize = !isMobileOpen && isCollapsed ? 19 : 18;
+  const footerActionIcon =
+    onBack === 'back' ? (
+      <IoArrowBackOutline size={footerActionIconSize} style={{ flexShrink: 0 }} />
+    ) : (
+      <IoLogOutOutline size={footerActionIconSize} style={{ flexShrink: 0 }} />
+    );
+
+  return (
+    <>
+      {!isCompact && !isMobileOpen && (
+        <PCActionIcon
+          variant="outline"
+          aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          className="pc-sidebar-toggle-desktop pc-hidden-xs pc-hidden-sm pc-flex-md"
+          data-collapsed={isCollapsed ? 'true' : 'false'}
+          data-visible={(!isCollapsed || isDesktopHovered) ? 'true' : 'false'}
+          style={{
+            position: 'fixed',
+            top: '28px',
+            zIndex: 2000,
+            width: '28px',
+            height: '28px',
+            borderRadius: '9999px',
+            borderColor: getVar('--pc-border-color'),
+            backgroundColor: getVar('--pc-bg-primary'),
+            color: getVar('--pc-text-secondary'),
+            boxShadow: '0 10px 24px rgba(15, 23, 42, 0.14)',
+          }}
+          onMouseEnter={handleDesktopMouseEnter}
+          onMouseLeave={handleDesktopMouseLeave}
+          onClick={handleDesktopToggle}
+        >
+          {isCollapsed ? (
+            <IoChevronForwardOutline size={14} />
+          ) : (
+            <IoChevronBackOutline size={14} />
+          )}
+        </PCActionIcon>
+      )}
+
+      {/* Mobile Menu Button - visible only on mobile when sidebar is closed */}
+      {!isMobileOpen && (
+        <PCActionIcon
+          data-mobile-menu-button
+          aria-label="Open Sidebar Menu"
+          variant="default"
+          style={{
+            position: 'fixed',
+            left: '0.75rem',
+            top: '0.75rem',
+            zIndex: 992,
+            height: '2.25rem',
+            width: '2.25rem',
+            padding: 0,
+            color: getVar('--pc-text-primary'),
+          }}
+          className="pc-hidden-md"
+          onClick={handleMobileToggle}
+        >
+          <IoMenuOutline size={20} />
+        </PCActionIcon>
+      )}
+
+      {/* Mobile Overlay */}
+      <div
+        className="pc-hidden-md pc-mobile-overlay"
+        data-open={isMobileOpen}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 990,
+          backgroundColor: getVar('--pc-bg-overlay'),
+        }}
+        onClick={handleMobileClose}
+        aria-hidden={!isMobileOpen}
+      />
+
+      {/* Sidebar */}
+      <aside
+        style={sidebarStyle}
+        className={cn(sidebarClassName, 'pc-sidebar')}
+        data-mobile-open={isMobileOpen}
+        onMouseEnter={handleDesktopMouseEnter}
+        onMouseLeave={handleDesktopMouseLeave}
+      >
+        {/* Sidebar Header */}
+        <div style={{
+          flexShrink: 0,
+          ...pcStyles.flex,
+          minHeight: '56px',
+          height: '56px',
+          ...pcStyles.itemsCenter,
+          ...(isMobileOpen || !isCollapsed ? { ...pcStyles.justifyBetween } : { ...pcStyles.justifyCenter }),
+          backgroundColor: getVar('--pc-bg-shell'),
+          paddingLeft: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
+          paddingRight: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
+          transition: 'padding-left 0.3s ease, padding-right 0.3s ease, justify-content 0.3s ease',
+          willChange: 'padding-left, padding-right',
+        }}>
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            ...(isMobileOpen || !isCollapsed ? { flex: 1, minWidth: 0 } : { justifyContent: 'center', width: '100%' }),
+            transition: 'flex 0.3s ease, min-width 0.3s ease, justify-content 0.3s ease, width 0.3s ease',
+            willChange: 'flex, min-width, justify-content, width',
+          }}>
+            <div style={{
+              flexShrink: 0,
+              transition: 'transform 0.3s ease',
+              willChange: 'transform',
+            }}>
+              <PCAvatar name={organizationName} color="info" size="md" />
+            </div>
+            <div style={headerTextStyle}>
+              <PCText style={{
+                whiteSpace: 'nowrap',
+                fontSize: pcStyles.textBase.fontSize,
+                fontWeight: pcStyles.fontWeightSemibold.fontWeight,
+                letterSpacing: '-0.025em',
+                color: getVar('--pc-text-primary'),
+                transition: 'opacity 0.3s ease, transform 0.3s ease',
+                willChange: 'opacity, transform',
+              }}>
+                {organizationName}
+              </PCText>
+            </div>
+          </div>
+          <div style={{
+            ...pcStyles.flex,
+            ...pcStyles.itemsCenter,
+            flexShrink: 0,
+            opacity: (isMobileOpen || !isCollapsed) ? 1 : 0,
+            width: (isMobileOpen || !isCollapsed) ? 'auto' : 0,
+            overflow: 'hidden',
+            transition: 'opacity 0.3s ease, width 0.3s ease',
+            willChange: 'opacity, width',
+            pointerEvents: (isMobileOpen || !isCollapsed) ? 'auto' : 'none',
+          }}>
+            <PCActionIcon
+              variant="default"
+              style={{ color: getVar('--pc-text-primary') }}
+              className="pc-hidden-md"
+              onClick={handleMobileClose}
+              aria-label="Close Sidebar Menu"
+            >
+              <IoCloseOutline size={20} />
+            </PCActionIcon>
+          </div>
+        </div>
+
+        <div style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          position: 'relative',
+        }}>
+          <SimpleBar style={{
+            flex: 1,
+            minHeight: 0,
+            height: '100%',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+          }}>
+            <SideMenuPC
+              menuItems={menuItems}
+              isCollapsed={isMobileOpen ? false : isCollapsed}
+              onItemSelect={handleMenuItemSelect}
+            />
+          </SimpleBar>
+        </div>
+
+        <div style={{
+          flexShrink: 0,
+          backgroundColor: getVar('--pc-bg-shell'),
+          paddingTop: '0.75rem',
+          paddingBottom: '0.75rem',
+          paddingLeft: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
+          paddingRight: isMobileOpen || !isCollapsed ? '1rem' : '0.5rem',
+          minHeight: 'fit-content',
+          transition: 'padding-left 0.3s ease, padding-right 0.3s ease',
+          willChange: 'padding-left, padding-right',
+        }}>
+          <div style={emailContainerStyle}>
+            <PCText size="sm" color="secondary" style={{
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              fontSize: pcStyles.textXs.fontSize,
+              color: getVar('--pc-text-secondary'),
+              lineHeight: 1.5,
+            }}>
+              {email}
+            </PCText>
+          </div>
+          {onBack && (
+            !isMobileOpen && isCollapsed ? (
+              <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <PCTooltip content={footerActionLabel} placement="right" color="invert">
+                  <div style={{ width: 'fit-content', margin: '0 auto' }}>
+                    <PCButton
+                      variant="text"
+                      onClick={handleBack}
+                      aria-label={footerActionLabel}
+                      style={{
+                        ...buttonStyle,
+                        width: '2.25rem',
+                        height: '2.25rem',
+                        minHeight: '2.25rem',
+                        padding: 0,
+                        marginTop: email ? '0.5rem' : 0,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        fontSize: pcStyles.textSm.fontSize,
+                      }}
+                    >
+                      {footerActionIcon}
+                    </PCButton>
+                  </div>
+                </PCTooltip>
+              </div>
+            ) : (
+              <PCButton
+                variant="text"
+                onClick={handleBack}
+                aria-label={footerActionLabel}
+                style={{
+                  ...buttonStyle,
+                  width: '100%',
+                  padding: '0.4375rem 0',
+                  marginTop: email && (isMobileOpen || !isCollapsed) ? '0.5rem' : 0,
+                  justifyContent: (isMobileOpen || !isCollapsed) ? 'flex-start' : 'center',
+                  fontSize: pcStyles.textSm.fontSize,
+                  minHeight: 'auto',
+                }}
+              >
+                <span
+                  style={{
+                    marginRight: (isMobileOpen || !isCollapsed) ? '0.625rem' : 0,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  {footerActionIcon}
+                </span>
+                {(isMobileOpen || !isCollapsed) && (
+                  <span style={{ whiteSpace: 'nowrap', lineHeight: 1.5 }}>{footerActionLabel}</span>
+                )}
+              </PCButton>
+            )
+          )}
+        </div>
+      </aside>
+    </>
+  );
+}