JSFiddle - React, Tailwind, and code Playground

by mohammad alhor

HTML

<link rel="stylesheet" href="https://a3p-mohammadalhor.googlecode.com/svn/trunk/font-ge_dinar.css">
<script src="https://a3p-mohammadalhor.googlecode.com/svn/arabic3professional/prefixfree.min.js"></script>
<body>
<div class="bodyContainer">
  <main>
    <section>
      <div>
        <h1>قائمة جانبية</h1>

          <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع،</p>  
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع،.</p>   
          <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى
مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع،</p>  
    <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل
هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق، إذا كنت تحتاج إلى عدد أكبر من
 الفقرات...

CSS

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

html {
  font-size: 62.5%;
  background: #fff;
}

body {
  min-height: 100%;
  margin: 0;
  background: #f1f4f9;
    color:#fff;
  font: 1.4rem ge_ss_threeregular;
    text-align: right;
}

.bodyContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

main,
nav {
  position: absolute;
  width: 100%;
}

main {
  right: 0;
}

nav {
  right: 100%;
}

.mainMove {
  right: -30%;
}

.navMove {
  right: 70%;
}

.navToggle {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 10;
  text-align: center;
}
.navToggle:hover {
  cursor: pointer;
}
.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
  background: #fff;
}
.navToggle:hover .menuOn {
  background: transparent;
}

.menu, .menu:before, .menu:after {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 5px;
  background: #fff;
  transition: 0.3s;
}
.menu:before, .menu:after {
  content: "";
  position: absolute;
  right: 0;
}
.menu:before {
  top: 10px;
}
.menu:after {
  bottom: 10px;
}

.menuOn {
  background: transparent;
}
.menuOn:before {
  top: 0;
  transform: rotate3d(0, 0, 1, 45deg);
}
.menuOn:after {
  bottom: 0;
  transform: rotate3d(0, 0, 1, -45deg);
}

main {
  padding: 50px;
  background: #30abd5;
  transition: all .2s ease-in-out;
}

nav {
  padding: 30px;
  transition: all .2s ease-in-out;
  color: #fff;
  background: #2f3b3f;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li a {
  display: block;
  padding: 20px;
  font-weight: 100;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
}
nav ul li a:hover {
  color: #ff274d;
}

JavaScript

$(window).load(bodyContentHeight);
$(window).resize(function() {
	$('.bodyContainer, main, nav').css('height', '100%');
	bodyContentHeight();
});

function bodyContentHeight() {
	var newHeight = $(document).outerHeight() + 'px';
	$('.bodyContainer, main, nav').css('height', newHeight);
	// var docHeight = $(document).outerHeight();
	// console.log('.bodyContainer calculated on load: ' + newHeight + 'px');
}

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('main').toggleClass('mainMove');
  $('nav').toggleClass('navMove');
})