feat: refactor for panel

assets-src/sass/components/_panel-sidebar.scss

@@ -0,0 +1,190 @@
+.panel__sidebar {
+
+    border-right: 1px solid var(--mc-gray-100);
+}
+
+.panel-nav {
+    height: 100%;
+    padding: size(40) size(24);
+    display: flex;
+
+    .user-menu__line {
+        max-width: 100%;
+        height: 0px;
+        left: 16px;
+        top: 809px;
+        border-top: 1px solid var(--mc-low-500);
+        padding: 0;
+        margin: size(16) size(16);
+    }
+
+    &.user-menu {
+        .vertical__line {
+            border-right: size(1) solid var(--mc-gray-300);
+            width: 0;
+            margin-inline: size(22);
+            height: size(522);
+        }
+
+        border: none;
+        padding: 0;
+
+        ul:first-child {
+            li>a {
+                color: var(--mc-primary-500)
+            }
+        }
+    }
+
+    &__line {
+        flex: 1;
+        max-width: 100%;
+        align-self: stretch;
+        border-left: 1px solid var(--mc-gray-300);
+        margin: 0 size(16);
+        height: auto;
+    }
+
+    @include mobile {
+        &__line {
+            max-width: 100%;
+            border-left: none;
+            border-top: 1px solid var(--mc-gray-300);
+            width: 100%;
+            margin: size(16) 0;
+        }
+    }
+
+    &__right {
+
+        &--user li{
+            svg {
+                color: var(--mc-primary-500);
+            }
+            &:focus,
+            &:hover,
+            a.active {
+                svg {
+                    color: var(--mc-high-500);
+                }
+            }
+        }
+    }
+
+    @include mobile {
+        border: none;
+        display: none;
+
+        padding: size(24) size(16);
+    }
+
+    &__toggle {
+        background-color: var(--mc-gray-300);
+        color: var(--panel-font-title);
+        font-family: var(--mc-font-body);
+        font-size: size(18);
+        font-weight: bold;
+        width: 100%;
+
+        .iconify {
+            height: size(24);
+            margin-right: size(32);
+            width: size(24);
+        }
+    }
+
+    h2 {
+        margin: 0;
+
+        @include desktop {
+            @include sr-only;
+        }
+    }
+
+    h3 {
+        color: $panel-font-title;
+        font-family: 'Open Sans', var(--mc-font-body, sans-serif);
+        font-weight: 700;
+        font-size: size(14);
+        line-height: 100%;
+        letter-spacing: 0.07em;
+        text-transform: uppercase;
+        vertical-align: middle;
+        margin: 0;
+        padding: size(16) size(16) size(8);
+    }
+
+    ul li a {
+        margin-left: size(13);
+    }
+
+    > li > a {
+        margin-left: size(13);
+    }
+
+    nav {
+
+        @include mobile {
+            display: none;
+
+            &.--open {
+                display: block;
+            }
+        }
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: size(8);
+    }
+
+    li {
+        list-style: none;
+    }
+
+    a {
+        align-items: center;
+        border-radius: var(--mc-border-radius-sm);
+        color: inherit;
+        display: flex;
+        transition: all 0.2s ease-in-out;
+        padding: size(8) size(16);
+        font-size: 14px;
+        font-weight: 600;
+        font-family: 'Open Sans';
+        text-decoration: none;
+
+        &:focus,
+        &:hover {
+            background-color: var(--mc-primary-500);
+            color: var(--mc-high-500);
+
+        }
+
+        &.active {
+            background-color: var(--mc-primary-700);
+            color: var(--mc-high-500);
+
+            &:focus {
+                background-color: var(--mc-primary-500);
+                color: var(--mc-high-500);
+            }
+
+            &:hover {
+                background-color: var(--mc-primary-700);
+                color: var(--mc-high-500);
+            }
+
+
+        }
+
+        .iconify {
+            height: size(24);
+            margin-right: size(32);
+            width: size(24);
+        }
+    }
+}

assets-src/sass/theme-BaseV2.scss

@@ -46,6 +46,7 @@ $home-opportunities: #f5bb50;
 $home-feature: #45B648;
 $home-register: #036293;
 
+$panel-font-title: #3E3E3E;
 
 
 // // Neutral colors
@@ -85,6 +86,7 @@ $border-radius-xxs: 2px;
 @import './components/home-map';
 @import './components/home-prosas-notices';
 @import './components/home-description';
+@import './components/panel-sidebar';
 @import './components/glpi-form';
 @import './layouts/home-register';
 @import './layouts/main-footer';

components/mc-header-menu/README.md

@@ -0,0 +1,28 @@
+# Componente `<mc-header-menu>`
+O componente `mc-header-menu` é utilizado para renderizar o menu do cabeçalho de um site. Ele lida com a alternância do menu em dispositivos móveis e permite a inclusão de slots para o logotipo e itens do menu.
+
+## Slots
+- **default**: Slot padrão para a inserção dos itens do menu.
+- **logo**: Slot para a inserção do logotipo.
+
+### Importando componente
+```PHP
+<?php 
+$this->import('mc-header-menu');
+?>
+```
+
+### Exemplos de uso
+```HTML
+<!-- utilizaçao básica -->
+ <mc-header-menu>
+    <template #logo>
+        <img src="path/to/logo.png" alt="Logo">
+    </template>
+    <template #default>
+        <li><a href="/home">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/contact">Contact</a></li>
+    </template>
+</mc-header-menu>
+```

components/mc-header-menu/script.js

@@ -0,0 +1,27 @@
+app.component('mc-header-menu', {
+    template: $TEMPLATES['mc-header-menu'],
+
+    setup() { 
+        // os textos estão localizados no arquivo texts.php deste componente 
+        const text = Utils.getTexts('mc-header-menu')
+        return { text }
+    },
+
+    props: {
+    },
+
+    data() {
+        return {
+            openMobile: false,
+        }
+    },
+
+    computed: {
+    },
+
+    methods: {
+        toggleMobile() {
+            this.openMobile = !this.openMobile;
+        }
+    },
+});

components/mc-header-menu/template.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * @var MapasCulturais\App $app
+ * @var MapasCulturais\Themes\BaseV2\Theme $this
+ */
+
+use MapasCulturais\i;
+
+$this->import('
+    mc-icon
+');
+?>
+<!-- Logo -->
+<?php $this->applyTemplateHook('mc-header-logo','before'); ?>
+<div class="mc-header-logo">
+    <?php $this->applyTemplateHook('mc-header-logo','begin'); ?>
+    <a class="mc-header-menu__btn-mobile" href="#main-app" @click="toggleMobile()">
+        <mc-icon name="menu-mobile"></mc-icon>
+    </a>
+    <slot name="logo"></slot>
+    <?php $this->applyTemplateHook('mc-header-logo','end'); ?>
+</div>
+<?php $this->applyTemplateHook('mc-header-logo','after'); ?>
+
+<!-- Menu principal -->
+<?php $this->applyTemplateHook('mc-entity-menu','before'); ?>
+<ul class="mc-header-menu">   
+    <?php $this->applyTemplateHook('mc-entity-menu','begin'); ?>
+    <slot name="default"></slot>
+    <?php $this->applyTemplateHook('mc-entity-menu','end'); ?>
+</ul>
+<?php $this->applyTemplateHook('mc-entity-menu','after'); ?>
+
+<!-- Menu principal mobile -->
+<div v-if="openMobile" class="mc-header-menu mobile">
+    <div class="close"> 
+        <a class="close__btn" href="#main-app" @click="toggleMobile()">
+            <mc-icon name="close"></mc-icon> 
+        </a>
+        <theme-logo href="<?= $app->createUrl('site', 'index') ?>"></theme-logo>
+    </div>
+    <?php $this->applyTemplateHook('mc-entity-menu-mobile','before'); ?>
+    <ul class="mc-header-menu__itens">
+        <?php $this->applyTemplateHook('mc-entity-menu-mobile','begin'); ?>
+        <slot name="default"></slot>
+        <li> 
+            <a href="<?= $app->createUrl('panel', 'index') ?>" class="mc-header-menu--item painel">
+                <p class="label"> <?php i::_e('Painel de controle') ?> </p>      
+            </a> 
+        </li>
+        <?php $this->applyTemplateHook('mc-entity-menu-mobile','end'); ?>
+    </ul>
+    <?php $this->applyTemplateHook('mc-entity-menu-mobile','after'); ?>
+</div>

components/mc-header-menu/texts.php

@@ -0,0 +1,5 @@
+<?php
+use MapasCulturais\i;
+
+return [
+];

components/panel--nav/README.md

@@ -0,0 +1,3 @@
+# Componente `<panel--nav>`
+
+Menu de navegação do painel