FullScreen mode

by mnk

HTML

<div id="fullScreen" class="top-nav">Search</div>
<div class="container">
  <ul class="sidebar">
    <li>EB</li>
    <li>SS</li>
    <li>EP</li>
    <li>OF</li>
  </ul>
  <div id="content">
    <p>This is content</p>
    <div>
      <span id="openButton">open</span>
      <span id="closeButton" class="hidden">close</span>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  color: #f9f9f9;
}
html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.top-nav {
  background-color: #707070;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.container {
  display: flex;
  height: 100%;
}

p {
  padding: 10px;
  color: black;
}
span {
  padding: 10px;
  color: #009cde;
  cursor: pointer;
}
span:hover {
  color: black;
}

.sidebar {
  background-color: #303030;
  width: 60px;
  padding: 10px;
}
.hidden {
  display: none;
}

#content {
  background-color: #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  color: #707070;
  transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
}

.modal-openning {
  position: absolute;
  top: 37px;
  left: 80px;
  bottom: 0;
  right: 0;
}
.modal-opened {
  top: 0;
  left: 0;
}

JavaScript

const openButton = document.getElementById('openButton');
const closeButton = document.getElementById('closeButton');
const contentElement = document.getElementById('content');

openButton.addEventListener('click', function() {
	openButton.className = 'hidden';
  closeButton.className = '';
  contentElement.className += ' modal-openning';
  setTimeout(function() {
    contentElement.className += ' modal-opened';
  }, 100);
});

closeButton.addEventListener('click', function() {
	openButton.className = '';
  closeButton.className = 'hidden';
	contentElement.className = contentElement.className.replace(' modal-opened', '');
	setTimeout(function() {
	  contentElement.className = contentElement.className.replace(' modal-openning', '');
  }, 250);
});