vendimia-frontend/app/src/components/layout/index.tsx

import React, { useState } from "react";
import Sidebar from "./sidebar";
import Header from "./header";
import "bootstrap-icons/font/bootstrap-icons.css";

const Layout = ({ children }: any) => {
  const [isOpen, setIsOpen] = useState<Boolean>(false);
  const toggle = () => {
    setIsOpen((s) => !s);
  };

  const sbClass = `${isOpen ? "" : "d-none d-sm-block"}`;

  return (
    <>
      <Header toggle={toggle} />
      <div className="container-fluid mx-auto px-0 row flex-nowrap">
        <section
          className={`sidebar bg-light col-auto min-vh-100 col-md-3 col-xl-2 ${sbClass}`}
        >
          <Sidebar />
        </section>
        <main className="col content">{children}</main>
      </div>
    </>
  );
};

export default Layout;