import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Navbar } from '../navbar/Navbar.component';
import { Sidebar } from '../sidebar/Sidebar.component';
import { getThemePropSelector } from '../../utils';
const LayoutContainer = styled.div `
  display: flex;
  flex-direction: column;
  height: 100%;
`;
const ContentContainer = styled.div `
  display: flex;
  flex-direction: row;
  flex-grow: 1;
`;
const MainContent = styled.div `
  flex-grow: 1;
  background-color: ${getThemePropSelector('backgroundLevel1')};
`;
function Layout({ children, sidebar, navbar, navbarElement, ...rest }) {
    return (_jsxs(LayoutContainer, { className: "sc-layout", ...rest, children: [navbar && _jsx(Navbar, { ...navbar }), !navbar &&
                navbarElement !== undefined &&
                navbarElement !== null &&
                navbarElement, _jsxs(ContentContainer, { children: [sidebar && _jsx(Sidebar, { ...sidebar }), _jsx(MainContent, { className: "main", children: children })] })] }));
}
export { Layout };
