danielroe.dev / ripple-framework
[READ-ONLY] Mirror of https://github.com/danielroe/ripple-framework. Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

Merge pull request #530 from dpc-sdp/feature/R20-348-primary-nav-feedback

[R20-348] primary nav design feedback

author
David Featherston committer
GitHub date (Apr 6, 2023, 12:54 AM UTC) commit 82dfe59e parent eda4dda5
+61 -25
+6 -2
packages/ripple-ui-core/src/components/primary-nav/RplPrimaryNav.vue
··· 80 80 deactivateFocusTrap() 81 81 }) 82 82 83 - const toggleNavItem = (level: 1 | 2 | 3, item: IRplPrimaryNavItem) => { 83 + const toggleNavItem = ( 84 + level: 1 | 2 | 3, 85 + item: IRplPrimaryNavItem, 86 + open: boolean 87 + ) => { 84 88 // Item needs to be made active 85 89 if (activeNavItems.value['level' + level]?.id !== item?.id) { 86 90 activeNavItems.value['level' + level] = item ··· 96 100 isSearchActive.value = false 97 101 98 102 // If the target item is now active, make sure the mega nav is also active 99 - isMegaNavActive.value = activeNavItems.value.level1?.id == item.id 103 + isMegaNavActive.value = open || activeNavItems.value.level1?.id == item.id 100 104 101 105 // Clear any active sub menus 102 106 activeNavItems.value.level2 = undefined
+10 -6
packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.css
··· 224 224 225 225 .rpl-primary-nav__mega-menu-back-button { 226 226 display: flex; 227 - align-items: center; 227 + align-items: flex-start; 228 228 margin-bottom: var(--rpl-sp-8); 229 229 text-align: left; 230 230 cursor: pointer; ··· 247 247 } 248 248 249 249 .rpl-icon { 250 - transform: translateY(-1px); 250 + margin-top: var(--rpl-sp-1); 251 251 } 252 252 } 253 253 ··· 384 384 &:hover, 385 385 &:active { 386 386 &::after { 387 + --local-divider-height: var(--rpl-border-2); 388 + 387 389 display: block; 388 - height: 2px; 390 + height: var(--local-divider-height); 389 391 background-color: var(--rpl-clr-type-primary-contrast); 390 392 } 391 393 } ··· 411 413 transform: none; 412 414 } 413 415 414 - .rpl-primary-nav__mega-menu-action:active &, 415 - .rpl-primary-nav__mega-menu-action--active & { 416 - transform: translateX(var(--rpl-sp-3)); 416 + @media (--rpl-bp-l) { 417 + .rpl-primary-nav__mega-menu-action:active &, 418 + .rpl-primary-nav__mega-menu-action--active & { 419 + transform: translateX(var(--rpl-sp-3)); 420 + } 417 421 } 418 422 } 419 423
+19 -9
packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenu.vue
··· 1 1 <script setup lang="ts"> 2 - import { computed } from 'vue' 2 + import { computed, useSlots } from 'vue' 3 3 import RplPrimaryNavBackButton from './RplPrimaryNavMegaMenuBackButton.vue' 4 4 import RplPrimaryNavMegaMenuList from './RplPrimaryNavMegaMenuList.vue' 5 5 import RplPrimaryNavQuickExit from '../quick-exit/RplPrimaryNavQuickExit.vue' 6 - import { IRplPrimaryNavItem, IRplPrimaryNavActiveItems } from '../../constants' 6 + import { 7 + IRplPrimaryNavItem, 8 + IRplPrimaryNavActiveItems, 9 + IRplPrimaryNavToggleItemOptions 10 + } from '../../constants' 7 11 8 12 interface Props { 9 13 items: IRplPrimaryNavItem[] 10 14 showQuickExit: boolean 11 15 activeNavItems: IRplPrimaryNavActiveItems 12 - toggleItem: (level: 1 | 2 | 3, item: IRplPrimaryNavItem) => void 16 + toggleItem: (...args: IRplPrimaryNavToggleItemOptions) => void 13 17 } 14 18 15 19 const props = withDefaults(defineProps<Props>(), {}) 20 + 21 + const slots = useSlots() 16 22 17 23 const currentLevel = computed(() => { 18 24 if (!props.activeNavItems.level1) { ··· 30 36 return 4 31 37 }) 32 38 39 + const hasUserActions = computed(() => { 40 + return slots.userAction && slots?.userAction()[0].children?.length 41 + }) 42 + 33 43 const backButtonHandler = () => { 34 44 // Go back to level 3 35 45 if (currentLevel.value == 4 && props.activeNavItems.level3) { ··· 43 53 44 54 // Go back to level 1 45 55 else if (currentLevel.value == 2 && props.activeNavItems.level1) { 46 - props.toggleItem(1, props.activeNavItems.level1) 56 + props.toggleItem(1, props.activeNavItems.level1, true) 47 57 } 48 58 } 49 59 </script> ··· 56 66 `" 57 67 > 58 68 <!-- Quick links (Quick exit / User action slot) --> 59 - <ul class="rpl-primary-nav__mega-menu-quick-links"> 69 + <ul 70 + v-if="showQuickExit || hasUserActions" 71 + class="rpl-primary-nav__mega-menu-quick-links" 72 + > 60 73 <li v-if="showQuickExit"><RplPrimaryNavQuickExit /></li> 61 - <li 62 - v-if="$slots.userAction && $slots?.userAction()[0].children?.length" 63 - class="rpl-primary-nav__mega-menu-user-action" 64 - > 74 + <li v-if="hasUserActions" class="rpl-primary-nav__mega-menu-user-action"> 65 75 <slot name="userAction"></slot> 66 76 </li> 67 77 </ul>
+6 -2
packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenuAction.vue
··· 1 1 <script setup lang="ts"> 2 2 import { computed } from 'vue' 3 - import { IRplPrimaryNavItem, IRplPrimaryNavActiveItems } from '../../constants' 3 + import { 4 + IRplPrimaryNavItem, 5 + IRplPrimaryNavActiveItems, 6 + IRplPrimaryNavToggleItemOptions 7 + } from '../../constants' 4 8 import RplIcon from '../../../icon/RplIcon.vue' 5 9 6 10 interface Props { ··· 8 12 type: 'toggle' | 'link' 9 13 level?: 1 | 2 | 3 | 4 10 14 activeNavItems?: IRplPrimaryNavActiveItems 11 - toggleItem?: (level: 1 | 2 | 3, item: IRplPrimaryNavItem) => void 15 + toggleItem?: (...args: IRplPrimaryNavToggleItemOptions) => void 12 16 } 13 17 14 18 const props = withDefaults(defineProps<Props>(), {
+6 -2
packages/ripple-ui-core/src/components/primary-nav/components/mega-menu/RplPrimaryNavMegaMenuList.vue
··· 1 1 <script setup lang="ts"> 2 2 import RplIcon from '../../../icon/RplIcon.vue' 3 3 import RplPrimaryNavMegaMenuAction from './RplPrimaryNavMegaMenuAction.vue' 4 - import { IRplPrimaryNavItem, IRplPrimaryNavActiveItems } from '../../constants' 4 + import { 5 + IRplPrimaryNavItem, 6 + IRplPrimaryNavActiveItems, 7 + IRplPrimaryNavToggleItemOptions 8 + } from '../../constants' 5 9 6 10 interface Props { 7 11 parent?: IRplPrimaryNavItem 8 12 items: IRplPrimaryNavItem[] 9 13 level: 1 | 2 | 3 | 4 10 14 activeNavItems: IRplPrimaryNavActiveItems 11 - toggleItem?: (level: 1 | 2 | 3, item: IRplPrimaryNavItem) => void 15 + toggleItem?: (...args: IRplPrimaryNavToggleItemOptions) => void 12 16 } 13 17 14 18 withDefaults(defineProps<Props>(), {
+8 -4
packages/ripple-ui-core/src/components/primary-nav/components/nav-bar/RplPrimaryNavBar.vue
··· 4 4 import { 5 5 IRplPrimaryNavLogo, 6 6 IRplPrimaryNavItem, 7 - IRplPrimaryNavActiveItems 7 + IRplPrimaryNavActiveItems, 8 + IRplPrimaryNavToggleItemOptions 8 9 } from '../../constants' 9 10 10 11 interface Props { ··· 17 18 isSearchActive: boolean 18 19 activeNavItems: IRplPrimaryNavActiveItems 19 20 toggleMobileMenu: () => void 20 - toggleItem: (level: 1 | 2 | 3, item: IRplPrimaryNavItem) => void 21 + toggleItem: (...args: IRplPrimaryNavToggleItemOptions) => void 21 22 toggleSearch: () => void 22 23 } 23 24 24 - defineProps<Props>() 25 + const props = defineProps<Props>() 26 + 27 + const isItemActive = (item: IRplPrimaryNavItem) => 28 + props.activeNavItems.level1?.id == item.id 25 29 </script> 26 30 27 31 <template> ··· 113 117 v-if="item.items" 114 118 type="toggle" 115 119 :href="item.url" 116 - :active="activeNavItems.level1?.id == item.id" 120 + :active="isItemActive(item)" 117 121 @click="toggleItem(1, item)" 118 122 > 119 123 <span>{{ item.text }}</span
+6
packages/ripple-ui-core/src/components/primary-nav/constants.ts
··· 18 18 level2?: IRplPrimaryNavItem 19 19 level3?: IRplPrimaryNavItem 20 20 } 21 + 22 + export type IRplPrimaryNavToggleItemOptions = [ 23 + level: 1 | 2 | 3, 24 + item: IRplPrimaryNavItem, 25 + open?: boolean 26 + ]