github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/OverviewSidebarToggle.tsx (about)

     1  import React, { useMemo } from "react"
     2  import styled from "styled-components"
     3  import { buttonsByComponent } from "./ApiButton"
     4  import { useLogAlertIndex } from "./LogStore"
     5  import { usePathBuilder } from "./PathBuilder"
     6  import { useResourceListOptions } from "./ResourceListOptionsContext"
     7  import SidebarItem from "./SidebarItem"
     8  import SidebarResources from "./SidebarResources"
     9  import { Width } from "./style-helpers"
    10  import { ResourceName, ResourceView } from "./types"
    11  import ChevronRightIcon from "@material-ui/icons/ChevronRight"
    12  import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"
    13  import { InstrumentedButton } from "./instrumentedComponents"
    14  import { useSidebarContext } from "./SidebarContext"
    15  import { AnimDuration, Color, Font, FontSize, SizeUnit } from "./style-helpers"
    16  import { Tooltip } from "@material-ui/core"
    17  import { mixinResetButtonStyle } from "./style-helpers"
    18  import { AnalyticsAction } from "./analytics"
    19  
    20  let SidebarToggleRoot = styled.div`
    21    display: flex;
    22    justify-content: flex-end;
    23  
    24    &.is-open {
    25      margin-right: -16px;
    26    }
    27  `
    28  
    29  const ToggleSidebarButton = styled(InstrumentedButton)`
    30    ${mixinResetButtonStyle}
    31    display: flex;
    32    align-items: center;
    33  
    34    svg {
    35      fill: ${Color.gray50};
    36    }
    37  
    38    &:hover svg {
    39      fill: ${Color.gray70};
    40    }
    41  `
    42  
    43  export function OverviewSidebarToggle() {
    44    const { isSidebarOpen, setSidebarClosed, setSidebarOpen } =
    45      useSidebarContext()
    46    return (
    47      <SidebarToggleRoot className={isSidebarOpen ? "is-open" : ""}>
    48        <Tooltip
    49          title={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
    50          placement={isSidebarOpen ? "right" : "bottom"}
    51        >
    52          <ToggleSidebarButton
    53            analyticsName="ui.web.sidebarToggle"
    54            aria-label={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
    55            onClick={() =>
    56              isSidebarOpen ? setSidebarClosed() : setSidebarOpen()
    57            }
    58          >
    59            {isSidebarOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
    60          </ToggleSidebarButton>
    61        </Tooltip>
    62      </SidebarToggleRoot>
    63    )
    64  }