gistfile1.txt

// packages/app/src/components/Root/Root.tsx
import React, { PropsWithChildren } from 'react';
import { useLocation } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import {
  Sidebar,
  SidebarPage,
  sidebarConfig,
  SidebarDivider,
  SidebarGroup,
  SidebarItem,
  SidebarScrollWrapper,
  SidebarSpace,
  useSidebarOpenState,
  Link,
} from '@backstage/core-components';
import HomeIcon from '@material-ui/icons/Home';
import ExtensionIcon from '@material-ui/icons/Extension';
import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
import { Box } from '@mui/material';
import { FeatureFlagBanner } from '../FeatureFlagBanner';

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    width: '100%',
  },
  banner: {
    flexShrink: 0,
    position: 'sticky',
    top: 0,
    zIndex: 100,
  },
  content: {
    flex: 1,
    overflow: 'auto',
  },
});

export const Root = ({ children }: PropsWithChildren<{}>) => {
  const location = useLocation();
  const classes = useStyles();
  
  // Check if we're on a catalog page (but not entity pages)
  const isCatalogIndexPage = location.pathname === '/catalog' || 
                            location.pathname.startsWith('/catalog?');
  
  // Don't show on entity pages like /catalog/:namespace/:kind/:name
  const isEntityPage = location.pathname.match(/^\/catalog\/[^\/]+\/[^\/]+\/[^\/]+/);
  const showBanner = isCatalogIndexPage && !isEntityPage;
  
  return (
    <SidebarPage>
      <Sidebar>
        <SidebarLogo />
        <SidebarGroup label="Menu" icon={<MenuIcon />}>
          <SidebarItem icon={HomeIcon} to="/" text="Home" />
          <SidebarItem icon={LayersIcon} to="/catalog" text="Catalog" />
          <SidebarItem icon={ExtensionIcon} to="/api-docs" text="APIs" />
          <SidebarItem icon={LibraryBooks} to="/docs" text="Docs" />
          <SidebarItem icon={CreateComponentIcon} to="/create" text="Create..." />
        </SidebarGroup>
        <SidebarDivider />
        <SidebarScrollWrapper>
          {/* Additional sidebar content */}
        </SidebarScrollWrapper>
        <SidebarSpace />
        <SidebarDivider />
        <SidebarGroup
          label="Settings"
          icon={<UserSettingsSignInAvatar />}
          to="/settings"
        >
          <SidebarSettings />
        </SidebarGroup>
      </Sidebar>
      
      <div className={classes.container}>
        {showBanner && (
          <div className={classes.banner}>
            <FeatureFlagBanner
              flagName="new-catalog-search"
              displayName="New Catalog Search"
              description="Enable the new catalog search experience"
              onToggle={(enabled) => {
                // Refresh to load the new/old catalog
                setTimeout(() => {
                  window.location.reload();
                }, 100);
              }}
            />
          </div>
        )}
        
        <div className={classes.content}>
          {children}
        </div>
      </div>
    </SidebarPage>
  );
};

// ===================================
// Alternative using MUI Box (if you prefer)
// ===================================

export const RootWithMUI = ({ children }: PropsWithChildren<{}>) => {
  const location = useLocation();
  
  // Check if we're on the catalog index page
  const isCatalogIndexPage = location.pathname === '/catalog' || 
                            location.pathname.startsWith('/catalog?');
  
  // Don't show on entity pages
  const isEntityPage = location.pathname.match(/^\/catalog\/[^\/]+\/[^\/]+\/[^\/]+/);
  const showBanner = isCatalogIndexPage && !isEntityPage;
  
  return (
    <SidebarPage>
      <Sidebar>
        {/* Your sidebar content */}
      </Sidebar>
      
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          height: '100%',
          width: '100%',
          overflow: 'hidden',
        }}
      >
        {showBanner && (
          <Box
            sx={{
              flexShrink: 0,
              position: 'sticky',
              top: 0,
              zIndex: 100,
            }}
          >
            <FeatureFlagBanner
              flagName="new-catalog-search"
              displayName="New Catalog Search"
              description="Enable the new catalog search experience"
              onToggle={(enabled) => {
                setTimeout(() => {
                  window.location.reload();
                }, 100);
              }}
            />
          </Box>
        )}
        
        <Box sx={{ flex: 1, overflow: 'auto' }}>
          {children}
        </Box>
      </Box>
    </SidebarPage>
  );
};