import React, { useContext } from "react";
import styled from "styled-components";
import LedgerLiveIconLarge from "../../../../assets/logos/LedgerLiveRegular";
import LedgerIconSmall from "../../../../assets/logos/LedgerLiveAltRegular";
import SideBarContext from "../../../navigation/sideBar";
import TransitionInOut from "../../../transitions/TransitionInOut";
const Container = styled.div `
  display: flex;
  flex-direction: row;
  overflow: hidden;
`;
const Logo = () => {
    const { isExpanded } = useContext(SideBarContext);
    return (React.createElement(Container, null,
        React.createElement(TransitionInOut, { timeout: 300, in: isExpanded, unmountOnExit: true, mountOnEnter: true, style: { transitionDelay: "300ms", marginLeft: "1rem" } },
            React.createElement(LedgerLiveIconLarge, null)),
        React.createElement(TransitionInOut, { timeout: 300, in: !isExpanded, unmountOnExit: true, mountOnEnter: true, style: { margin: "auto", transitionDelay: "300ms" } },
            React.createElement(LedgerIconSmall, null))));
};
export default Logo;
//# sourceMappingURL=Logo.js.map