FooterWrapper

The FooterWrapper component is used in LayoutNoSidebar. It is not constrained by width and so it will fill the window width in the layout. It wraps the FooterContent component (which may be constrained.)

Site footers mostly contain menus and links. To make styling this content quick and easy the FooterWrapper component takes a palette prop which is used to set the background color and link styles.

To override the default styling, shadow the component.

FooterWrapper @"src/components/FooterWrapper"

Edit the props to see this component update live!

jsx

<FooterWrapper
  palette={{ text: "white", textMuted: "yellow", background: "blue" }}
>
  <FlexMenu
    data={menuData}
    componentMap={{
      SiteName: (props) => {
        return (
          <FlexMenuLink {...props}>
            <BsApple />
          </FlexMenuLink>
        )
      },
    }}
    justify="space-around"
    sx={{
      variant: "text.ui.4",
      li: {
        ".active": { textDecoration: "none" },
        a: {
          height: "45px",
        },
      },
    }}
  />
</FooterWrapper>

<FooterWrapper
  palette={{ text: "white", textMuted: "yellow", background: "blue" }}
>
  <FlexMenu
    data={menuData}
    componentMap={{
      SiteName: (props) => {
        return (
          <FlexMenuLink {...props}>
            <BsApple />
          </FlexMenuLink>
        )
      },
    }}
    justify="space-around"
    sx={{
      variant: "text.ui.4",
      li: {
        ".active": { textDecoration: "none" },
        a: {
          height: "45px",
        },
      },
    }}
  />
</FooterWrapper>