Replaced SB-Admin with AdminLTE

Admin/Admin.php

@@ -2078,6 +2078,11 @@ abstract class Admin implements AdminInterface, DomainObjectInterface
 
         if (!$menu) {
             $menu = $this->menuFactory->createItem('root');
+
+            $menu = $menu->addChild(
+                $this->trans($this->getLabelTranslatorStrategy()->getLabel('dashboard', 'breadcrumb', 'link'), array(), 'SonataAdminBundle'),
+                array('uri' => $this->routeGenerator->generate('sonata_admin_dashboard'))
+            );
         }
 
         $menu = $menu->addChild(

Admin/Pool.php

@@ -25,6 +25,8 @@ class Pool
 
     protected $templates    = array();
 
+    protected $assets       = array();
+
     protected $title;
 
     protected $titleLogo;
@@ -36,13 +38,15 @@ class Pool
      * @param string                                                    $title
      * @param string                                                    $logoTitle
      * @param array                                                     $options
+     * @param array                                                     $assets
      */
-    public function __construct(ContainerInterface $container, $title, $logoTitle, $options = array())
+    public function __construct(ContainerInterface $container, $title, $logoTitle, $options = array(), $assets = array())
     {
         $this->container = $container;
         $this->title     = $title;
         $this->titleLogo = $logoTitle;
         $this->options   = $options;
+        $this->assets    = $assets;
     }
 
     /**
@@ -289,6 +293,40 @@ class Pool
         return null;
     }
 
+    /**
+     * @param array $assets
+     *
+     * @return void
+     */
+    public function setAssets(array $assets)
+    {
+        $this->assets = $assets;
+    }
+
+    /**
+     * @return array
+     */
+    public function getAssets()
+    {
+        return $this->assets;
+    }
+
+    /**
+     * @return array
+     */
+    public function getCss()
+    {
+        return $this->assets['css'];
+    }
+
+    /**
+     * @return array
+     */
+    public function getJavascripts()
+    {
+        return $this->assets['javascripts'];
+    }
+
     /**
      * @return string
      */

DependencyInjection/Compiler/AddDependencyCallsCompilerPass.php

@@ -109,6 +109,10 @@ class AddDependencyCallsCompilerPass implements CompilerPassInterface
                     $groups[$resolvedGroupName]['label_catalogue'] = 'SonataAdminBundle';
                 }
 
+                if (empty($group['icon'])) {
+                    $groups[$resolvedGroupName]['icon'] = $groupDefaults[$resolvedGroupName]['icon'];
+                }
+
                 if (!empty($group['item_adds'])) {
                     $groups[$resolvedGroupName]['items'] = array_merge($groups[$resolvedGroupName]['items'], $group['item_adds']);
                 }

DependencyInjection/Configuration.php

@@ -94,6 +94,7 @@ class Configuration implements ConfigurationInterface
                                 ->children()
                                     ->scalarNode('label')->end()
                                     ->scalarNode('label_catalogue')->end()
+                                    ->scalarNode('icon')->defaultValue('<i class="fa fa-folder"></i>')->end()
                                     ->arrayNode('items')
                                         ->prototype('scalar')->end()
                                     ->end()
@@ -173,6 +174,51 @@ class Configuration implements ConfigurationInterface
                     ->end()
                 ->end()
 
+                ->arrayNode('assets')
+                    ->addDefaultsIfNotSet()
+                    ->children()
+                        ->arrayNode('css')
+                            ->defaultValue(array(
+                                'bundles/sonataadmin/admin-lte/css/bootstrap.min.css',
+                                'bundles/sonataadmin/admin-lte/css/font-awesome.min.css',
+                                'bundles/sonataadmin/admin-lte/css/ionicons.min.css',
+                                'bundles/sonataadmin/admin-lte/css/AdminLTE.css',
+
+                                'bundles/sonatajquery/themes/flick/jquery-ui-1.10.4.custom.css',
+
+                                'bundles/sonataadmin/select2/select2.css',
+                                'bundles/sonataadmin/select2/select2-bootstrap.css',
+
+                                'bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/css/bootstrap-editable.css',
+
+                                'bundles/sonataadmin/css/styles.css',
+                                'bundles/sonataadmin/css/layout.css'
+                            ))
+                            ->prototype('scalar')->end()
+                        ->end()
+                        ->arrayNode('javascripts')
+                            ->defaultValue(array(
+                                'bundles/sonatajquery/jquery-1.10.2.js',
+                                'bundles/sonatajquery/jquery-ui-1.10.4.js',
+                                'bundles/sonatajquery/jquery-ui-i18n.js',
+
+                                'bundles/sonataadmin/jquery/jquery.form.js',
+                                'bundles/sonataadmin/jquery/jquery.confirmExit.js',
+
+                                'bundles/sonataadmin/admin-lte/js/bootstrap.min.js',
+
+                                'bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/js/bootstrap-editable.min.js',
+
+                                'bundles/sonataadmin/select2/select2.min.js',
+
+                                'bundles/sonataadmin/App.js',
+                                'bundles/sonataadmin/Admin.js',
+                            ))
+                            ->prototype('scalar')->end()
+                        ->end()
+                    ->end()
+                ->end()
+
                 ->arrayNode('extensions')
                 ->useAttributeAsKey('id')
                 ->defaultValue(array('admins' => array(), 'excludes' => array(), 'implements' => array(), 'extends' => array(), 'instanceof' => array()))

DependencyInjection/SonataAdminExtension.php

@@ -31,6 +31,8 @@ class SonataAdminExtension extends Extension
      *
      * @param array            $configs   An array of configuration settings
      * @param ContainerBuilder $container A ContainerBuilder instance
+     *
+     * @throws \RuntimeException
      */
     public function load(array $configs, ContainerBuilder $container)
     {
@@ -79,6 +81,7 @@ BOOM
         $pool->replaceArgument(1, $config['title']);
         $pool->replaceArgument(2, $config['title_logo']);
         $pool->replaceArgument(3, $config['options']);
+        $pool->replaceArgument(4, $config['assets']);
 
         $container->setParameter('sonata.admin.configuration.templates', $config['templates']);
         $container->setParameter('sonata.admin.configuration.admin_services', $config['admin_services']);

Resources/config/core.xml

@@ -10,6 +10,7 @@
             <argument />
             <argument />
             <argument type="collection" />
+            <argument type="collection" />
 
             <call method="setTemplates">
                 <argument>%sonata.admin.configuration.templates%</argument>

Resources/doc/reference/configuration.rst

@@ -119,6 +119,35 @@ Full Configuration Options
                 base_list_field:      SonataAdminBundle:CRUD:base_list_field.html.twig
                 pager_links:          SonataAdminBundle:Pager:links.html.twig
                 pager_results:        SonataAdminBundle:Pager:results.html.twig
+
+            assets:
+                css:
+
+                    # Defaults:
+                    - bundles/sonataadmin/admin-lte/css/bootstrap.min.css
+                    - bundles/sonataadmin/admin-lte/css/font-awesome.min.css
+                    - bundles/sonataadmin/admin-lte/css/ionicons.min.css
+                    - bundles/sonataadmin/admin-lte/css/AdminLTE.css
+                    - bundles/sonatajquery/themes/flick/jquery-ui-1.10.4.custom.css
+                    - bundles/sonataadmin/select2/select2.css
+                    - bundles/sonataadmin/select2/select2-bootstrap.css
+                    - bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/css/bootstrap-editable.css
+                    - bundles/sonataadmin/css/styles.css
+                    - bundles/sonataadmin/css/layout.css
+                javascripts:
+
+                    # Defaults:
+                    - bundles/sonatajquery/jquery-1.10.2.js
+                    - bundles/sonatajquery/jquery-ui-1.10.4.js
+                    - bundles/sonatajquery/jquery-ui-i18n.js
+                    - bundles/sonataadmin/jquery/jquery.form.js
+                    - bundles/sonataadmin/jquery/jquery.confirmExit.js
+                    - bundles/sonataadmin/admin-lte/js/bootstrap.min.js
+                    - bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/js/bootstrap-editable.min.js
+                    - bundles/sonataadmin/select2/select2.min.js
+                    - bundles/sonataadmin/App.js
+                    - bundles/sonataadmin/Admin.js
+
             extensions:
 
                 # Prototype

Resources/public/Admin.js

@@ -1,3 +1,14 @@
+/*
+
+ This file is part of the Sonata package.
+
+ (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
+
+ For the full copyright and license information, please view the LICENSE
+ file that was distributed with this source code.
+
+ */
+
 jQuery(document).ready(function() {
     jQuery('html').removeClass('no-js');
     if (window.SONATA_CONFIG && window.SONATA_CONFIG.CONFIRM_EXIT) {

Resources/public/css/layout.css

@@ -1,12 +1,12 @@
-body{
-    padding-top: 50px;
-}
-
-@media (max-width: 978px) {
-    body{
-        padding-top: 0;
-    }
-}
+/*body{*/
+    /*padding-top: 50px;*/
+/*}*/
+
+/*@media (max-width: 978px) {*/
+    /*body{*/
+        /*padding-top: 0;*/
+    /*}*/
+/*}*/
 
 div.border {
     border: 1px solid #DDDDDD;

Resources/public/css/styles.css

@@ -1,46 +1,39 @@
 /**
  * SonataAdminBundle Theme based on SB Admin v2.0
  * http://startbootstrap.com/templates/sb-admin-v2/
- */
+*/
 
-body {
-    background-color: #f8f8f8;
-    padding-top: 50px;
+html {
+    position: relative;
+    min-height: 100%;
 }
 
+body {
+    margin-bottom: 20px;
+}
 
-/* wrappers */
-
-#wrapper {
+footer {
+    position: absolute;
+    bottom: 0;
     width: 100%;
+    height: 20px;
+    background-color: #333;
 }
 
-.sonata-bc #page-wrapper {
-    padding-top: 10px;
+footer p {
+    margin: 0;
 }
 
-/*#page-wrapper {*/
-    /*padding: 15px 15px 0;*/
-    /*min-height: 568px;*/
-    /*background-color: #fff;*/
-/*}*/
+footer a {
+    color: #f6f6f6;
+}
 
-/*@media(min-width:768px) {*/
-    /*#page-wrapper {*/
-        /*position: inherit;*/
-        /*margin: 0 0 0 250px;*/
-        /*padding: 30px 30px 0;*/
-        /*min-height: 1300px;*/
-        /*border-left: 1px solid #e7e7e7;*/
-    /*}*/
-/*}*/
+/* navigation */
 
 .navbar-static-side ul li {
     border-bottom: 1px solid #e7e7e7;
 }
 
-/* navigation */
-
 .navbar-brand {
     padding-right: 20px;
 }
@@ -56,6 +49,14 @@ body {
     padding: 0 10px;
 }
 
+.content-header .navbar {
+    margin-bottom: 0;
+}
+
+.content-header .navbar-nav.navbar-right:last-child {
+    margin-right: 0;
+}
+
 /* breadcrumb */
 
 .sonata-bc .breadcrumb {
@@ -67,13 +68,6 @@ body {
 
 .sonata-bc .breadcrumb li a {
     display: inline-block;
-    padding-left: 3px;
-    padding-right: 3px;
-}
-
-.sonata-bc .breadcrumb>li+li:before {
-    padding-right: 0;
-    padding-left: 4px;
 }
 
 /* MEGA MENU STYLE
@@ -102,19 +96,25 @@ body {
     display: inline-block;
 }
 
-.navbar-top-links li:last-child {
-    margin-right: 15px;
-}
-
 .navbar-top-links li a,
 .navbar-top-links li span {
     padding: 15px;
     min-height: 50px;
 }
+
 .navbar-top-links li a:hover {
     text-decoration: none;
 }
 
+.skin-black .navbar .breadcrumb > li  > a:hover {
+    color: #444;
+    background: #f5f5f5;
+}
+
+.skin-black .navbar .dropdown-menu > li > a:hover {
+    background-color: #f5f5f5;
+}
+
 .navbar-top-links .dropdown-menu li {
     display: block;
 }
@@ -156,6 +156,12 @@ body {
     left: auto;
 }
 
+/* Content navbar */
+
+body.fixed .content-header .navbar {
+    position: relative;
+}
+
 /* sidebar menu styles */
 
 .sidebar-search {
@@ -247,7 +253,6 @@ form.sonata-filter-form.form-stacked {
     padding-left: 0;
 }
 
-
 /* Overrides */
 
 /* x-editable */

Resources/translations/SonataAdminBundle.en.xliff

@@ -176,7 +176,7 @@
             </trans-unit>
             <trans-unit id="link_breadcrumb_dashboard">
                 <source>breadcrumb.link_dashboard</source>
-                <target>&#8962;</target>
+                <target><![CDATA[<i class="fa fa-home"></i>]]></target>
             </trans-unit>
             <trans-unit id="title_delete">
                 <source>title_delete</source>

Resources/views/Block/block_rss_dashboard.html.twig

@@ -12,9 +12,9 @@ file that was distributed with this source code.
 {% extends "SonataBlockBundle:Block:block_core_rss.html.twig" %}
 
 {% block block %}
-    <div class="panel panel-default">
-        <div class="panel-heading">
-            <h3 class="panel-title sonata-feed-title"><i class="fa fa-rss"></i> {{ settings.title }}</h3>
+    <div class="box box-varning">
+        <div class="box-header">
+            <h3 class="box-title sonata-feed-title"><i class="fa fa-rss"></i> {{ settings.title }}</h3>
         </div>
 
         <div class="sonata-feeds-container list-group">

Resources/views/CRUD/base_edit_form.html.twig

@@ -20,31 +20,33 @@
             {% endif %}
 
             {% block sonata_pre_fieldsets %}
-                <div class="panel-group" id="accordion">
+                <div class="row">
             {% endblock %}
 
             {% block sonata_tab_content %}
                 {% for name, form_group in admin.formgroups %}
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            <h4 class="panel-title">
-                                {{ admin.trans(name, {}, form_group.translation_domain) }}
-                            </h4>
-                        </div>
-                        <div class="panel{% if loop.first %} in{% endif %}" id="{{ admin.uniqid }}_{{ loop.index }}">
-                            <div class="panel-body">
-                                <div class="sonata-ba-collapsed-fields">
-                                    {% if form_group.description != false %}
-                                        <p>{{ form_group.description|raw }}</p>
-                                    {% endif %}
-
-                                    {% for field_name in form_group.fields %}
-                                        {% if admin.formfielddescriptions[field_name] is defined %}
-                                            {{ form_row(form[field_name])}}
+                    <div class="col-md-{% if admin.formgroups|length > 1 %}6{% else %}12{% endif %}">
+                        <div class="box box-success">
+                            <div class="box-header">
+                                <h4 class="box-title">
+                                    {{ admin.trans(name, {}, form_group.translation_domain) }}
+                                </h4>
+                            </div>
+                            {#<div class="box{% if loop.first %} in{% endif %}" id="{{ admin.uniqid }}_{{ loop.index }}">#}
+                                <div class="box-body">
+                                    <div class="sonata-ba-collapsed-fields">
+                                        {% if form_group.description != false %}
+                                            <p>{{ form_group.description|raw }}</p>
                                         {% endif %}
-                                    {% endfor %}
+
+                                        {% for field_name in form_group.fields %}
+                                            {% if admin.formfielddescriptions[field_name] is defined %}
+                                                {{ form_row(form[field_name])}}
+                                            {% endif %}
+                                        {% endfor %}
+                                    </div>
                                 </div>
-                            </div>
+                            {#</div>#}
                         </div>
                     </div>
                 {% endfor %}

Resources/views/CRUD/base_list.html.twig

@@ -161,12 +161,12 @@ file that was distributed with this source code.
 {% block list_filters %}
     {% if admin.datagrid.filters %}
         {% form_theme form "SonataAdminBundle:Form:filter_admin_fields.html.twig" %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <h4 class="panel-title filter_legend {{ admin.datagrid.hasActiveFilters ? 'active' : 'inactive' }}">{{ 'label_filters'|trans({}, 'SonataAdminBundle') }}</h4>
+        <div class="box box-primary">
+            <div class="box-header">
+                <h4 class="box-title filter_legend {{ admin.datagrid.hasActiveFilters ? 'active' : 'inactive' }}">{{ 'label_filters'|trans({}, 'SonataAdminBundle') }}</h4>
             </div>
 
-            <div class="panel-body">
+            <div class="box-body">
                 <form class="sonata-filter-form {{ admin.isChild and 1 == admin.datagrid.filters|length ? 'hide' : '' }}" action="{{ admin.generateUrl('list') }}" method="GET" role="form">
                     {{ form_errors(form) }}
                         <div class="filter_container {{ admin.datagrid.hasActiveFilters ? 'active' : 'inactive' }}">

Resources/views/standard_layout.html.twig

@@ -21,30 +21,17 @@ file that was distributed with this source code.
 <!DOCTYPE html>
 <html {% block html_attributes %}class="no-js"{% endblock %}>
     <head>
-        <meta charset="UTF-8">
-
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        {% block meta_tags %}
+            <meta charset="UTF-8">
+            <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
+        {% endblock %}
 
         {% block stylesheets %}
-            <!-- jQuery code -->
-            <link rel="stylesheet" href="{{ asset('bundles/sonatajquery/themes/flick/jquery-ui-1.10.4.custom.css') }}" media="all">
-
-            <link rel="stylesheet" href="{{ asset('bundles/sonataadmin/sb-admin-v2/css/bootstrap.min.css') }}" media="all">
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/sb-admin-v2/font-awesome/css/font-awesome.min.css") }}" />
-
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/sb-admin-v2/css/plugins/morris/morris-0.4.3.min.css") }}" />
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/sb-admin-v2/css/plugins/timeline/timeline.css") }}" />
-
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/sb-admin-v2/css/sb-admin.css") }}" />
 
-            {% if admin_pool is defined and admin_pool.getOption('use_select2') %}
-                <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/select2/select2.css") }}" />
-                <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/select2/select2-bootstrap.css") }}" />
-            {% endif %}
+            {% for css in admin_pool.css %}
+                <link rel="stylesheet" href="{{ asset(css) }}" />
+            {% endfor %}
 
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/css/bootstrap-editable.css") }}" />
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/css/styles.css") }}" />
-            <link rel="stylesheet" href="{{ asset("bundles/sonataadmin/css/layout.css") }}" />
         {% endblock %}
 
         {% block javascripts %}
@@ -58,26 +45,10 @@ file that was distributed with this source code.
                };
             </script>
 
-            <script src="{{ asset('bundles/sonatajquery/jquery-1.10.2.js') }}"></script>
-
-            <script src="{{ asset('bundles/sonataadmin/sb-admin-v2/js/bootstrap.min.js') }}"></script>
-            <script src="{{ asset('bundles/sonataadmin/sb-admin-v2/js/plugins/metisMenu/jquery.metisMenu.js') }}"></script>
-            <script src="{{ asset('bundles/sonataadmin/sb-admin-v2/js/plugins/morris/raphael-2.1.0.min.js') }}"></script>
-            <script src="{{ asset('bundles/sonataadmin/sb-admin-v2/js/plugins/morris/morris.js') }}"></script>
-            <script src="{{ asset('bundles/sonataadmin/sb-admin-v2/js/sb-admin.js') }}"></script>
-
-            <script src="{{ asset('bundles/sonataadmin/bootstrap3-editable/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>
-
-            <script src="{{ asset('bundles/sonatajquery/jquery-ui-1.10.4.js') }}"></script>
-            <script src="{{ asset('bundles/sonatajquery/jquery-ui-i18n.js') }}"></script>
-
-            {% if admin_pool is defined and admin_pool.getOption('use_select2') %}
-                <script src="{{ asset("bundles/sonataadmin/select2/select2.min.js") }}"></script>
-            {% endif %}
+            {% for js in admin_pool.javascripts %}
+                <script src="{{ asset(js) }}"></script>
+            {% endfor %}
 
-            <script src="{{ asset("bundles/sonataadmin/jquery/jquery.form.js") }}"></script>
-            {% if admin_pool is defined and admin_pool.getOption('confirm_exit') %}<script src="{{ asset('bundles/sonataadmin/jquery/jquery.confirmExit.js') }}"></script>{% endif %}
-            <script src="{{ asset('bundles/sonataadmin/Admin.js') }}"></script>
         {% endblock %}
 
         <title>
@@ -89,236 +60,238 @@ file that was distributed with this source code.
                 {% if action is defined %}
                     -
                     {% for menu in admin.breadcrumbs(action) %}
-                        {% if not loop.first  %}
-                            &gt;
+                        {% if not loop.first %}
+                            {%  if loop.index != 2 %}
+                                &gt;
+                            {% endif %}
+
+                            {{ menu.label }}
                         {% endif %}
-                        {{ menu.label }}
                     {% endfor %}
                 {% endif %}
             {% endif%}
         </title>
     </head>
-    <body {% block body_attributes %}class="sonata-bc"{% endblock %}>
-        <div id="wrapper">
-            {# initialize block value #}
-
+    <body {% block body_attributes %}class="sonata-bc skin-black fixed"{% endblock %}>
+        <header class="header">
+            {% block logo %}
+                <a class="logo" href="{{ url('sonata_admin_dashboard') }}">
+                    {#<img src="{{ asset(admin_pool.titlelogo) }}" alt="">#}
+                    {{ admin_pool.title }}
+                </a>
+            {% endblock %}
             {% block sonata_nav %}
                 {% if admin_pool is defined %}
-                    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-                        <div class="container-fluid">
-                            <div class="navbar-header">
-                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
-                                    <span class="sr-only">Toggle navigation</span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                    <span class="icon-bar"></span>
-                                </button>
-                                {% block logo %}
-                                    <a class="navbar-brand" href="{{ url('sonata_admin_dashboard') }}">
-                                        <img src="{{ asset(admin_pool.titlelogo) }}" alt="">
-                                        {{ admin_pool.title }}
-                                    </a>
-                                {% endblock %}
-                            </div>
-
-                            <div class="collapse navbar-collapse">
-                                {% block sonata_breadcrumb %}
-                                    {% if _breadcrumb is not empty or action is defined %}
-                                        <div class="col-md-6">
-                                            <ol class="nav navbar-top-links breadcrumb">
-                                                {% if _breadcrumb is empty %}
-                                                    {% if action is defined %}
-                                                        {% for menu in admin.breadcrumbs(action) %}
-                                                            {% if not loop.last  %}
-                                                                <li>
-                                                                    {% if menu.uri is not empty %}
-                                                                        <a href="{{ menu.uri }}">{{ menu.label }}</a>
-                                                                    {% else %}
-                                                                        {{ menu.label }}
-                                                                    {% endif %}
-                                                                </li>
+                    <nav class="navbar navbar-static-top" role="navigation">
+                        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
+                            <span class="sr-only">Toggle navigation</span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                            <span class="icon-bar"></span>
+                        </a>
+
+                        <div class="navbar-left">
+                            {% block sonata_breadcrumb %}
+                                {% if _breadcrumb is not empty or action is defined %}
+                                    <ol class="nav navbar-top-links breadcrumb">
+                                        {% if _breadcrumb is empty %}
+                                            {% if action is defined %}
+                                                {% for menu in admin.breadcrumbs(action) %}
+                                                    {% if not loop.last  %}
+                                                        <li>
+                                                            {% if menu.uri is not empty %}
+                                                                <a href="{{ menu.uri }}">{{ menu.label|raw }}</a>
                                                             {% else %}
-                                                                <li class="active{% if loop.first %} navbar-text{% endif %}">{{ menu.label }}</li>
+                                                                {{ menu.label }}
                                                             {% endif %}
-                                                        {% endfor %}
+                                                        </li>
+                                                    {% else %}
+                                                        <li class="active"><span>{{ menu.label }}</span></li>
                                                     {% endif %}
-                                                {% else %}
-                                                    {{ _breadcrumb|raw }}
-                                                {% endif %}
-                                            </ol>
-                                        </div>
-                                    {% endif %}
-                                {% endblock sonata_breadcrumb %}
+                                                {% endfor %}
+                                            {% endif %}
+                                        {% else %}
+                                            {{ _breadcrumb|raw }}
+                                        {% endif %}
+                                    </ol>
+                                {% endif %}
+                            {% endblock sonata_breadcrumb %}
+                        </div>
 
-                                {% block sonata_top_nav_menu %}
-                                    <ul class="nav navbar-top-links navbar-right">
-                                        <li class="dropdown">
-                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                                <i class="fa fa-plus-square fa-fw"></i> <i class="fa fa-caret-down"></i>
-                                            </a>
-                                            {% include admin_pool.getTemplate('add_block') %}
-                                        </li>
-                                        <li class="dropdown">
-                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                                                <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
-                                            </a>
-                                            <ul class="dropdown-menu dropdown-user">
-                                                {% include admin_pool.getTemplate('user_block') %}
-                                            </ul>
-                                        </li>
-                                    </ul>
-                                {% endblock %}
+                        {% block sonata_top_nav_menu %}
+                            <div class="navbar-right">
+                                <ul class="nav navbar-nav">
+                                    <li class="dropdown">
+                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                            <i class="fa fa-plus-square fa-fw"></i> <i class="fa fa-caret-down"></i>
+                                        </a>
+                                        {% include admin_pool.getTemplate('add_block') %}
+                                    </li>
+                                    <li class="dropdown">
+                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+                                            <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
+                                        </a>
+                                        <ul class="dropdown-menu dropdown-user">
+                                            {% include admin_pool.getTemplate('user_block') %}
+                                        </ul>
+                                    </li>
+                                </ul>
                             </div>
-
-                        </div>
+                        {% endblock %}
                     </nav>
                 {% endif %}
             {% endblock sonata_nav %}
-
-            {% block sonata_side_nav %}
-                <nav class="navbar-default navbar-static-side" role="navigation">
-                    <div class="sidebar-collapse">
-                        <ul class="nav" id="side-menu">
-                            {% block sonata_side_menu %}
-                                {% block sonata_nav_menu_before %}{% endblock %}
-
-                                {% block sonata_nav_menu %}
-                                    {% block sonata_top_bar_search %}
-                                        {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
-                                            <li class="sidebar-search">
-                                                <form action="{{ url('sonata_admin_search') }}" method="GET" {#class="navbar-form navbar-left"#} role="search">
-                                                    <div class="input-group custom-search-form">
-                                                            <input type="text" name="q" value="{{ app.request.get('q') }}" class="form-control" placeholder="{{ 'search_placeholder'|trans({}, 'SonataAdminBundle') }}">
-                                                        <span class="input-group-btn">
-                                                            <button class="btn btn-default" type="submit">
-                                                                <i class="fa fa-search"></i>
-                                                            </button>
-                                                        </span>
-                                                    </div>
-                                                </form>
-                                            </li>
+        </header>
+
+        <div class="wrapper row-offcanvas row-offcanvas-left">
+            <aside class="left-side sidebar-offcanvas">
+                <section class="sidebar">
+                    {% block sonata_side_nav %}
+                        {% block sonata_sidebar_search %}
+                            {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
+                                <form action="{{ url('sonata_admin_search') }}" method="GET" class="sidebar-form" role="search">
+                                    <div class="input-group custom-search-form">
+                                        <input type="text" name="q" value="{{ app.request.get('q') }}" class="form-control" placeholder="{{ 'search_placeholder'|trans({}, 'SonataAdminBundle') }}">
+                                            <span class="input-group-btn">
+                                                <button class="btn btn-flat" type="submit">
+                                                    <i class="fa fa-search"></i>
+                                                </button>
+                                            </span>
+                                    </div>
+                                </form>
+                            {% endif %}
+                        {% endblock sonata_sidebar_search %}
+
+                        {% block side_bar_before_nav %} {% endblock %}
+                        {% block side_bar_nav %}
+                            {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
+                                <ul class="sidebar-menu">
+                                    {% for group in admin_pool.dashboardgroups %}
+                                        {% set display = (group.roles is empty or is_granted('ROLE_SUPER_ADMIN') ) %}
+                                        {% for role in group.roles if not display %}
+                                            {% set display = is_granted(role) %}
+                                        {% endfor %}
+
+                                        {# Do not display the group label if no item in group is available #}
+                                        {% set item_count = 0 %}
+                                        {% if display %}
+                                            {% for admin in group.items if item_count == 0 %}
+                                                {% if admin.hasroute('list') and admin.isGranted('LIST') %}
+                                                    {% set item_count = item_count+1 %}
+                                                {% endif %}
+                                            {% endfor %}
                                         {% endif %}
-                                    {% endblock %}
 
-                                    {% block side_bar_before_nav %} {% endblock %}
-                                    {% block side_bar_nav %}
-                                        {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
-                                            {% for group in admin_pool.dashboardgroups %}
-                                                {% set display = (group.roles is empty or is_granted('ROLE_SUPER_ADMIN') ) %}
-                                                {% for role in group.roles if not display %}
-                                                    {% set display = is_granted(role) %}
+                                        {% if display and (item_count > 0) %}
+                                            <li class="treeview">
+                                                <a href="#">
+                                                    {{ group.icon|raw }}
+                                                    <span>{{ group.label|trans({}, group.label_catalogue) }}</span>
+                                                    <i class="fa pull-right fa-angle-left"></i>
+                                                </a>
+                                                {% set active = false %}
+                                                {% for admin in group.items %}
+                                                    {% if admin.hasroute('list') and admin.isGranted('LIST') and app.request.get('_sonata_admin') == admin.code %}
+                                                        {% set active = true %}
+                                                    {% endif %}
                                                 {% endfor %}
-
-                                                {# Do not display the group label if no item in group is available #}
-                                                {% set item_count = 0 %}
-                                                {% if display %}
-                                                    {% for admin in group.items if item_count == 0 %}
+                                                <ul class="treeview-menu{% if active %} active{% endif %}">
+                                                    {% for admin in group.items %}
                                                         {% if admin.hasroute('list') and admin.isGranted('LIST') %}
-                                                            {% set item_count = item_count+1 %}
+                                                            <li{% if app.request.get('_sonata_admin') == admin.code %} class="active"{% endif %}><a href="{{ admin.generateUrl('list')}}"><i class="fa fa-angle-double-right"></i> {{ admin.label|trans({}, admin.translationdomain) }}</a></li>
                                                         {% endif %}
                                                     {% endfor %}
-                                                {% endif %}
-
-                                                {% if display and (item_count > 0) %}
-                                                    <li>
-                                                        <a href="#">{{ group.label|trans({}, group.label_catalogue) }} <span class="fa arrow"></span></a>
-                                                        <ul class="nav nav-second-level">
-                                                            {% for admin in group.items %}
-                                                                {% if admin.hasroute('list') and admin.isGranted('LIST') %}
-                                                                    <li{% if app.request.get('_sonata_admin') == admin.code %} class="active"{% endif %}><a href="{{ admin.generateUrl('list')}}">{{ admin.label|trans({}, admin.translationdomain) }}</a></li>
-                                                                {% endif %}
-                                                            {% endfor %}
-                                                        </ul>
-                                                    </li>
-                                                {% endif %}
-                                            {% endfor %}
+                                                </ul>
+                                            </li>
                                         {% endif %}
-                                    {% endblock %}
-                                    {% block side_bar_after_nav %} {% endblock %}
-
-                                {% endblock %}
-
-                                {% block sonata_nav_menu_after %}{% endblock %}
-                            {% endblock %}
-                        </ul>
-                    </div>
-                </nav>
-            {% endblock %}
+                                    {% endfor %}
+                                </ul>
+                            {% endif %}
+                        {% endblock side_bar_nav %}
+                        {% block side_bar_after_nav %} {% endblock %}
+                    {% endblock sonata_side_nav %}
+                </section>
+            </aside>
 
             {% block sonata_wrapper %}
-                <div id="page-wrapper">
-
+                <aside class="right-side">
                     {% block sonata_page_content %}
-                        {% block sonata_page_content_nav %}
-                            {% if _tab_menu is not empty or _actions is not empty %}
-                                <nav class="navbar navbar-default" role="navigation">
-                                    <div class="container-fluid">
-                                        <div class="navbar-left">
-                                            {% if _tab_menu is not empty %}
-                                                {{ _tab_menu|raw }}
-                                            {% endif %}
-                                        </div>
-
-                                        {% if _actions is not empty %}
-                                            <ul class="nav navbar-nav navbar-right">
-                                                <li class="dropdown sonata-actions">
-                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a>
-                                                    <ul class="dropdown-menu" role="menu">
-                                                        {{ _actions|raw }}
+                        <section class="content-header">
+                            {% block sonata_page_content_header %}
+                                {% block sonata_page_content_nav %}
+                                    {% if _tab_menu is not empty or _actions is not empty %}
+                                        <nav class="navbar navbar-default" role="navigation">
+                                            <div class="container-fluid">
+                                                <div class="navbar-left">
+                                                    {% if _tab_menu is not empty %}
+                                                        {{ _tab_menu|raw }}
+                                                    {% endif %}
+                                                </div>
+
+                                                {% if _actions is not empty %}
+                                                    <ul class="nav navbar-nav navbar-right">
+                                                        <li class="dropdown sonata-actions">
+                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a>
+                                                            <ul class="dropdown-menu" role="menu">
+                                                                {{ _actions|raw }}
+                                                            </ul>
+                                                        </li>
                                                     </ul>
-                                                </li>
-                                            </ul>
-                                        {% endif %}
-                                    </div>
-                                </nav>
-                            {% endif %}
-                        {% endblock %}
+                                                {% endif %}
+                                            </div>
+                                        </nav>
+                                    {% endif %}
+                                {% endblock sonata_page_content_nav %}
 
-                        {% block notice %}
-                            {% include 'SonataCoreBundle:FlashMessage:render.html.twig' %}
-                        {% endblock %}
+                                {% block notice %}
+                                    {% include 'SonataCoreBundle:FlashMessage:render.html.twig' %}
+                                {% endblock notice %}
 
-                        {% block sonata_admin_content %}
+                            {% endblock sonata_page_content_header %}
+                        </section>
+                        <section class="content">
+                            {% block sonata_admin_content %}
 
-                            {% if _preview is not empty %}
-                                <div class="sonata-ba-preview">{{ _preview|raw }}</div>
-                            {% endif %}
+                                {% if _preview is not empty %}
+                                    <div class="sonata-ba-preview">{{ _preview|raw }}</div>
+                                {% endif %}
 
-                            {% if _content is not empty %}
-                                <div class="sonata-ba-content">{{ _content|raw }}</div>
-                            {% endif %}
+                                {% if _content is not empty %}
+                                    <div class="sonata-ba-content">{{ _content|raw }}</div>
+                                {% endif %}
 
-                            {% if _show is not empty %}
-                                <div class="sonata-ba-show">{{ _show|raw }}</div>
-                            {% endif %}
+                                {% if _show is not empty %}
+                                    <div class="sonata-ba-show">{{ _show|raw }}</div>
+                                {% endif %}
 
-                            {% if _form is not empty %}
-                                <div class="sonata-ba-form">{{ _form|raw }}</div>
-                            {% endif %}
+                                {% if _form is not empty %}
+                                    <div class="sonata-ba-form">{{ _form|raw }}</div>
+                                {% endif %}
 
-                            {% if _list_table is not empty or _list_filters is not empty %}
-                                <div class="row">
-                                    <div class="sonata-ba-list {% if _list_filters|trim %}col-md-10{% else %}col-md-12{% endif %}">
-                                        {{ _list_table|raw }}
-                                    </div>
-
-                                    {% if _list_filters|trim %}
-                                        <div class="sonata-ba-filter col-md-2">
-                                            {{ _list_filters|raw }}
+                                {% if _list_table is not empty or _list_filters is not empty %}
+                                    <div class="row">
+                                        <div class="sonata-ba-list {% if _list_filters|trim %}col-md-10{% else %}col-md-12{% endif %}">
+                                            {{ _list_table|raw }}
                                         </div>
-                                    {% endif %}
-                                </div>
-                            {% endif %}
-                        {% endblock %}
-                    {% endblock %}
 
-                </div>
+                                        {% if _list_filters|trim %}
+                                            <div class="sonata-ba-filter col-md-2">
+                                                {{ _list_filters|raw }}
+                                            </div>
+                                        {% endif %}
+                                    </div>
+                                {% endif %}
+                            {% endblock sonata_admin_content %}
+                        </section>
+                    {% endblock sonata_page_content %}
+                </aside>
             {% endblock sonata_wrapper %}
+
             {% block footer %}
                 <footer>
                     <p class="text-right"><a href="http://sonata-project.org" rel="noreferrer">Powered by the Sonata Project</a></p>
                 </footer>
-            {% endblock %}
+            {% endblock footer %}
         </div>
     </body>
 </html>