From 10ee44f09b3496fbaaf32342e19fb7f3f2494e47 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 13 Mar 2026 18:30:55 +0000 Subject: [PATCH] feat(MobileNavigation): add support for navigation subitems - Implement accordion-style expansion for items with children - Update isActive logic to recursively check subitems for active state - Fix activeItem prop default value to prevent TypeError - Add styles for subitems in both dark and light modes - Update documentation and unit tests to include subitem examples Co-authored-by: IhGori <73910233+IhGori@users.noreply.github.com> --- docs/.docgen/components-metadata.json | 4 +- .../mobile-navigation.md" | 20 ++- src/components/MobileNavigation.vue | 144 ++++++++++++++++-- src/tests/MobileNavigationSubitems.spec.ts | 91 +++++++++++ .../MobileNavigation.spec.ts.snap | 15 +- 5 files changed, 249 insertions(+), 25 deletions(-) create mode 100644 src/tests/MobileNavigationSubitems.spec.ts diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json index 5ef1b1c20..b56ed82f0 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 56eef9234..33d8e90d2 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 0a689d858..f3f85a04e 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 000000000..817bae6ad --- /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 369d7a97b..3571f094c 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`] = `
- - - +
+ + +
+
+ + +
+
+ + +