<head>    
    <!--FONT AWESOME-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body dir="rtl">
    <button class="active"><i class="fa-solid fa-bars"></i></button>
    <nav class="active">
        <div class="logo" >            
            <a href="#">
                TopTeam
                <i class="fa-solid fa-dice-d20"></i>
            </a>
        </div>
        <ul>
            
            <li><a href="#">الصفحة الرئيسية</a></li>
            <li><a href="#">قائمة الموظفين</a></li>
            <li><a href="#">الحسابات</a></li>
            <li><a href="#">الرواتب</a></li>
            <li><a href="#">الإجازات</a></li>
            <li><a href="#">المكالمات</a></li>
            <li><a href="#">خروج من البرنامج</a></li>
        </ul>
    </nav>


    <script src="script.js"></script>    
</body>

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;900&display=swap');

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

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

button{
    border: none;
    outline: none;
}

body{font-family: 'Cairo', sans-serif;}


nav{
    height: 100vh;
    background-color: dodgerblue;
    width: 200px;
    padding: 10px;

    transform: translateX(200px);
    transition: transform .5s ease-in-out;
}

nav.active{
    transform: translateX(0);
}

nav .logo{
    margin: 10px 0 20px;    
}

nav .logo a{
    font-size: 22px;
    color: white;
    padding: 10px;
    
    font-weight: 700; 
    
    display: flex;
    align-items: center;
    transition: .3s ease;
}

nav .logo a:hover{
    padding-right: 20px;
}

nav .logo a i {
    font-size: 27px;
    margin-right: 10px;
    transition: .5s ease-in-out;
}

nav .logo a:hover i {
    transform: rotate(180deg);
}

nav ul li {
    padding: 10px;
    font-weight: 500;
}

nav ul li a{
    color: #fff;
    transition: all .5s ease;
}
nav ul li a:hover{
    background-color: #fff;
    color: dodgerblue;
    display: block;
    padding-right: 10px;
}

button{
    cursor: pointer;
    border: 1px solid dodgerblue;    
    color:dodgerblue;
    background-color: #fff;
    padding: 3px 5px;
    border-radius: 3px;

    position: fixed;
    top: 10px;
    right: 10px;

    transform: translateX(0);
    transition: background-color .3s ease, transform .47s ease-in-out;
}

button:hover{
    background-color: dodgerblue;
    color:#fff;
}

button.active{
    transform: translateX(-200px);
}


const nav = document.querySelector('nav');
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
    nav.classList.toggle('active');
    btn.classList.toggle('active');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.