zaru · July 27, 2021 15:05
diff --git a/index.html b/index.html
 <!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 type="text/css">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      min-height: 100vh;
    }

    #wrapper {
      position: absolute;
      height: 100%;
      width: 100%;
      display: flex;
    }

    #container {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      position: relative;
      display: flex;
      overflow: hidden;
    }

    #sidebar {
      background-color: powderblue;
      min-width: 0;
      position: relative;
    }

    #main-content {
      padding: 20px;
      flex-basis: 0;
      flex-grow: 1;
      min-width: 0;

      background-color: cornflowerblue;
      height: 100%;
      position: relative;
      overflow: scroll;
    }

    #resizer {
      cursor: col-resize;
      background-color: rgba(0, 0, 0, .25);
      width: 10px;
      height: 100%;
      position: fixed;
      top: 0;
      z-index: 2;
    }
  </style>
 </head>
 <body>

 <div id="wrapper">
  <div id="resizer"></div>

  <div id="container">
    <aside id="sidebar">
      <nav>nav</nav>
    </aside>
    <main id="main-content">
      <button type="button" id="hide">toggle</button>
      <p>main</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
      <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
      <p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
      <p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
      <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
      <p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
      <p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
      <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
      <p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</p>
      <p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
      <p>Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis.</p>
      <p>Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.</p>
      <p>Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.</p>
      <p>Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam.</p>
      <p>Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.</p>
      <p>In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.</p>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est.</p>
    </main>
  </div>
 </div>
 <script>
  const resizer = document.querySelector('#resizer');
  const sidebar = document.querySelector('#sidebar');
  const hideButton = document.querySelector('#hide');

  const defaultSidebarWidth = '325';
  sidebar.style.flexBasis = `${defaultSidebarWidth}px`;
  resizer.style.left = `${defaultSidebarWidth - 5}px`;

  resizer.addEventListener('mousedown', () => {
    document.addEventListener('mousemove', resize);
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', resize);
    });
  });

  hideButton.addEventListener('click', () => {
    if (sidebar.style.flexBasis === '0px') {
      sidebar.style.flexBasis = `${defaultSidebarWidth}px`;
      resizer.style.left = `${defaultSidebarWidth - 5}px`;
      resizer.style.display = 'block';
    } else {
      sidebar.style.flexBasis = '0px';
      resizer.style.display = 'none';
    }
  });

  function resize(event) {
    const width = `${event.x}px`;
    const left = `${event.x - 5}px`;
    sidebar.style.flexBasis = width;
    resizer.style.left = left;
  }

 </script>
 </body>
 </html>
	<!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 type="text/css">
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	html, body {
	min-height: 100vh;
	}

	#wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
	}

	#container {
	width: 100%;
	height: 100%;
	flex-shrink: 0;
	position: relative;
	display: flex;
	overflow: hidden;
	}

	#sidebar {
	background-color: powderblue;
	min-width: 0;
	position: relative;
	}

	#main-content {
	padding: 20px;
	flex-basis: 0;
	flex-grow: 1;
	min-width: 0;

	background-color: cornflowerblue;
	height: 100%;
	position: relative;
	overflow: scroll;
	}

	#resizer {
	cursor: col-resize;
	background-color: rgba(0, 0, 0, .25);
	width: 10px;
	height: 100%;
	position: fixed;
	top: 0;
	z-index: 2;
	}
	</style>
	</head>
	<body>

	<div id="wrapper">
	<div id="resizer"></div>

	<div id="container">
	<aside id="sidebar">
	<nav>nav</nav>
	</aside>
	<main id="main-content">
	<button type="button" id="hide">toggle</button>
	<p>main</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
	<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
	<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
	<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
	<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>
	<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
	<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
	<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
	<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien.</p>
	<p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci.</p>
	<p>Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis.</p>
	<p>Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.</p>
	<p>Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis.</p>
	<p>Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.</p>
	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam.</p>
	<p>Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.</p>
	<p>In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede.</p>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est.</p>
	</main>
	</div>
	</div>
	<script>
	const resizer = document.querySelector('#resizer');
	const sidebar = document.querySelector('#sidebar');
	const hideButton = document.querySelector('#hide');

	const defaultSidebarWidth = '325';
	sidebar.style.flexBasis = `${defaultSidebarWidth}px`;
	resizer.style.left = `${defaultSidebarWidth - 5}px`;

	resizer.addEventListener('mousedown', () => {
	document.addEventListener('mousemove', resize);
	document.addEventListener('mouseup', () => {
	document.removeEventListener('mousemove', resize);
	});
	});

	hideButton.addEventListener('click', () => {
	if (sidebar.style.flexBasis === '0px') {
	sidebar.style.flexBasis = `${defaultSidebarWidth}px`;
	resizer.style.left = `${defaultSidebarWidth - 5}px`;
	resizer.style.display = 'block';
	} else {
	sidebar.style.flexBasis = '0px';
	resizer.style.display = 'none';
	}
	});

	function resize(event) {
	const width = `${event.x}px`;
	const left = `${event.x - 5}px`;
	sidebar.style.flexBasis = width;
	resizer.style.left = left;
	}

	</script>
	</body>
	</html>