[COMPONENTS][CSS] Adding components styling properly.

components/Right/Right.php

@@ -19,8 +19,21 @@
 
 namespace Component\Right;
 
+use App\Core\Event;
 use App\Core\Modules\Component;
 
 class Right extends Component
 {
+    /**
+     * Output our dedicated stylesheet
+     *
+     * @param array $styles stylesheets path
+     *
+     * @return bool hook value; true means continue processing, false means stop.
+     */
+    public function onEndShowStyles(array &$styles): bool
+    {
+        $styles[] = 'components/Right/assets/css/right.css';
+        return Event::next;
+    }
 }

components/Right/templates/right/view.html.twig

@@ -0,0 +1,40 @@
+{% block rightpanel %}
+<div class="panel panel-right">
+    <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
+    <label id="panel-right-icon" for="panel-right-toggle" aria-hidden="true" tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label>
+
+    <a id="anchor-right-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
+    <aside class="panel-content accessibility-target">
+
+        {% set post_form = handle_event('AppendRightPostingBlock', {'request': request}) %}
+        {% if post_form is defined %}
+            <section class="section-widget" title={{ 'Create a new note.' | trans }}>
+                <details class="section-title-details" title={{ 'Expand if you want to access more options.' | trans }}>
+                    <summary class="section-title-summary">
+                        {{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
+                    </summary>
+                </details>
+
+                <div class="section-form">
+                    <fieldset>
+                        {{ form(post_form) }}
+                    </fieldset>
+                </div>
+            </section>
+        {% endif %}
+
+        {% set current_path = app.request.get('_route') %}
+
+        {% if right_panel_vars is defined %}
+            {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
+                {{ block | raw }}
+            {% endfor %}
+        {% else %}
+            {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
+                {{ block | raw }}
+            {% endfor %}
+        {% endif %}
+
+    </aside>
+</div>
+{% endblock rightpanel %}