JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="page">
    <div class="menu">
        <span>open</span>
        <ul>
            <li data-target="content">Home</li>
            <li data-target="about">About</li>
            <li data-target="services">Services</li>
            <li data-target="contact">Contact</li>
            <li data-target="test">test</li>
        </ul>
    </div>
    <div class="content">Home</div>
    <div class="other-pages">
        <div class="pag about">About</div>
        <div class="pag services">Services</div>
        <div class="pag contact">Contact</div>
        <div class="pag test">test</div>
    </div>
</div>

SCSS

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
    transition: all 0.3s ease-in-out;
}

.page {
  width: 60vw;
  height: 40vh;
  background: #ffcb11;
  position: relative;
  border: 30px solid #eee;
  overflow: hidden;
}

.menu {
    position: absolute;
    width: 10%;
    height: 100%;
    top:0%;
    left:0;
    background: #fff;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    z-index: 1000;
    ul {
        position: relative;
        transform: translateX(-150%);
        transition: all 0.3s ease-in-out;
    }
}

.content {
    position: absolute;
    width: 90%;
    height: 100%;
    top:0%;
    left:10%;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.other-pages {
    position: absolute;
    width: 90%;
    height: 100%;
    top:0%;
    left:100%;
    transition: all 0.3s ease-in-out;
    
    .pag {
        position: absolute;
        width: 100%;
        height: 100%;
        top:0%;
        left:0%;
        opacity: 1;
        
        &.open {
            opacity:1;
            color: #fff;
            z-index: 100;
        }
        
        &.about {background: red}
        &.services {background: orange}
        &.contact {background: purple}
          &.test {background: black}
    }
}

.page.open {
    .menu {
        width: 30%;
        ul {
            transform: translateX(0%);
            transition-delay: 0.3s;
        }
    }
    
    .content {
        width: 70%;
        left: 30%;
    }
}

.page.not-home {
    .content {
        left: 100%;
    }
    .pag.open {
     left: -100%;   
    }
    &.open {
        .pag.open {
            left: -70%;
        }
    }
}

JavaScript

$('.menu span').on('click', function() {
    $('.page').addClass('open');
});


$('.menu li').on('click', function() {
    var toOpen = $(this).attr('data-target');
    if (toOpen != "content") {
        $('.page').removeClass('open').addClass('not-home');
        $('.pag.open').removeClass('open');
        $('.' + toOpen).addClass('open');
        //$('.to-load').load(pageToOpen + '.html');
    } else {
        $('.page').removeClass('open not-home');
    }
});