Skip to content

Commit

Permalink
[MWPW-159665] - Gnav redesign animations (#3234)
Browse files Browse the repository at this point in the history 
* MWPW-161082 [Base Implementation] Mobile Global Nav Redesign Rollout (#3092)

* basic functionality of mobile gnav

* Made the localnav sticky, and the gnav not sticky when there is a local nav

* Local nav now resides outside header to make it sticky correctly

* fixed a few small css details when opening and closing the mega menu

* render the mainmenu on non local nav pages and the brand icon on local nav pages on the mega menu

* don't show local nav unless it's in the right place

* Make mobile styles the default

* Mobile Gnav Redesign for Adobe Home (#3151)

* fix the popup showing up for a split second when the hamburger menu is first opened

* Undid the previous commit because it didn't work

* switched out animations to transitions for fedspopup

* Made section buttons have a margin while regular navlinks occupy the whole space

* Fixed section menu spacing

* Spacing of section after navlink on adobe home

* Like the previous commit but actually works

* divider line

* changed last of kind to last of type

* fixed divider spacing

* link spacing

* we need to pad the last nav link as well

* nav link font size

* rules apply only to the links not the sections

* fixed the selector for the previous commit

* I sure hope it works this time

* Fixed the navLinks in light mode

* Mobile gnav breadcrumbs new design (#3155)

* Breadcrumbs design change

* Hide breadcrumbs on first sidebar

* Fixing no breadcrumbs page

* Fixing css

* Fixing css for no breadcrumbs page

* Adding main menu placeholder (#3157)

* Adding main menu placeholder

* Avoiding replaceText if localNav

* Lint fix

* Keyboard navigation for mobile gnav redesign (#3158)

* Keyboard navigation for mobile gnav redesign

* close main menu on escape

* fixed lint issue

* Localnav design and event listeners (#3164)

* Localnav design and event listeners

* Lint fix

* Adding Overview title support

* Added animations for mobile redesign

* Polish animations

* Polish animations

* polish animations

* Resolved comment

---------

Co-authored-by: Raghav Sharma <118168183+sharmrj@users.noreply.github.com>
Co-authored-by: Raghav Sharma <raghavs@adobe.com>
Co-authored-by: Bandana Laishram <bandanalaishram@gmail.com>
  • Loading branch information
@Deva309 @sharmrj @bandana147
4 people committed Dec 13, 2024
1 parent 619065c commit 21e3253
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 27 deletions.
112 changes: 88 additions & 24 deletions libs/blocks/global-navigation/global-navigation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -760,8 +760,11 @@ header.new-nav .feds-nav-wrapper {
display: flex;
}

[dir = "rtl"] header.new-nav .feds-nav-wrapper {
translate: 200vw 0;
}

header.new-nav.local-nav .feds-nav-wrapper {
transition-duration: 0s;
visibility: hidden; /* we don't want to see the main menu on a local nav page */
}

Expand All @@ -771,6 +774,10 @@ header.new-nav .feds-nav-wrapper--expanded {
z-index: 2;
}

[dir = "rtl"] header.new-nav .feds-nav-wrapper--expanded {
translate: 0;
}

header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem:first-child {
padding-top: 25px;
}
Expand All @@ -787,14 +794,27 @@ header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem > bu
line-height: 25px;
border: none;
opacity:0;
transform: 12px 0;
animation: slideleft 0.3s ease, fadein 0.3s ease;
translate: -100px 0;
animation: slideleft 0.4s ease, fadein 0.2s ease;
animation-fill-mode: forwards;
padding: 15px 20px;
}

[dir = "rtl"] header.new-nav .feds-nav-wrapper--expanded .feds-nav > section.feds-navItem > button.feds-navLink {
translate: 100px 0;
animation: rtlslideleft 0.4s ease, fadein 0.2s ease;
animation-fill-mode: forwards;
margin: 3px 20px 3px 8px;
}

header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink {
animation: slideright 0.3s ease, fadeout 0.3s ease;
opacity: 0;
border: none;
animation: slideright 0.4s ease, fadeout 0.2s ease;
animation-fill-mode: forwards;
}

[dir = "rtl"] header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink {
animation: rtlslideright 0.4s ease, fadeout 0.2s ease;
animation-fill-mode: forwards;
}

Expand All @@ -804,6 +824,13 @@ header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink::after {
height: 9.179px;
transform: rotate(-45deg);
border-color: white;
right: 20px;
}

[dir = "rtl"] header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink::after {
transform: rotate(135deg);
right: unset;
left: 20px;
}

header.new-nav .feds-nav > .feds-navItem > a.feds-navLink {
Expand All @@ -819,9 +846,8 @@ header.new-nav .feds-nav > .feds-navItem > a.feds-navLink {

header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
position: fixed;
visibility: visible;
top: calc(-1 * var(--feds-height-nav));
left: 0;
visibility: visible;
width: 100%;
height: calc(var(--feds-height-nav) + 100%);
background-color: var(--feds-background-nav);
Expand All @@ -831,10 +857,9 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
* right after loading in, we see some feds-popups appear on the
* screen and fadeaway
*/
transition: translate 0.3s ease-out, opacity 0.3s ease;
translate: -200vw 0;
transition: translate 0.4s ease-out, opacity 0.2s ease;
translate: 300vw 0;
/* animation-fill-mode: forwards; */
z-index: 2;

display: grid;
grid-template-rows: 56px max-content auto 80px;
Expand All @@ -846,9 +871,22 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
"cta cta";
}

[dir = "rtl"] header.new-nav .feds-nav > section.feds-navItem > .feds-popup {
translate: -300vw 0;
}

header.new-nav.local-nav .feds-nav > section.feds-navItem > .feds-popup {
translate: 0;
}

header.new-nav .feds-nav > section.feds-navItem.feds-dropdown--active > .feds-popup {
translate: 0;
opacity: 1;
z-index: 2;
}

[dir = "rtl"] header.new-nav .feds-nav > section.feds-navItem.feds-dropdown--active > .feds-popup {
translate: 0;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar {
Expand All @@ -857,7 +895,13 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar {
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #EAEAEA;
padding-left: 20px;
padding: 0 20px;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar .close-icon {
width:14px;
height:14px;
cursor:pointer;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar .main-menu {
Expand All @@ -867,24 +911,35 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar .main-men
cursor: pointer;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar .main-menu svg {
translate: 0 2px;
margin-right: 7px;
}

[dir = "rtl"] header.new-nav .feds-nav > section.feds-navItem > .feds-popup .top-bar .main-menu svg {
transform: rotate(180deg);
margin-right: unset;
margin-left: 7px;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .title {
grid-area: title;
display: flex;
flex-direction: column;
border-bottom: 1px solid #EAEAEA;
padding-left:20px;
padding: 0 20px;
}
header.new-nav .feds-nav > section.feds-navItem > .feds-popup .title .breadcrumbs {
display: block; /* even if the actual breadcrumbs are display none, we need the space to visible for the mobile gnav */
height: 23px;
padding-top: 8px;
padding-top: 12px;
}
header.new-nav .feds-nav > section.feds-navItem > .feds-popup .title h7 {
height: 25px;
font-size: 28px;
font-weight: 700;
line-height: 25px;
padding-bottom: 24px;
padding-bottom: 29px;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs {
Expand All @@ -901,7 +956,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs button {
padding: 8px 20px;
white-space: normal;
font-weight: 700;
text-align: left;
text-align: unset;
}

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs button[aria-selected="true"] {
Expand All @@ -911,7 +966,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs button[aria-

header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content {
background-color: #f3f3f3;
padding: 24px 0 0 24px;
padding: 10px 13px 25px;
display: flex;
flex-direction: column;
gap: 28px;
Expand All @@ -923,7 +978,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content {
header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content a {
translate: 0 12px;
opacity: 0;
animation: slideup 0.3s ease, fadein 0.3s ease;
animation: slideup 0.6s ease, fadein 0.8s ease;
animation-fill-mode: forwards;
font-weight: 700;
}
Expand Down Expand Up @@ -1099,34 +1154,43 @@ header + .feds-localnav {
translate: 0 0;
}
to {
translate: 12px 0;
translate: -100px 0;
}
}

@keyframes rtlslideright {
from {
translate: 0 0;
}
to {
translate: 100px 0;
}
}

@keyframes slideleft {
from {
translate: 12px 0;
translate: -100px 0;
}
to {
translate: 0 0;
}
}

@keyframes slideup {
@keyframes rtlslideleft {
from {
translate: 0 12px;
translate: 100px 0;
}
to {
translate: 0 0;
}
}

@keyframes slidedown {
@keyframes slideup {
from {
translate: 0 0px;
translate: 0 40px;
}
to {
translate: 0 12px;
translate: 0 0;
}
}

Expand Down
2 changes: 1 addition & 1 deletion libs/blocks/global-navigation/global-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ class Gnav {
}

// eslint-disable-next-line no-return-assign
getOriginalTitle = (localNavItems) => this.originalTitle ||= localNavItems[0].querySelector('a').textContent.split('|');
getOriginalTitle = (localNavItems) => this.originalTitle ||= localNavItems[0]?.querySelector('a')?.textContent?.split('|');

setupUniversalNav = () => {
const meta = getMetadata('universal-nav')?.toLowerCase();
Expand Down
4 changes: 2 additions & 2 deletions libs/blocks/global-navigation/utilities/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
const CTA = popup.querySelector('.feds-cta')?.outerHTML ?? '';
const mainMenu = `
<span class="main-menu">
<svg xmlns="http://www.w3.org/2000/svg" style="translate:0 3px" width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M5.55579 1L1.09618 5.45961C1.05728 5.4985 1.0571 5.56151 1.09577 5.60062L5.51027 10.0661" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M5.55579 1L1.09618 5.45961C1.05728 5.4985 1.0571 5.56151 1.09577 5.60062L5.51027 10.0661" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>
{{main-menu}}
</span>
`;
Expand All @@ -424,7 +424,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) =
popup.innerHTML = `
<div class="top-bar">
${localnav ? brand : await replaceText(mainMenu, getFedsPlaceholderConfig())}
<span class="close-icon" style="width:11.5px;height:11.5px;padding:12px;cursor:pointer">
<span class="close-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M1.5 1L13 12.5" stroke="black" stroke-width="1.7037" stroke-linecap="round"/>
<path d="M13 1L1.5 12.5" stroke="black" stroke-width="1.7037" stroke-linecap="round"/>
Expand Down

0 comments on commit 21e3253

Please sign in to comment.