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 }