add color property in Navigation

add badge with navigation color in admin views

src/core/Controller/Site/NavigationAdminController.php

@@ -108,6 +108,7 @@ class NavigationAdminController extends CrudController
 
             ->setField('index', 'Label', Field\TextField::class, [
                 'property' => 'label',
+                'view' => '@Core/site/navigation_admin/field/label.html.twig',
                 'attr' => ['class' => 'miw-200'],
             ])
             ->setField('index', 'Domain', Field\ButtonField::class, [

src/core/Entity/Site/Navigation.php

@@ -42,6 +42,9 @@ class Navigation implements EntityInterface
     #[ORM\Column(type: 'string', length: 10)]
     protected $locale = 'en';
 
+    #[ORM\Column(type: 'string', length: 7, nullable: true)]
+    protected $color = null;
+
     #[ORM\Column(type: 'integer', nullable: true)]
     protected $sortOrder;
 
@@ -237,4 +240,16 @@ class Navigation implements EntityInterface
 
         return false;
     }
+
+    public function setColor(string $color): self
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+
+    public function getColor(): string
+    {
+        return $this->color;
+    }
 }

src/core/Form/Site/NavigationType.php

@@ -11,6 +11,7 @@ use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Validator\Constraints\Length;
 use Symfony\Component\Validator\Constraints\NotBlank;
+use Symfony\Component\Form\Extension\Core\Type\ColorType;
 
 class NavigationType extends AbstractType
 {
@@ -44,6 +45,20 @@ class NavigationType extends AbstractType
             ]
         );
 
+        $builder->add(
+            'color',
+            ColorType::class,
+            [
+                'label' => 'Color',
+                'required' => true,
+                'attr' => [
+                ],
+                'constraints' => [
+                    new NotBlank(),
+                ],
+            ]
+        );
+
         $builder->add(
             'domain',
             TextType::class,

src/core/Resources/assets/css/admin.scss

@@ -402,6 +402,31 @@ th {
   margin-right: 4px;
 }
 
+.form-color {
+  display: inline-block;
+  line-height: 0;
+  border-radius: 25%;
+
+  input {
+    padding: 0;
+    border: 0;
+    height: auto;
+    width: 30px;
+    aspect-ratio: 1/1;
+    display: inline-block;
+  }
+}
+
+.badge-square {
+  aspect-ratio: 1/1;
+  min-width: 14px;
+  min-height: 14px;
+  vertical-align: middle;
+  padding: 0;
+  aspect-ratio: 1/1;
+  display: inline-block;
+}
+
 #form-main {
   > .tab-content {
     @media screen and (min-width: 500px) {

src/core/Resources/views/form/bootstrap_4_form_theme.html.twig

@@ -7,6 +7,15 @@
     </div>
 {% endblock %}
 
+{% block color_widget %}
+    <div class="form-color-container">
+        <div class="form-color">
+            {%- set type = type|default('color') -%}
+            {{ block('form_widget_simple') }}
+        </div>
+    </div>
+{% endblock %}
+
 {% block file_widget -%}
     <div class="row">
         <div class="col-12">

src/core/Resources/views/site/navigation_admin/_form.html.twig

@@ -1,7 +1,7 @@
 <div class="row">
     <div class="col-12 p-3">
         <div class="row">
-            {% for item in ['label', 'locale', 'code'] %}
+            {% for item in ['label', 'locale', 'code', 'color'] %}
                 <div class="col-12">
                     {{ form_row(form[item]) }}
                 </div>

src/core/Resources/views/site/navigation_admin/field/label.html.twig

@@ -0,0 +1,6 @@
+{% extends '@Core/admin/crud/field/text.html.twig' %}
+
+{% block value %}
+    {{ navigation_color_badge(entity) }}
+    {{ parent() }}
+{% endblock %}

src/core/Resources/views/site/page_admin/_form.html.twig

@@ -41,6 +41,7 @@
                     navigation: node.menu.navigation.id,
                     'data-modal': path('admin_site_node_edit', {entity: node.id}),
                 }) }}" class="btn btn-sm btn-light mr-1" target="_blank">
+                    {{ navigation_color_badge(node.menu.navigation) }}
                     {{ node.label }} ({{ node.menu.navigation.label }})
                 </a>
             {% endfor %}

src/core/Resources/views/site/page_admin/fields/nodes.html.twig

@@ -3,6 +3,7 @@
         navigation: node.menu.navigation.id,
         'data-modal': path('admin_site_node_edit', {entity: node.id}),
     }) }}" class="btn btn-sm btn-light mr-1">
+        {{ navigation_color_badge(node.menu.navigation) }}
         {{ node.label }} ({{ node.menu.navigation.label }})
     </a>
 {% endfor %}

src/core/Resources/views/site/tree_admin/navigation.html.twig

@@ -8,12 +8,14 @@
             <div class="crud-header-title">
                 <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     <span class="font-weight-bold">
+                        {{ navigation_color_badge(navigation) }}
                         {{ navigation.label }}
                     </span>
                 </button>
                 <div class="dropdown-menu">
                     {% for item in navigations %}
                         <a href="{{ path('admin_site_tree_navigation', {navigation: item.id}) }}" class="dropdown-item">
+                            {{ navigation_color_badge(item) }}
                             {{ item.label }}
                         </a>
                     {% endfor %}

src/core/Twig/Extension/NavigationExtension.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Core\Twig\Extension;
+
+use App\Core\Entity\Site\Navigation;
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+
+class NavigationExtension extends AbstractExtension
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getFunctions()
+    {
+        return [
+            new TwigFunction('navigation_color_badge', [$this, 'navigationColorBadge'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function navigationColorBadge(Navigation $entity): ?string
+    {
+        if (!$entity->getColor()) {
+            return null;
+        }
+
+        return sprintf(
+            '<span class="badge badge-square" style="background: %s">&nbsp;</span>',
+            $entity->getColor()
+        );
+    }
+}