Content Overflows Outside Page Boundaries Using transformX

I have a simple project. In that project, I have a drawer that works with translateX. My problem is that when I open that drawer, my main content goes outside the page.

this issue is showed in these two pictures

I want the content not to go outside the page when the drawer is opened, but I don’t know the best way to handle this.

The code is like below

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid lightcoral;
        }

        .hamburger {
            cursor: pointer;
        }

        .contents {
            display: flex;
            gap: 10px;
        }

        .drawerContainer {
            position: relative;
        }

        .drawer {
            position: absolute;
            background-color: lightcoral;
            transform: translateX(-100%);
            transition: all 0.2s ease-in-out;
            padding: 20px;
            width: 320px;
        }

        .drawer.open {
            transform: translateX(0);
        }

        .content {
            transition: all 0.2s ease-in-out;
        }

        .transformContent {
            transform: translateX(320px);
        }
    </style>
</head>
<body>
<header class="header">
    <div class="hamburger">
        Hamburger Menu
    </div>
    <div>
        Other content
    </div>
</header>
<div class="contents">
    <div class="drawerContainer">
        <div class="drawer">
            This is Drawer
        </div>
    </div>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
            ipsum
            maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
            Ab
            accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
            dolorum,
            ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
            placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
            voluptatum?
            Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
            odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
            est
            ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
            quibusdam
            quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
            inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
            architecto
            asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
            minus
            mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
            repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
            cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
            Accusantium
            amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
            maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
            voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
            quasi,
            quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
            recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
            voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
            iure
            laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
            reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
            id
            maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
            atque
            consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
            maxime
            odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
            magni
            minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
            cupiditate
            debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
            nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
            officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
            fugiat
            fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
            quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
            praesentium
            quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
            dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
            dolore
            ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
            quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
            blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
            nulla
            numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
            voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
            consequatur
            deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
            Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
            quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
            perferendis
            provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
            est
            eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
            provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
            eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
            ratione
            tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
            explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
            Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
            nam
            numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
            adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
            praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
            architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
            porro
            quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
            incidunt
            labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
            culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
            impedit
            laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
            reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
            error
            impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
            praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
            fugiat
            harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
            rem
            sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
            sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
            ullam!
            Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
            excepturi
            facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
            Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
            minus
            modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
            reprehenderit
            saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
            dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
            mollitia
            nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
            praesentium sit!
        </div>
    </div>
</div>
</body>

<script>
    const menuButton = document.querySelector('.hamburger');
    const drawer = document.querySelector('.drawer');
    const mainContent = document.querySelector('.content');

    menuButton.addEventListener('click', () => {
        drawer.classList.toggle('open');

        if (drawer.classList.contains('open')) {
            mainContent.classList.add('transformContent');
        } else {
            mainContent.classList.remove('transformContent');
        }
    });

</script>
</html>

You can avoid this by not using transform, and animate a margin property instead. You don’t have to shift the content by the width of the drawer element either.

const menuButton = document.querySelector('.hamburger');
const drawer = document.querySelector('.drawer');
const mainContent = document.querySelector('.content');

menuButton.addEventListener('click', () => {
  drawer.classList.toggle('open');

  if (drawer.classList.contains('open')) {
    mainContent.classList.add('transformContent');
  } else {
    mainContent.classList.remove('transformContent');
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 10px;
  
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid lightcoral;
}

.hamburger {
  cursor: pointer;
}

.contents {
  display: flex;
  gap: 10px;
}

.drawerContainer {
  position: relative;
}

.drawer {
  position: relative;
  background-color: lightcoral;
  transition: all 0.2s ease-in-out;
  padding: 20px;
  width: 320px;
  flex: 0 0 320px;
  margin-left: -320px;
}

.drawer.open {
  margin-left: 0;
}

.content {
  transition: all 0.2s ease-in-out;
}

.transformContent {
  
}

<header class="header">
  <div class="hamburger">
    Hamburger Menu
  </div>
  <div>
    Other content
  </div>
</header>
<div class="contents">
  <div class="drawerContainer">
    <div class="drawer">
      This is Drawer
    </div>
  </div>
  <div class="container">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum ipsum maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate? Ab accusantium architecto asperiores
      beatae, consequatur delectus deleniti dignissimos dolorem doloribus dolorum, ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis placeat praesentium provident quam recusandae repudiandae sapiente
      similique vel velit voluptates voluptatum? Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos
      doloribus est ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur quibusdam quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus inventore laborum
      natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi architecto asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime minus mollitia nam nemo nobis odit officia
      officiis pariatur porro praesentium quaerat quia quos rem reprehenderit repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis,
      porro quis repudiandae! Accusantium amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
      voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium quasi, quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam recusandae rerum sequi!
      Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque iure laboriosam magnam maiores maxime modi numquam perspiciatis
      quam qui, quia quidem quis quisquam quo rem reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga id maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium
      amet aspernatur atque consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam maxime odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero magni
      minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum cupiditate debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque nesciunt nulla officiis perspiciatis
      sapiente similique tenetur totam ullam vel. Debitis dolore explicabo officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet fugiat fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi
      nostrum odio perferendis quae quaerat quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis praesentium quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis
      distinctio dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio dolore ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium quasi quisquam
      reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum nulla numquam obcaecati perferendis placeat quis quos
      recusandae repellat soluta suscipit vero vitae voluptatem, voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae consequatur deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit
      optio reiciendis sed ut, vel! Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia perferendis
      provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque est eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus provident, quia reprehenderit
      rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia ratione tempora ullam velit voluptates. A aspernatur delectus deleniti
      dolore doloremque dolorum eos excepturi explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates. Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi
      molestiae nam numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi praesentium provident
      quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis porro quasi quidem quo rerum ullam. Accusantium animi aperiam
      commodi consequatur deserunt dolorem explicabo, incidunt labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex
      expedita explicabo illo impedit laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim, error
      impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio, praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis fugiat harum in ipsa ipsum libero magnam
      minima molestiae mollitia natus odit officiis quasi quia quod recusandae, rem sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi
      vero? Beatae et nesciunt odit sapiente ullam! Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex excepturi facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt
      odit omnis quasi. Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima minus modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam reprehenderit saepe
      sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae mollitia nam neque nostrum nulla perspiciatis
      quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus, praesentium sit!
    </div>
  </div>
</div>

The width of the content causes it to overflow. Subtraction width of hamburger menu from content width will eliminate overflow of body.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            padding: 0 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            border-bottom: 1px solid lightcoral;
        }

        .hamburger {
            cursor: pointer;
        }

        .contents {
            display: flex;
            gap: 10px;
        }

        .drawerContainer {
            position: relative;
        }

        .drawer {
            position: absolute;
            background-color: lightcoral;
            transform: translateX(-100%);
            transition: all 0.2s ease-in-out;
            padding: 20px;
            width: 320px;
        }

        .drawer.open {
            transform: translateX(0);
        }

        .content {
            transition: all 0.2s ease-in-out;
        }

        .transformContent {
            transform: translateX(320px);
            width: calc(100% - 320px);
        }
    </style>
</head>
<body>
<header class="header">
    <div class="hamburger">
        Hamburger Menu
    </div>
    <div>
        Other content
    </div>
</header>
<div class="contents">
    <div class="drawerContainer">
        <div class="drawer">
            This is Drawer
        </div>
    </div>
    <div class="container">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
            ipsum
            maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
            Ab
            accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
            dolorum,
            ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
            placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
            voluptatum?
            Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
            odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
            est
            ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
            quibusdam
            quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
            inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
            architecto
            asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
            minus
            mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
            repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
            cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
            Accusantium
            amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
            maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
            voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
            quasi,
            quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
            recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
            voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
            iure
            laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
            reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
            id
            maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
            atque
            consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
            maxime
            odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
            magni
            minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
            cupiditate
            debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
            nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
            officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
            fugiat
            fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
            quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
            praesentium
            quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
            dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
            dolore
            ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
            quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
            blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
            nulla
            numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
            voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
            consequatur
            deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
            Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
            quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
            perferendis
            provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
            est
            eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
            provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
            eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
            ratione
            tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
            explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
            Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
            nam
            numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
            adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
            praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
            architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
            porro
            quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
            incidunt
            labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
            culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
            impedit
            laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
            reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
            error
            impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
            praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
            fugiat
            harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
            rem
            sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
            sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
            ullam!
            Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
            excepturi
            facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
            Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
            minus
            modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
            reprehenderit
            saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
            dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
            mollitia
            nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
            praesentium sit!
        </div>
    </div>
</div>
</body>

<script>
    const menuButton = document.querySelector('.hamburger');
    const drawer = document.querySelector('.drawer');
    const mainContent = document.querySelector('.content');

    menuButton.addEventListener('click', () => {
        drawer.classList.toggle('open');

        if (drawer.classList.contains('open')) {
            mainContent.classList.add('transformContent');
        } else {
            mainContent.classList.remove('transformContent');
        }
    });

</script>
</html>

Filed under: Kiến thức lập trình - @ 23:50

Thẻ: javascripthtmljquerycssreactjs

Thiết kế website giá rẻ

Danh mục

Content Overflows Outside Page Boundaries Using transformX