Left panel with twitter bootstrap

gistfile1.txt

/* css */

.modal.fade.in {
  display:block;
  top: 0;
  right: 0;
  position: fixed;
  bottom: 0;
  left: auto;
  max-height: none;
  overflow: visible;
  width: auto;
  margin: 0;
  height: 99.8%;
}

.modal.fade.in {
  -webkit-transition: right 0.3s ease-in;
  -moz-transition: right 0.3s ease-in;
  -o-transition: right 0.3s ease-in;
  -ms-transition: right 0.3s ease-in;
  transition: right 0.3s ease-in;
}

/* twig file bootstrap-modal.html.twig */
<div id="{{ dialogId }}" class="modal hide fade" >
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">x</button>
            <h3>{% block dialog_title %}{% endblock %}</h3>
        </div>
        <div class="modal-body">
           {% block dialog_body %}{% endblock %}
        </div>
        <div class="modal-footer center">
            {% block dialog_footer %}
                <a href="#" class="btn btn-primary dialog-cancel" data-dismiss="modal">{{ 'button.no'|trans({}, 'MytechdeskBundle') }}</a>
                <a href="#" class="btn btn-danger dialog-confirm" data-dismiss="modal">{{ 'button.yes'|trans({}, 'MytechdeskBundle') }}</a>
            {% endblock %}
         </div>
</div>

{# embed #}

{% embed "MyBundle::bootstrap-modal.html.twig" with { dialogId: 'dialog-window-todo' } %}
    {% block dialog_title %}
        Todo
    {% endblock %}
    {% block dialog_body %}
    {% endblock %}
    {% block dialog_footer %}
    {% endblock %}
{% endembed %}