1  import useBaseUrl from '@docusaurus/useBaseUrl';
  2  import { useLocation } from '@docusaurus/router';
  3  import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
  4  import styles from './DocsDropdown.module.css';
  5  
  6  type Section = 'genai' | 'ml' | 'default';
  7  
  8  interface DocsDropdownProps {
  9    mobile?: boolean;
 10    position?: 'left' | 'right';
 11    items: any[];
 12    label?: string;
 13    [key: string]: any;
 14  }
 15  
 16  export default function DocsDropdown({
 17    mobile,
 18    items: configItems,
 19    label: configLabel,
 20    ...props
 21  }: DocsDropdownProps): JSX.Element {
 22    const location = useLocation();
 23  
 24    const getCurrentSection = (): Section => {
 25      const path = location.pathname;
 26      const genaiPath = useBaseUrl('/genai');
 27      const mlPath = useBaseUrl('/ml');
 28      if (path.startsWith(genaiPath)) {
 29        return 'genai';
 30      } else if (path.startsWith(mlPath)) {
 31        return 'ml';
 32      }
 33      return 'default';
 34    };
 35  
 36    const currentSection = getCurrentSection();
 37  
 38    const getLabel = (): JSX.Element => {
 39      let color;
 40      let text = configLabel || 'Documentation';
 41  
 42      if (currentSection === 'genai') {
 43        color = 'var(--genai-color-primary)';
 44        text = 'LLMs & Agents';
 45      } else if (currentSection === 'ml') {
 46        color = 'var(--ml-color-primary)';
 47        text = 'Machine Learning';
 48      }
 49  
 50      return (
 51        <div
 52          style={{
 53            display: 'flex',
 54            gap: 8,
 55            alignItems: 'center',
 56          }}
 57        >
 58          {color && (
 59            <div
 60              className={styles.dropdownCircle}
 61              style={{
 62                width: 10,
 63                height: 10,
 64                backgroundColor: color,
 65                borderRadius: 4,
 66              }}
 67            />
 68          )}
 69          {text}
 70        </div>
 71      );
 72    };
 73  
 74    const enhancedItems = configItems.map((item) => {
 75      if (item.docsPluginId === 'classic-ml') {
 76        return {
 77          ...item,
 78          label: (
 79            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
 80              <div
 81                style={{
 82                  width: 10,
 83                  height: 10,
 84                  backgroundColor: 'var(--ml-color-primary)',
 85                  borderRadius: 4,
 86                }}
 87              />
 88              {item.label}
 89            </div>
 90          ),
 91        };
 92      } else if (item.docsPluginId === 'genai') {
 93        return {
 94          ...item,
 95          label: (
 96            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
 97              <div
 98                style={{
 99                  width: 10,
100                  height: 10,
101                  backgroundColor: 'var(--genai-color-primary)',
102                  borderRadius: 4,
103                }}
104              />
105              {item.label}
106            </div>
107          ),
108        };
109      }
110      return item;
111    });
112  
113    return (
114      <DropdownNavbarItem
115        {...props}
116        mobile={mobile}
117        label={getLabel()}
118        items={enhancedItems}
119        className={styles.docsDropdown}
120        data-active={currentSection !== 'default' ? currentSection : undefined}
121      />
122    );
123  }