import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{memo,useEffect,useRef,useState}from"react";import styled from"styled-components";import{useMount,breakpoints}from"@redocly/theme";import{useAtom}from"jotai";import{useLocation}from"react-router-dom";import{isSidebarOpenedAtom}from"../../jotai/app";import{SidebarActions}from"./SidebarActions";const StyledStickySidebar=styled.div`
  overflow: hidden;
  flex-direction: column;
  backface-visibility: hidden;
  height: ${({offsetTop:e})=>`calc(100vh - ${e})`};
  top: 0;
  flex: 0 0 auto;
  position: fixed;
  display: ${({open:e})=>e?"flex":"none"};
  z-index: 2;
  width: 100%;
  background: var(--sidebar-bg-color);
  border-right: ${({collapsedSidebar:e})=>e?"1px solid var(--sidebar-border-color)":"auto"};

  @media screen and (min-width: ${breakpoints.small}) {
    position: sticky;
    z-index: auto;
    width: ${({collapsedSidebar:e})=>e?"var(--sidebar-width)":"auto"};
    display: flex;
  }
  @media print {
    display: none;
  }
`;function StickyResponsiveSidebarComponent({scrollYOffset:e,className:o,children:t,collapsedSidebar:i}){const[s,r]=useState("0px"),a=useRef(null),d=useLocation(),[n,c]=useAtom(isSidebarOpenedAtom);return useEffect((()=>{d.hash&&c(!1)}),[d.pathname,d.hash,c]),useMount((()=>{const o=e();r(`${o}px`)})),_jsx(_Fragment,{children:_jsxs(StyledStickySidebar,{open:n,className:o,offsetTop:s,style:{top:s},ref:a,collapsedSidebar:i,children:[i||n?t:null,_jsx(SidebarActions,{})]})})}export const StickyResponsiveSidebar=memo(StickyResponsiveSidebarComponent);
//# sourceMappingURL=StickyResponsiveSidebar.js.map