I would like to create a sidebar like in the picture, but I do not know how to make it. How do I make it?

I am sure there are several ways to make this. One approach which shouldnt be too difficult is for you to create two sidebars. Show the thin one (#2) by default and hide the wider one (#1). Then, using javascript or jQuery (whatever makes you life easiser), on a certain event like hover, or click, hide sidebar #2, and show sidebar #1. Using jQuery, you can use some nice effects like show, hide, slide, toggle, etc...

using jQuery UI may be helpful as well so you dont have to write as much code.

http://api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/index.php?title=UI/Effects/Slide&redirect=no

if you use this jQuery UI slide effect, you can show #2, then on hover hide #1, and show then slide #2.

Thanks for your answer. I have tried with this code:

$(document).ready(function(){
    $('.minimize-menu').click(function(){
          $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
          $('.minimize-menu > i').addClass('fa-chevron-circle-right');
          $('#navbar-side').css({"width":"55px"});
          $('.menu-text').css({"display":"none"});
          $('#navbar-side > ul > li > a > b').remove();
     });
});

I have managed to create a number of image 1 into image number 2, but I could not make than the picture number 2 becomes number 1 picture

maybe it would help to build a sample on jsfiddle.net so we can see what you are doing in action.

This is the full code.

index.php

<!DOCTYPE html>
<head>
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</head>
<body>
    <div id="navbar-top"></div>
    <div class="handle">Menu</div>
    <div id="wrapper">
        <div id="navbar-side">
            <ul>
                <li><a href="#"><i class="fa fa-home"></i><span class="menu-text">Dashboard</span></a></li>
                <li><a href="#"><i class="fa fa-bar-chart-o"></i><span class="menu-text">Charts</span></a></li>
                <li><a href="#"><i class="fa fa-table"></i><span class="menu-text">Tables</span></a></li>
                <li><a href="#"><i class="fa fa-edit"></i><span class="menu-text">Form</span></a></li>
                <li><a href="#"><i class="fa fa-font"></i><span class="menu-text">Typography</span></a></li>
                <li><a href="#"><i class="fa fa-desktop"></i><span class="menu-text">Element</span></a></li>
                <li><a href="#"><i class="fa fa-wrench"></i><span class="menu-text">Grid</span></a></li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 1</span><b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-caret-square-o-down"></i><span class="menu-text">Dropdown 2</span><b class="fa fa-angle-left"></b></a>
                        <ul>
                            <li><a href="#"><span class="menu-text">Sub Menu 1</span></a></li>
                            <li><a href="#"><span class="menu-text">Sub Menu 2</span></a></li>
                        </ul>
                </li>
                <li><a href="#" class="minimize-menu"><i class="fa fa-chevron-circle-left"></i><span class="menu-text">Minimize Menu</span></a></li>
            </ul>
        </div>
        <div id="main"></div>
    </div>
</body>
</html>

style.css

*{
    padding: 0;
    margin: 0;
}

body{
    min-width: 100%;
    min-height: 100%;
    padding-bottom: 0;
    color: #393939;
    font-family: sans-serif;
}

#navbar-top{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: #438eb9;
}
.handle{
    display: none;
}
#navbar-side{
    width: 189px;
    height: 100%;
    margin-top: 50px;
    position: fixed;
    background-color: #f2f2f2;
    border-right: 1px solid #ccc;
}

#navbar-side ul{
    overflow: hidden;
    padding: 0;
    margin: 0;
}

#navbar-side ul li{
    list-style: none;
    border-bottom: 1px solid #e5e5e5;
}

#navbar-side a{
    width: 100%;
    font-size: 14px;
    line-height: normal;
    padding: 10px 0 10px 20px;
    box-sizing: border-box;
    display: block;
    color: #555;
    text-decoration: none;
}

#navbar-side a:hover{
    padding-left: 17px;
    background-color: #fff;
    color: #08c;
    border-left: 3px solid #08c;
}

#navbar-side ul ul{
    display: none;
}

#navbar-side ul ul li a{
    padding-left: 30px;
    border-left: none;
}

#navbar-side ul ul li a:hover{
    padding-left: 30px;
    border-left: none;
}

#navbar-side .menu-text{
    margin-left: 20px;
}

#navbar-side b{
    float: right;
    margin-right: 17px;
}

main.js

$(document).ready(function(){

     $('#navbar-side > ul > li > a').click(function() {
          var checkElement = $(this).next();

          $('#navbar-side li a').removeClass('active');
          $(this).closest('a').addClass('active');  


          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('active');
               $(this).closest('a').addClass('nonactive');
               $('.nonactive b').addClass('fa-angle-left');
               $('.nonactive b').removeClass('fa-angle-down');

               checkElement.slideUp('normal');
          }

          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
               $(this).closest('a').removeClass('nonactive');
               $('.active b').removeClass('fa-angle-left');
               $('.active b').addClass('fa-angle-down');

               $('#navbar-side ul ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
          }

          if (checkElement.is('ul')) {
               return false;
          } else {
               return true; 
          }     
     });


     $('.minimize-menu').click(function(){
          $('.minimize-menu > i').removeClass('fa-chevron-circle-left');
          $('.minimize-menu > i').addClass('fa-chevron-circle-right');
          $('#navbar-side').css({"width":"55px"});
          $('.menu-text').css({"display":"none"});
          $('#navbar-side > ul > li > a > b').remove();

          $('.minimize-menu').addClass('maximize-menu');
     });
});

Nice job... if you created it. if not, you should provide some credit to whoever did.

in any case, with a couple of small changes, it works as expected. take a look at the demo on jsfiddle.net -- > http://jsfiddle.net/jt6ag651/