Function SidebarTablet

packages/shared/src/components/sidebar/SidebarTablet.tsx:46–255

({
  activePage,
  featureTheme,
  onLogoClick,
}: {
  activePage: string;
  featureTheme?: {
    logo?: string;
    logoText?: string;
  };
  onLogoClick?: (e: React.MouseEvent) => unknown;
})

import { getUnreadText } from '../notifications/utils';

export const SidebarTablet = ({
  activePage,
  featureTheme,
  onLogoClick,
}: {
  activePage: string;
  featureTheme?: {
    logo?: string;
    logoText?: string;
  };
  onLogoClick?: (e: React.MouseEvent) => unknown;
}): ReactElement => {
  const { alerts } = useAlertsContext();
  const { user, isLoggedIn, squads } = useAuthContext();
  const { unreadCount } = useNotificationContext();
  const buttonProps: ButtonProps<'a' | 'button'> = {
    variant: ButtonVariant.Tertiary,
    size: ButtonSize.Large,
    className:
      'w-full !bg-transparent active:bg-transparent aria-pressed:bg-transparent typo-caption1',
  };
  const feedName = getFeedName(activePage, {
    hasUser: !!user,
    hasFiltered: !alerts?.filter,
  });
  const hasSquads = (squads?.length ?? 0) > 0;
  const squadsUrl = hasSquads
    ? `${webappUrl}${squadCategoriesPaths['My Squads'].substring(1)}`
    : `${webappUrl}${squadCategoriesPaths.discover.substring(1)}`;
  const activeNav = useActiveNav(feedName);
  const hasOpportunityAlert = !!alerts.opportunityId;
  const { checkHasCompleted } = useActions();
  const hasNotClickedOpportunity = !checkHasCompleted(
    ActionType.ClickedOpportunityNavigation,
  );
  const logOpportunityNudgeClick = useLogOpportunityNudgeClick(
    TargetId.Sidebar,
  );

  return (
    <SidebarAside
      data-testid="sidebar-aside"
      className={classNames(
        'w-16 items-center gap-4',
        featureTheme && 'bg-transparent',
      )}
    >
      <HeaderLogo
        compact
        position={LogoPosition.Relative}
        onLogoClick={onLogoClick}
        className={classNames('h-10 pt-4')}
      />
      <Link href={`${webappUrl}`} prefetch={false} passHref>
        <Button
          {...buttonProps}
          tag="a"
          icon={<HomeIcon secondary={activeNav.home} size={IconSize.Medium} />}