github.com/tilt-dev/tilt@v0.36.0/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  
    19  let SidebarToggleRoot = styled.div`
    20    display: flex;
    21    justify-content: flex-end;
    22  
    23    &.is-open {
    24      margin-right: -16px;
    25    }
    26  `
    27  
    28  const ToggleSidebarButton = styled(InstrumentedButton)`
    29    ${mixinResetButtonStyle}
    30    display: flex;
    31    align-items: center;
    32  
    33    svg {
    34      fill: ${Color.gray50};
    35    }
    36  
    37    &:hover svg {
    38      fill: ${Color.gray70};
    39    }
    40  `
    41  
    42  export function OverviewSidebarToggle() {
    43    const { isSidebarOpen, setSidebarClosed, setSidebarOpen } =
    44      useSidebarContext()
    45    return (
    46      <SidebarToggleRoot className={isSidebarOpen ? "is-open" : ""}>
    47        <Tooltip
    48          title={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
    49          placement={isSidebarOpen ? "right" : "bottom"}
    50        >
    51          <ToggleSidebarButton
    52            aria-label={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
    53            onClick={() =>
    54              isSidebarOpen ? setSidebarClosed() : setSidebarOpen()
    55            }
    56          >
    57            {isSidebarOpen ? <ChevronLeftIcon /> : <ChevronRightIcon />}
    58          </ToggleSidebarButton>
    59        </Tooltip>
    60      </SidebarToggleRoot>
    61    )
    62  }