diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json index 5ef1b1c2..b56ed82f 100644 --- a/docs/.docgen/components-metadata.json +++ b/docs/.docgen/components-metadata.json @@ -7325,8 +7325,8 @@ "name": "object" }, "defaultValue": { - "func": true, - "value": "() => {}" + "func": false, + "value": "{}" } }, { diff --git "a/docs/components/navega\303\247\303\243o/mobile-navigation.md" "b/docs/components/navega\303\247\303\243o/mobile-navigation.md" index 56eef923..33d8e90d 100644 --- "a/docs/components/navega\303\247\303\243o/mobile-navigation.md" +++ "b/docs/components/navega\303\247\303\243o/mobile-navigation.md" @@ -104,10 +104,22 @@ const items = [ label: 'Vigilância sanitária', icon: 'shield-outline', type: 'route', - route: { - path: '/visa', - name: 'visa' - }, + items: [ + { + label: 'Categorias', + route: { + path: '/categories', + name: 'index-categories', + }, + }, + { + label: 'Processos', + route: { + path: '/processes', + name: 'index-processes', + }, + }, + ], }, { label: 'Central de marcação', diff --git a/src/components/MobileNavigation.vue b/src/components/MobileNavigation.vue index 0a689d85..f3f85a04 100644 --- a/src/components/MobileNavigation.vue +++ b/src/components/MobileNavigation.vue @@ -42,24 +42,73 @@
- - + +
+ + + {{ item.label }} +
+ + +
+
+ + + {{ item.label }} +
+ + +
- {{ item.label }} - +
+ + {{ subitem.label }} + +
+
@@ -144,7 +193,7 @@ const props = defineProps({ */ activeItem: { type: Object, - default: () => {}, + default: () => ({}), }, /** * Define as informações referentes ao usuário. O objeto deve seguir a assinatura: @@ -186,6 +235,7 @@ const emit = defineEmits([ const internalActiveItem = ref(props.activeItem); const openSidebar = ref(false); +const expandedItem = ref(null); const resolveMode = computed(() => { return (props.light) ? 'light' : 'dark'; @@ -219,9 +269,26 @@ const handleCloseSidebar = () => { openSidebar.value = false; }; -const isActive = (item) => isEqual(item, internalActiveItem.value); +const isActive = (item) => { + let hasActiveSubitem = false; + let hasActiveItem = false; + + if (!!item.items && item.items.length > 0) { + hasActiveSubitem = item.items.some(subitem => { + return isEqual(subitem, internalActiveItem.value); + }); + } + + hasActiveItem = isEqual(item, internalActiveItem.value); + return hasActiveSubitem || hasActiveItem; +}; const handleItemClick = (item) => { + if (item.items && item.items.length > 0) { + expandedItem.value = expandedItem.value === item.label ? null : item.label; + return; + } + if (isEmpty(props.activeItem)) { internalActiveItem.value = item; } @@ -327,11 +394,36 @@ const mustDisableExternalScrolls = (value) => { @include tokens.body-1; display: flex; align-items: center; + justify-content: space-between; padding: tokens.pYX(4, 5); border-radius: 10px; gap: 10px; background: none; transition: background 0.25s ease-in-out; + text-decoration: none; + + &--active { + font-weight: 700; + } + } + + &__sidebar-item-title { + display: flex; + align-items: center; + gap: 10px; + } + + &__subitems { + display: flex; + flex-direction: column; + gap: tokens.spacer(2); + padding: tokens.pTRBL(2, 0, 4, 10); + } + + &__sidebar-subitem { + @include tokens.body-2; + padding: tokens.py(2); + text-decoration: none; &--active { font-weight: 700; @@ -390,6 +482,8 @@ const mustDisableExternalScrolls = (value) => { } &__sidebar-item { + color: tokens.$n-0; + &--active { background: #576169; color: tokens.$n-0; @@ -398,6 +492,14 @@ const mustDisableExternalScrolls = (value) => { } } + &__sidebar-subitem { + color: tokens.$n-100; + + &--active { + color: tokens.$n-0; + } + } + &__sidebar-logout { color: tokens.$n-0; } @@ -425,6 +527,8 @@ const mustDisableExternalScrolls = (value) => { } &__sidebar-item { + color: tokens.$n-700; + &--active { background: var(--system-background-variant); color: var(--system-text-variant); @@ -432,6 +536,14 @@ const mustDisableExternalScrolls = (value) => { } } + &__sidebar-subitem { + color: tokens.$n-600; + + &--active { + color: var(--system-text-variant); + } + } + &__sidebar-logout { color: tokens.$n-700; } diff --git a/src/tests/MobileNavigationSubitems.spec.ts b/src/tests/MobileNavigationSubitems.spec.ts new file mode 100644 index 00000000..817bae6a --- /dev/null +++ b/src/tests/MobileNavigationSubitems.spec.ts @@ -0,0 +1,91 @@ +import { describe, test, expect } from 'vitest'; +import MobileNavigation from '../components/MobileNavigation.vue'; +import { mount } from '@vue/test-utils'; + +const mockedData = [ + { + label: 'Início', + icon: 'home-outline', + route: { + path: '/home', + name: 'home' + }, + }, + { + label: 'Agendamentos', + icon: 'calendar-outline', + items: [ + { + label: 'Categorias', + route: { + path: '/categories', + name: 'index-categories', + }, + }, + ], + }, +]; + +describe('MobileNavigation subitems', () => { + test('renders items with subitems correctly', async () => { + const wrapper = mount(MobileNavigation, { + global: { + stubs: { + 'cds-icon': true, + 'cds-avatar': true, + 'router-link': { template: '' }, + }, + }, + props: { + items: mockedData, + user: { + name: 'Joana Mendes', + role: 'Administradora', + } + }, + }); + + // Check if the parent item is rendered + expect(wrapper.text()).toContain('Agendamentos'); + + // Check if subitems are initially not rendered + expect(wrapper.text()).not.toContain('Categorias'); + + // Find the parent item with subitems and click it to expand + const parentItem = wrapper.findAll('.mobile-navigation__sidebar-item').filter(w => w.text().includes('Agendamentos'))[0]; + await parentItem.trigger('click'); + + // Check if subitems are now rendered + expect(wrapper.text()).toContain('Categorias'); + + // Check if isActive correctly identifies active parent when subitem is active + const subitem = wrapper.find('.mobile-navigation__sidebar-subitem'); + // We can't easily test router-link active state here without a real router, + // but we can test the isActive logic if we mount with an activeItem that is a subitem. + }); + + test('identifies active parent when subitem is active', async () => { + const subitem = mockedData[1].items[0]; + const wrapper = mount(MobileNavigation, { + global: { + stubs: { + 'cds-icon': true, + 'cds-avatar': true, + 'router-link': { template: '' }, + }, + }, + props: { + items: mockedData, + activeItem: subitem, + user: { + name: 'Joana Mendes', + role: 'Administradora', + } + }, + }); + + // The parent item "Agendamentos" should have the active class + const parentItem = wrapper.findAll('.mobile-navigation__sidebar-item').filter(w => w.text().includes('Agendamentos'))[0]; + expect(parentItem.classes()).toContain('mobile-navigation__sidebar-item--active'); + }); +}); diff --git a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap index 369d7a97..3571f094 100644 --- a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap +++ b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap @@ -20,9 +20,18 @@ exports[`MobileNavigation > renders correctly 1`] = `
- - - +
+ + +
+
+ + +
+
+ + +