EZP-28127: Create extendable left sidebar

src/bundle/Resources/config/services/menu.yml

@@ -12,3 +12,8 @@ services:
         public: true
         tags:
             - { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.main }
+
+    EzSystems\EzPlatformAdminUi\Menu\LeftSidebarBuilder:
+        public: true
+        tags:
+            - { name: knp_menu.menu_builder, method: build, alias: ezplatform_admin_ui.menu.content.sidebar_left }

src/bundle/Resources/views/admin/trash/list.html.twig

@@ -8,24 +8,7 @@
     <div id="react-udw"></div>
     <div class="row align-items-stretch ez-main-row">
         <div class="col-sm-1 bg-dark pt-4 ez-side-menu"> {# @todo sidebars should be moved to layout.html.twig !! #}
-            <button class="btn btn-dark btn-block" disabled>
-                <svg class="ez-icon ez-icon-search">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#search"></use>
-                </svg>
-                Search
-            </button>
-            <button class="btn btn-dark btn-block btn--udw-browse" data-starting-location-id="2">
-                <svg class="ez-icon ez-icon-browse">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#browse"></use>
-                </svg>
-                Browse
-            </button>
-            <a class="btn btn-dark btn-block" href="{{ path('ezplatform.trash.list') }}">
-                <svg class="ez-icon ez-icon-trash">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#trash"></use>
-                </svg>
-                Trash
-            </a>
+            {{ knp_menu_render('ezplatform_admin_ui.menu.content.sidebar_left', {'template': '@EzPlatformAdminUi/parts/menu/sidebar_left.html.twig'}) }}
         </div>
         <div class="col-sm-10 px-0">
             <section class="container mt-5">

src/bundle/Resources/views/content/locationview.html.twig

@@ -15,24 +15,7 @@
          data-parent-content-type-id="{{ contentType.id }}"></div>
     <div class="row align-items-stretch ez-main-row">
         <div class="col-sm-1 bg-dark pt-4 ez-side-menu">
-            <button class="btn btn-dark btn-block" disabled>
-                <svg class="ez-icon ez-icon-search">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#search"></use>
-                </svg>
-                Search
-            </button>
-            <button class="btn btn-dark btn-block btn--udw-browse" data-starting-location-id="2">
-                <svg class="ez-icon ez-icon-browse">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#browse"></use>
-                </svg>
-                Browse
-            </button>
-            <a class="btn btn-dark btn-block" href="{{ path('ezplatform.trash.list') }}">
-                <svg class="ez-icon ez-icon-trash">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#trash"></use>
-                </svg>
-                Trash
-            </a>
+            {{ knp_menu_render('ezplatform_admin_ui.menu.content.sidebar_left', {'template': '@EzPlatformAdminUi/parts/menu/sidebar_left.html.twig'}) }}
         </div>
         <div class="col-sm-10 px-0 pb-4">
             <div class="ez-header pt-4">

src/bundle/Resources/views/dashboard/dashboard.html.twig

@@ -7,24 +7,7 @@
 {% block content %}
     <div class="row align-items-stretch ez-main-row ez-dashboard-row">
         <div class="col-sm-1 bg-dark pt-4 ez-side-menu">
-            <button class="btn btn-dark btn-block" disabled>
-                <svg class="ez-icon ez-icon-search">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#search"></use>
-                </svg>
-                Search
-            </button>
-            <button class="btn btn-dark btn-block btn--udw-browse" data-starting-location-id="2">
-                <svg class="ez-icon ez-icon-browse">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#browse"></use>
-                </svg>
-                Browse
-            </button>
-            <a class="btn btn-dark btn-block" href="{{ path('ezplatform.trash.list') }}">
-                <svg class="ez-icon ez-icon-trash">
-                    <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#trash"></use>
-                </svg>
-                {{ 'navigation.admin.trash'|trans|desc('Trash') }}
-            </a>
+            {{ knp_menu_render('ezplatform_admin_ui.menu.content.sidebar_left', {'template': '@EzPlatformAdminUi/parts/menu/sidebar_left.html.twig'}) }}
         </div>
         <div class="col-sm-11">
             <div class="container">

src/bundle/Resources/views/parts/menu/sidebar_left.html.twig

@@ -0,0 +1,41 @@
+{% extends '@KnpMenu/menu.html.twig' %}
+
+{% block root %}
+    {% for item in item.children %}
+        {{ block('item') }}
+    {% endfor %}
+{% endblock %}
+
+{% block item -%}
+    {%- if item.displayed -%}
+        {%- set attributes = item.attributes|merge({'class': (item.attributes.class|default('') ~ ' btn btn-dark btn-block')|trim}) -%}
+        {%- set attributes = attributes|merge({'id': item.name ~ '-tab'}) -%}
+
+        {%- if item.uri is not empty %}
+            {% set attributes = attributes|merge({'href': item.uri}) %}
+            {% set element = 'a' %}
+            {{ block('element') }}
+        {%- else %}
+            {% set element = 'button' %}
+            {{ block('element') }}
+        {%- endif %}
+    {%- endif -%}
+{%- endblock %}
+
+{% block element %}
+    {% import 'knp_menu.html.twig' as macros %}
+    {% set element = element|default('a') %}
+    <{{ element }}{{ macros.attributes(attributes) }}>
+    {{ block('label') }}
+    </{{ element }}>
+{% endblock %}
+
+{% block label %}
+    {% if item.extras.icon is defined and item.extras.icon != '' %}
+        <svg class="ez-icon ez-icon-{{ item.extras.icon }}">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink"
+                 xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#{{ item.extras.icon }}"></use>
+        </svg>
+    {% endif %}
+    {{ parent() }}
+{% endblock %}

src/lib/Menu/LeftSidebarBuilder.php

@@ -0,0 +1,87 @@
+<?php
+
+/**
+ * @copyright Copyright (C) eZ Systems AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+namespace EzSystems\EzPlatformAdminUi\Menu;
+
+use EzSystems\EzPlatformAdminUi\Menu\Event\ConfigureMenuEvent;
+use InvalidArgumentException;
+use JMS\TranslationBundle\Model\Message;
+use JMS\TranslationBundle\Translation\TranslationContainerInterface;
+use Knp\Menu\ItemInterface;
+
+/**
+ * KnpMenuBundle Menu Builder service implementation for AdminUI left sidebar menu.
+ *
+ * @see https://symfony.com/doc/current/bundles/KnpMenuBundle/menu_builder_service.html
+ */
+class LeftSidebarBuilder extends AbstractBuilder implements TranslationContainerInterface
+{
+    /* Menu items */
+    const ITEM__SEARCH = 'sidebar_left__search';
+    const ITEM__BROWSE = 'sidebar_left__browse';
+    const ITEM__TRASH = 'sidebar_left__trash';
+
+    /**
+     * @return string
+     */
+    protected function getConfigureEventName(): string
+    {
+        return ConfigureMenuEvent::CONTENT_SIDEBAR_LEFT;
+    }
+
+    /**
+     * @param array $options
+     *
+     * @return ItemInterface
+     *
+     * @throws InvalidArgumentException
+     */
+    public function createStructure(array $options): ItemInterface
+    {
+        $menu = $this->factory->createItem('root');
+
+        $menu->setChildren([
+            self::ITEM__SEARCH => $this->createMenuItem(
+                self::ITEM__SEARCH,
+                [
+                    'extras' => ['icon' => 'search'],
+                    'attributes' => ['disabled' => 'disabled'],
+                ]
+            ),
+            self::ITEM__BROWSE => $this->createMenuItem(
+                self::ITEM__BROWSE,
+                [
+                    'extras' => ['icon' => 'browse'],
+                    'attributes' => [
+                        'class' => 'btn--udw-browse',
+                        'data-starting-location-id' => 1,
+                    ],
+                ]
+            ),
+            self::ITEM__TRASH => $this->createMenuItem(
+                self::ITEM__TRASH,
+                [
+                    'route' => 'ezplatform.trash.list',
+                    'extras' => ['icon' => 'trash'],
+                ]
+            ),
+        ]);
+
+        return $menu;
+    }
+
+    /**
+     * @return Message[]
+     */
+    public static function getTranslationMessages(): array
+    {
+        return [
+            (new Message(self::ITEM__SEARCH, 'menu'))->setDesc('Search'),
+            (new Message(self::ITEM__BROWSE, 'menu'))->setDesc('Browse'),
+            (new Message(self::ITEM__TRASH, 'menu'))->setDesc('Trash'),
+        ];
+    }
+}