Function MainLayoutComponent

packages/shared/src/components/MainLayout.tsx:90–390

({
  children,
  activePage,
  isNavItemsButton,
  customBanner,
  additionalButtons,
  screenCentered = true,
  showSidebar = true,
  className,
  onLogoClick,
  onNavTabClick,
  canGoBack,
  hideFeedbackWidget = false,
  topBanner,
}: MainLayoutProps)

export const feeds = Object.values(SharedFeedPage);

function MainLayoutComponent({
  children,
  activePage,
  isNavItemsButton,
  customBanner,
  additionalButtons,
  screenCentered = true,
  showSidebar = true,
  className,
  onLogoClick,
  onNavTabClick,
  canGoBack,
  hideFeedbackWidget = false,
  topBanner,
}: MainLayoutProps): ReactElement | null {
  const router = useRouter();
  const { logEvent } = useLogContext();
  const { user, isAuthReady, isLoggedIn, showLogin } = useAuthContext();
  const { growthbook } = useGrowthBookContext();
  const { sidebarRendered } = useSidebarRendered();
  const { isAvailable: isBannerAvailable } = useBanner();
  const { sidebarExpanded, autoDismissNotifications, loadedSettings, flags } =
    useContext(SettingsContext);
  const isSidebarCompact = !!flags?.sidebarCompact;
  const v2CollapsedPadding = isSidebarCompact
    ? 'tablet:pl-16 laptop:pl-16'
    : 'tablet:pl-16 laptop:pl-20';
  const v2ExpandedPadding = isSidebarCompact
    ? 'laptop:!pl-[19rem]'
    : 'laptop:!pl-[20rem]';
  const [hasLoggedImpression, setHasLoggedImpression] = useState(false);
  const { feedName } = useActiveFeedNameContext();
  const page = router?.route?.substring(1).trim() as SharedFeedPage;
  const currentFeedName = feedName ?? page ?? SharedFeedPage.Popular;
  const { isCustomFeed, isExploreTag } = useFeedName({
    feedName: currentFeedName,
  });
  const { plusEntryAnnouncementBar } = usePlusEntry();
  const isLaptop = useViewSize(ViewSize.Laptop);
  const isLaptopXL = useViewSize(ViewSize.LaptopXL);
  const { screenCenteredOnMobileLayout } = useFeedLayout();
  const { isNotificationsReady, unreadCount } = useNotificationContext();
  const { isV2, isLoading: isLayoutVariantLoading } = useLayoutVariant();
  useRecordRecentPages(isV2);
  useNotificationParams();

  // Settings pages render their navigation only inside the v2 context panel,
  // so the sidebar force-expands there regardless of the stored preference.
  // Mirror that here so the floating content keeps its expanded-width padding
  // and never slides under the panel. Matches the `activePage` resolution the
  // Sidebar receives below.
  const forceSidebarExpanded =
    isV2 &&
    isSidebarSettingsPath(activePage ?? router.asPath ?? router.pathname ?? '');

  // The main content's left padding settles from the rail width to the
  // expanded-sidebar width once auth, settings, and the layout-variant flag
  // resolve on the client. Without gating, the `transition-[padding]` below