@npm_leadtech/legal-lib-components 7.12.16 → 7.12.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +94 -48
  2. package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +94 -48
  3. package/dist/src/components/organisms/NavMenu/NavMenu.js +2 -2
  4. package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +88 -74
  5. package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +88 -74
  6. package/dist/src/components/organisms/NavMenu/NavMenu.tsx +6 -6
  7. package/package.json +1 -1
package/dist/src/components/organisms/MenuItems/MenuItems.styled.js CHANGED
@@ -385,7 +385,7 @@ export const MenuItemsStyled = styled.div `
385
385
  }
386
386
 
387
387
  .--is-open .--is-mobile .navigation-pane {
388
- &__wrapper {
388
+ .navigation-pane__wrapper {
389
389
  width: 100%;
390
390
  margin-top: 3rem;
391
391
  left: 0;
@@ -484,70 +484,107 @@ export const MenuItemsStyled = styled.div `
484
484
  }
485
485
  }
486
486
 
487
- .--is-open .--is-mobile.navigation-pane {
488
- .products__list {
489
- padding: 0;
490
- position: static;
491
- box-shadow: none;
492
- visibility: visible;
493
- display: flex;
494
- }
487
+ .--is-open {
488
+ .--is-mobile {
489
+ .navigation-pane {
490
+ .navigation-pane__wrapper {
491
+ width: 100%;
492
+ margin-top: 3rem;
493
+ left: 0;
494
+ background: var(--others-white);
495
+ position: fixed;
496
+ box-shadow: var(--box-shadow-menu);
497
+ overflow: auto;
498
+ height: calc(100% - 65px);
499
+ z-index: 100;
500
+ }
501
+ }
495
502
 
496
- .products__list__section-container {
497
- padding-right: 0;
498
- }
503
+ .search {
504
+ padding-right: 1.5rem;
505
+ padding-left: 1.5rem;
506
+ }
499
507
 
500
- .products__list__section__li {
501
- padding-right: 1.5rem;
502
- padding-left: 1.5rem;
503
- margin-top: 1rem;
508
+ .navigation-pane__user-menu {
509
+ display: flex;
510
+ flex-flow: row nowrap;
511
+ justify-content: center;
512
+ align-content: center;
513
+ padding: 1.5rem 0;
514
+ margin: 0 1rem;
504
515
 
505
- &.all-item {
506
- font-weight: bold;
516
+ .log-in {
517
+ min-width: 120px;
518
+ margin-right: 0.5rem;
519
+ }
507
520
  }
508
521
 
509
- &:last-child {
510
- margin-bottom: 1.5rem;
522
+ .navigation-pane__ratafia {
523
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
524
+
525
+ .navigation-pane__ratafia__title {
526
+ display: flex;
527
+ justify-content: start;
528
+ align-items: center;
529
+ gap: 0.25rem;
530
+ }
511
531
  }
512
- }
513
532
 
514
- .navigation-pane__resources {
515
- .navigation-pane__help,
516
- p {
517
- padding: 0.25rem 0.5rem;
533
+ .navigation-pane__esignature {
534
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
518
535
  }
519
- }
520
536
 
521
- .help__list,
522
- .resources__list {
523
- .menu-items-li {
524
- display: block;
537
+ .navigation-pane__user-name {
538
+ margin-right: 1rem;
539
+ font-weight: bold;
540
+ text-overflow: ellipsis;
541
+ overflow: hidden;
542
+ white-space: nowrap;
543
+ width: 8rem;
544
+ color: var(--primary-main-light-5);
545
+ padding: 0.5rem 1rem;
546
+ border-radius: var(--s-border-radius);
547
+ background-color: var(--neutral-neutral-6);
548
+ }
549
+
550
+ .navigation-pane__products,
551
+ .navigation-pane__help,
552
+ .navigation-pane__resources {
553
+ p {
554
+ font-weight: bold;
525
555
 
526
- a {
527
- padding: 0.25rem 0.5rem;
556
+ img {
557
+ display: none;
558
+ }
528
559
  }
529
- }
530
- }
531
560
 
532
- .menu-section-title-container {
533
- padding-right: 1.5rem;
534
- padding-left: 1.5rem;
535
- > svg {
536
- path {
537
- fill: var(--primary);
561
+ li {
562
+ margin-top: 1rem;
563
+
564
+ &:last-child {
565
+ margin-bottom: 1.5rem;
566
+ }
538
567
  }
539
568
  }
540
- .jumbotron__title {
541
- margin-left: 1rem;
569
+
570
+ .navigation-pane__help {
571
+ padding: 1.5rem 0;
572
+ margin: 0 1.5rem;
573
+ border-top: 1px solid var(--neutral-neutral-4);
542
574
  }
543
- }
544
575
 
545
- .menu-section-title__icon {
546
- width: 1.5rem;
547
- }
576
+ .navigation-pane__products__title {
577
+ display: none;
578
+ }
548
579
 
549
- .menu-items-li {
550
- display: none;
580
+ .navigation-pane__resources {
581
+ display: flex;
582
+ flex-direction: column;
583
+ align-items: flex-start;
584
+ padding: 1.5rem 0 0 0;
585
+ margin: 0 1.5rem 1.5rem 1.5rem;
586
+ border-top: 1px solid var(--neutral-neutral-4);
587
+ }
551
588
  }
552
589
  }
553
590
 
@@ -563,6 +600,15 @@ export const MenuItemsStyled = styled.div `
563
600
  .navigation-pane__wrapper {
564
601
  display: flex;
565
602
  flex-direction: column;
603
+ width: 100%;
604
+ margin-top: 3rem;
605
+ left: 0;
606
+ background: var(--others-white);
607
+ position: fixed;
608
+ box-shadow: var(--box-shadow-menu);
609
+ overflow: auto;
610
+ height: calc(100% - 65px);
611
+ z-index: 100;
566
612
 
567
613
  > div:not(
568
614
  .navigation-pane__link,
package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts CHANGED
@@ -386,7 +386,7 @@ export const MenuItemsStyled = styled.div`
386
386
  }
387
387
 
388
388
  .--is-open .--is-mobile .navigation-pane {
389
- &__wrapper {
389
+ .navigation-pane__wrapper {
390
390
  width: 100%;
391
391
  margin-top: 3rem;
392
392
  left: 0;
@@ -485,70 +485,107 @@ export const MenuItemsStyled = styled.div`
485
485
  }
486
486
  }
487
487
 
488
- .--is-open .--is-mobile.navigation-pane {
489
- .products__list {
490
- padding: 0;
491
- position: static;
492
- box-shadow: none;
493
- visibility: visible;
494
- display: flex;
495
- }
488
+ .--is-open {
489
+ .--is-mobile {
490
+ .navigation-pane {
491
+ .navigation-pane__wrapper {
492
+ width: 100%;
493
+ margin-top: 3rem;
494
+ left: 0;
495
+ background: var(--others-white);
496
+ position: fixed;
497
+ box-shadow: var(--box-shadow-menu);
498
+ overflow: auto;
499
+ height: calc(100% - 65px);
500
+ z-index: 100;
501
+ }
502
+ }
496
503
 
497
- .products__list__section-container {
498
- padding-right: 0;
499
- }
504
+ .search {
505
+ padding-right: 1.5rem;
506
+ padding-left: 1.5rem;
507
+ }
500
508
 
501
- .products__list__section__li {
502
- padding-right: 1.5rem;
503
- padding-left: 1.5rem;
504
- margin-top: 1rem;
509
+ .navigation-pane__user-menu {
510
+ display: flex;
511
+ flex-flow: row nowrap;
512
+ justify-content: center;
513
+ align-content: center;
514
+ padding: 1.5rem 0;
515
+ margin: 0 1rem;
505
516
 
506
- &.all-item {
507
- font-weight: bold;
517
+ .log-in {
518
+ min-width: 120px;
519
+ margin-right: 0.5rem;
520
+ }
508
521
  }
509
522
 
510
- &:last-child {
511
- margin-bottom: 1.5rem;
523
+ .navigation-pane__ratafia {
524
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
525
+
526
+ .navigation-pane__ratafia__title {
527
+ display: flex;
528
+ justify-content: start;
529
+ align-items: center;
530
+ gap: 0.25rem;
531
+ }
512
532
  }
513
- }
514
533
 
515
- .navigation-pane__resources {
516
- .navigation-pane__help,
517
- p {
518
- padding: 0.25rem 0.5rem;
534
+ .navigation-pane__esignature {
535
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
519
536
  }
520
- }
521
537
 
522
- .help__list,
523
- .resources__list {
524
- .menu-items-li {
525
- display: block;
538
+ .navigation-pane__user-name {
539
+ margin-right: 1rem;
540
+ font-weight: bold;
541
+ text-overflow: ellipsis;
542
+ overflow: hidden;
543
+ white-space: nowrap;
544
+ width: 8rem;
545
+ color: var(--primary-main-light-5);
546
+ padding: 0.5rem 1rem;
547
+ border-radius: var(--s-border-radius);
548
+ background-color: var(--neutral-neutral-6);
549
+ }
550
+
551
+ .navigation-pane__products,
552
+ .navigation-pane__help,
553
+ .navigation-pane__resources {
554
+ p {
555
+ font-weight: bold;
526
556
 
527
- a {
528
- padding: 0.25rem 0.5rem;
557
+ img {
558
+ display: none;
559
+ }
529
560
  }
530
- }
531
- }
532
561
 
533
- .menu-section-title-container {
534
- padding-right: 1.5rem;
535
- padding-left: 1.5rem;
536
- > svg {
537
- path {
538
- fill: var(--primary);
562
+ li {
563
+ margin-top: 1rem;
564
+
565
+ &:last-child {
566
+ margin-bottom: 1.5rem;
567
+ }
539
568
  }
540
569
  }
541
- .jumbotron__title {
542
- margin-left: 1rem;
570
+
571
+ .navigation-pane__help {
572
+ padding: 1.5rem 0;
573
+ margin: 0 1.5rem;
574
+ border-top: 1px solid var(--neutral-neutral-4);
543
575
  }
544
- }
545
576
 
546
- .menu-section-title__icon {
547
- width: 1.5rem;
548
- }
577
+ .navigation-pane__products__title {
578
+ display: none;
579
+ }
549
580
 
550
- .menu-items-li {
551
- display: none;
581
+ .navigation-pane__resources {
582
+ display: flex;
583
+ flex-direction: column;
584
+ align-items: flex-start;
585
+ padding: 1.5rem 0 0 0;
586
+ margin: 0 1.5rem 1.5rem 1.5rem;
587
+ border-top: 1px solid var(--neutral-neutral-4);
588
+ }
552
589
  }
553
590
  }
554
591
 
@@ -564,6 +601,15 @@ export const MenuItemsStyled = styled.div`
564
601
  .navigation-pane__wrapper {
565
602
  display: flex;
566
603
  flex-direction: column;
604
+ width: 100%;
605
+ margin-top: 3rem;
606
+ left: 0;
607
+ background: var(--others-white);
608
+ position: fixed;
609
+ box-shadow: var(--box-shadow-menu);
610
+ overflow: auto;
611
+ height: calc(100% - 65px);
612
+ z-index: 100;
567
613
 
568
614
  > div:not(
569
615
  .navigation-pane__link,
package/dist/src/components/organisms/NavMenu/NavMenu.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { LanguageSelector } from '../LanguageSelector';
3
3
  import { MenuItems } from '../MenuItems';
4
4
  import { NavMenuStyled } from './NavMenu.styled';
@@ -6,5 +6,5 @@ import { NavMobileContactBar } from '../../molecules/NavMobileContactBar';
6
6
  import { PhoneIcon } from '../../../../images/componentsSvg/PhoneIcon';
7
7
  import { SearchBar } from '../../../components/molecules/SearchBar/SearchBar';
8
8
  export const NavMenu = ({ isLeftNavHidden, isHeaderProductsHidden, isSearchBarHidden, isResourcesHidden, showHeaderPhone, toggleMenuOpen, isMenuOpen, languageSelectorProps, configVars, searchableProducts, finalMenu, userActions, menuStrings, routes, searchBarTexts, sitePhone, handleResultClick, languageSelectorConfigEnabled, isJonSnow, isMobile, triggerMenuClose, triggerMenuOpen, setCookiePolicyFunc, navMenuItems, extraMenu }) => {
9
- return (_jsx(_Fragment, { children: isMobile ? (_jsxs(NavMenuStyled, { itemScope: true, itemType: 'https://www.schema.org/SiteNavigationElement', className: `navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [_jsx("div", { onClick: toggleMenuOpen, onKeyDown: toggleMenuOpen, className: 'navigation-pane__trigger sans-serif --small', children: !isMenuOpen ? triggerMenuOpen : triggerMenuClose }), isMenuOpen && (_jsxs("div", { className: 'navigation-pane__wrapper', children: [userActions, !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }), !isJonSnow && _jsx(NavMobileContactBar, { phone: sitePhone })] }))] })) : (_jsxs(NavMenuStyled, { className: `navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [!isLeftNavHidden && (_jsx("div", { className: 'left-nav', children: _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }) })), _jsxs("div", { className: 'right-nav', children: [showHeaderPhone && (_jsxs("div", { className: 'header-phone', children: [_jsx(PhoneIcon, {}), _jsxs("b", { children: [sitePhone, " "] })] })), !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), languageSelectorConfigEnabled && languageSelectorProps && _jsx(LanguageSelector, { ...languageSelectorProps }), userActions] })] })) }));
9
+ return (_jsx(NavMenuStyled, { children: isMobile ? (_jsxs("nav", { itemScope: true, itemType: 'https://www.schema.org/SiteNavigationElement', className: `navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [_jsx("div", { onClick: toggleMenuOpen, onKeyDown: toggleMenuOpen, className: 'navigation-pane__trigger sans-serif --small', children: !isMenuOpen ? triggerMenuOpen : triggerMenuClose }), isMenuOpen && (_jsxs("div", { className: 'navigation-pane__wrapper', children: [userActions, !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }), !isJonSnow && _jsx(NavMobileContactBar, { phone: sitePhone })] }))] })) : (_jsxs("nav", { className: `navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`, children: [!isLeftNavHidden && (_jsx("div", { className: 'left-nav', children: _jsx(MenuItems, { hasProducts: !isHeaderProductsHidden, isResourcesHidden: isResourcesHidden, seeAllDocumentsText: menuStrings, setCookiePolicyFunc: setCookiePolicyFunc, routes: routes, finalMenu: finalMenu, isMobile: isMobile, configVars: configVars, navMenuItems: navMenuItems, extraMenu: extraMenu }) })), _jsxs("div", { className: 'right-nav', children: [showHeaderPhone && (_jsxs("div", { className: 'header-phone', children: [_jsx(PhoneIcon, {}), _jsxs("b", { children: [sitePhone, " "] })] })), !isSearchBarHidden && (_jsx(SearchBar, { products: searchableProducts, searchBarTexts: searchBarTexts, routes: routes, handleResultClick: handleResultClick })), languageSelectorConfigEnabled && languageSelectorProps && _jsx(LanguageSelector, { ...languageSelectorProps }), userActions] })] })) }));
10
10
  };
package/dist/src/components/organisms/NavMenu/NavMenu.styled.js CHANGED
@@ -365,102 +365,107 @@ export const NavMenuStyled = styled.nav `
365
365
  }
366
366
  }
367
367
 
368
- .--is-open .--is-mobile .navigation-pane {
369
- .navigation-pane__wrapper {
370
- width: 100%;
371
- margin-top: 3rem;
372
- left: 0;
373
- background: var(--others-white);
374
- position: fixed;
375
- box-shadow: var(--box-shadow-menu);
376
- overflow: auto;
377
- height: calc(100% - 65px);
378
- z-index: 100;
368
+ .--is-open {
369
+ .--is-mobile {
370
+ .navigation-pane {
371
+ .navigation-pane__wrapper {
372
+ width: 100%;
373
+ margin-top: 3rem;
374
+ left: 0;
375
+ background: var(--others-white);
376
+ position: fixed;
377
+ box-shadow: var(--box-shadow-menu);
378
+ overflow: auto;
379
+ height: calc(100% - 65px);
380
+ z-index: 100;
381
+ }
382
+ }
379
383
 
380
384
  .search {
381
385
  padding-right: 1.5rem;
382
386
  padding-left: 1.5rem;
383
387
  }
384
- }
385
388
 
386
- &__user-menu {
387
- display: flex;
388
- flex-flow: row nowrap;
389
- justify-content: center;
390
- align-content: center;
391
- padding: 1.5rem 0;
392
- margin: 0 1rem;
389
+ .navigation-pane__user-menu {
390
+ display: flex;
391
+ flex-flow: row nowrap;
392
+ justify-content: center;
393
+ align-content: center;
394
+ padding: 1.5rem 0;
395
+ margin: 0 1rem;
393
396
 
394
- .log-in {
395
- min-width: 120px;
396
- margin-right: 0.5rem;
397
+ .log-in {
398
+ min-width: 120px;
399
+ margin-right: 0.5rem;
400
+ }
397
401
  }
398
- }
399
402
 
400
- &__ratafia {
401
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
402
- &__title {
403
- display: flex;
404
- justify-content: start;
405
- align-items: center;
406
- gap: 0.25rem;
407
- }
408
- }
403
+ .navigation-pane__ratafia {
404
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
409
405
 
410
- &__esignature {
411
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
412
- }
406
+ .navigation-pane__ratafia__title {
407
+ display: flex;
408
+ justify-content: start;
409
+ align-items: center;
410
+ gap: 0.25rem;
411
+ }
412
+ }
413
413
 
414
- &__user-name {
415
- margin-right: 1rem;
416
- font-weight: bold;
417
- text-overflow: ellipsis;
418
- overflow: hidden;
419
- white-space: nowrap;
420
- width: 8rem;
421
- color: var(--primary-main-light-5);
422
- padding: 0.5rem 1rem;
423
- border-radius: var(--s-border-radius);
424
- background-color: var(--neutral-neutral-6);
425
- }
414
+ .navigation-pane__esignature {
415
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
416
+ }
426
417
 
427
- &__products,
428
- &__help,
429
- &__resources {
430
- p {
418
+ .navigation-pane__user-name {
419
+ margin-right: 1rem;
431
420
  font-weight: bold;
421
+ text-overflow: ellipsis;
422
+ overflow: hidden;
423
+ white-space: nowrap;
424
+ width: 8rem;
425
+ color: var(--primary-main-light-5);
426
+ padding: 0.5rem 1rem;
427
+ border-radius: var(--s-border-radius);
428
+ background-color: var(--neutral-neutral-6);
429
+ }
432
430
 
433
- img {
434
- display: none;
431
+ .navigation-pane__products,
432
+ .navigation-pane__help,
433
+ .navigation-pane__resources {
434
+ p {
435
+ font-weight: bold;
436
+
437
+ img {
438
+ display: none;
439
+ }
435
440
  }
436
- }
437
441
 
438
- li {
439
- margin-top: 1rem;
442
+ li {
443
+ margin-top: 1rem;
440
444
 
441
- &:last-child {
442
- margin-bottom: 1.5rem;
445
+ &:last-child {
446
+ margin-bottom: 1.5rem;
447
+ }
443
448
  }
444
449
  }
445
- }
446
450
 
447
- &__help {
448
- padding: 1.5rem 0;
449
- margin: 0 1.5rem;
450
- border-top: 1px solid var(--neutral-neutral-4);
451
- }
451
+ .navigation-pane__help {
452
+ padding: 1.5rem 0;
453
+ margin: 0 1.5rem;
454
+ border-top: 1px solid var(--neutral-neutral-4);
455
+ }
452
456
 
453
- &__products__title {
454
- display: none;
455
- }
457
+ .navigation-pane__products__title {
458
+ display: none;
459
+ }
456
460
 
457
- &__resources {
458
- display: flex;
459
- flex-direction: column;
460
- align-items: flex-start;
461
- padding: 1.5rem 0 0 0;
462
- margin: 0 1.5rem 1.5rem 1.5rem;
463
- border-top: 1px solid var(--neutral-neutral-4);
461
+ .navigation-pane__resources {
462
+ display: flex;
463
+ flex-direction: column;
464
+ align-items: flex-start;
465
+ padding: 1.5rem 0 0 0;
466
+ margin: 0 1.5rem 1.5rem 1.5rem;
467
+ border-top: 1px solid var(--neutral-neutral-4);
468
+ }
464
469
  }
465
470
  }
466
471
 
@@ -543,6 +548,15 @@ export const NavMenuStyled = styled.nav `
543
548
  .navigation-pane__wrapper {
544
549
  display: flex;
545
550
  flex-direction: column;
551
+ width: 100%;
552
+ margin-top: 3rem;
553
+ left: 0;
554
+ background: var(--others-white);
555
+ position: fixed;
556
+ box-shadow: var(--box-shadow-menu);
557
+ overflow: auto;
558
+ height: calc(100% - 65px);
559
+ z-index: 100;
546
560
 
547
561
  > div:not(.navigation-pane__ratafia, .navigation-pane__esignature, .navigation-pane__products) {
548
562
  ${Array.from({ length: 10 }, (_, i) => `
package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts CHANGED
@@ -366,102 +366,107 @@ export const NavMenuStyled = styled.nav`
366
366
  }
367
367
  }
368
368
 
369
- .--is-open .--is-mobile .navigation-pane {
370
- .navigation-pane__wrapper {
371
- width: 100%;
372
- margin-top: 3rem;
373
- left: 0;
374
- background: var(--others-white);
375
- position: fixed;
376
- box-shadow: var(--box-shadow-menu);
377
- overflow: auto;
378
- height: calc(100% - 65px);
379
- z-index: 100;
369
+ .--is-open {
370
+ .--is-mobile {
371
+ .navigation-pane {
372
+ .navigation-pane__wrapper {
373
+ width: 100%;
374
+ margin-top: 3rem;
375
+ left: 0;
376
+ background: var(--others-white);
377
+ position: fixed;
378
+ box-shadow: var(--box-shadow-menu);
379
+ overflow: auto;
380
+ height: calc(100% - 65px);
381
+ z-index: 100;
382
+ }
383
+ }
380
384
 
381
385
  .search {
382
386
  padding-right: 1.5rem;
383
387
  padding-left: 1.5rem;
384
388
  }
385
- }
386
389
 
387
- &__user-menu {
388
- display: flex;
389
- flex-flow: row nowrap;
390
- justify-content: center;
391
- align-content: center;
392
- padding: 1.5rem 0;
393
- margin: 0 1rem;
390
+ .navigation-pane__user-menu {
391
+ display: flex;
392
+ flex-flow: row nowrap;
393
+ justify-content: center;
394
+ align-content: center;
395
+ padding: 1.5rem 0;
396
+ margin: 0 1rem;
394
397
 
395
- .log-in {
396
- min-width: 120px;
397
- margin-right: 0.5rem;
398
+ .log-in {
399
+ min-width: 120px;
400
+ margin-right: 0.5rem;
401
+ }
398
402
  }
399
- }
400
403
 
401
- &__ratafia {
402
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
403
- &__title {
404
- display: flex;
405
- justify-content: start;
406
- align-items: center;
407
- gap: 0.25rem;
408
- }
409
- }
404
+ .navigation-pane__ratafia {
405
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
410
406
 
411
- &__esignature {
412
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
413
- }
407
+ .navigation-pane__ratafia__title {
408
+ display: flex;
409
+ justify-content: start;
410
+ align-items: center;
411
+ gap: 0.25rem;
412
+ }
413
+ }
414
414
 
415
- &__user-name {
416
- margin-right: 1rem;
417
- font-weight: bold;
418
- text-overflow: ellipsis;
419
- overflow: hidden;
420
- white-space: nowrap;
421
- width: 8rem;
422
- color: var(--primary-main-light-5);
423
- padding: 0.5rem 1rem;
424
- border-radius: var(--s-border-radius);
425
- background-color: var(--neutral-neutral-6);
426
- }
415
+ .navigation-pane__esignature {
416
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
417
+ }
427
418
 
428
- &__products,
429
- &__help,
430
- &__resources {
431
- p {
419
+ .navigation-pane__user-name {
420
+ margin-right: 1rem;
432
421
  font-weight: bold;
422
+ text-overflow: ellipsis;
423
+ overflow: hidden;
424
+ white-space: nowrap;
425
+ width: 8rem;
426
+ color: var(--primary-main-light-5);
427
+ padding: 0.5rem 1rem;
428
+ border-radius: var(--s-border-radius);
429
+ background-color: var(--neutral-neutral-6);
430
+ }
433
431
 
434
- img {
435
- display: none;
432
+ .navigation-pane__products,
433
+ .navigation-pane__help,
434
+ .navigation-pane__resources {
435
+ p {
436
+ font-weight: bold;
437
+
438
+ img {
439
+ display: none;
440
+ }
436
441
  }
437
- }
438
442
 
439
- li {
440
- margin-top: 1rem;
443
+ li {
444
+ margin-top: 1rem;
441
445
 
442
- &:last-child {
443
- margin-bottom: 1.5rem;
446
+ &:last-child {
447
+ margin-bottom: 1.5rem;
448
+ }
444
449
  }
445
450
  }
446
- }
447
451
 
448
- &__help {
449
- padding: 1.5rem 0;
450
- margin: 0 1.5rem;
451
- border-top: 1px solid var(--neutral-neutral-4);
452
- }
452
+ .navigation-pane__help {
453
+ padding: 1.5rem 0;
454
+ margin: 0 1.5rem;
455
+ border-top: 1px solid var(--neutral-neutral-4);
456
+ }
453
457
 
454
- &__products__title {
455
- display: none;
456
- }
458
+ .navigation-pane__products__title {
459
+ display: none;
460
+ }
457
461
 
458
- &__resources {
459
- display: flex;
460
- flex-direction: column;
461
- align-items: flex-start;
462
- padding: 1.5rem 0 0 0;
463
- margin: 0 1.5rem 1.5rem 1.5rem;
464
- border-top: 1px solid var(--neutral-neutral-4);
462
+ .navigation-pane__resources {
463
+ display: flex;
464
+ flex-direction: column;
465
+ align-items: flex-start;
466
+ padding: 1.5rem 0 0 0;
467
+ margin: 0 1.5rem 1.5rem 1.5rem;
468
+ border-top: 1px solid var(--neutral-neutral-4);
469
+ }
465
470
  }
466
471
  }
467
472
 
@@ -544,6 +549,15 @@ export const NavMenuStyled = styled.nav`
544
549
  .navigation-pane__wrapper {
545
550
  display: flex;
546
551
  flex-direction: column;
552
+ width: 100%;
553
+ margin-top: 3rem;
554
+ left: 0;
555
+ background: var(--others-white);
556
+ position: fixed;
557
+ box-shadow: var(--box-shadow-menu);
558
+ overflow: auto;
559
+ height: calc(100% - 65px);
560
+ z-index: 100;
547
561
 
548
562
  > div:not(.navigation-pane__ratafia, .navigation-pane__esignature, .navigation-pane__products) {
549
563
  ${Array.from(
package/dist/src/components/organisms/NavMenu/NavMenu.tsx CHANGED
@@ -37,9 +37,9 @@ export const NavMenu: React.FC<NavMenuProps> = ({
37
37
  extraMenu
38
38
  }) => {
39
39
  return (
40
- <>
40
+ <NavMenuStyled>
41
41
  {isMobile ? (
42
- <NavMenuStyled
42
+ <nav
43
43
  itemScope
44
44
  itemType='https://www.schema.org/SiteNavigationElement'
45
45
  className={`navigation-pane --is-mobile ${isHeaderProductsHidden ? '--no-products' : ''}`}
@@ -77,9 +77,9 @@ export const NavMenu: React.FC<NavMenuProps> = ({
77
77
  {!isJonSnow && <NavMobileContactBar phone={sitePhone} />}
78
78
  </div>
79
79
  )}
80
- </NavMenuStyled>
80
+ </nav>
81
81
  ) : (
82
- <NavMenuStyled className={`navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`}>
82
+ <nav className={`navigation-pane --is-desktop ${isHeaderProductsHidden ? '--no-products' : ''}`}>
83
83
  {!isLeftNavHidden && (
84
84
  <div className='left-nav'>
85
85
  <MenuItems
@@ -114,8 +114,8 @@ export const NavMenu: React.FC<NavMenuProps> = ({
114
114
  {languageSelectorConfigEnabled && languageSelectorProps && <LanguageSelector {...languageSelectorProps} />}
115
115
  {userActions}
116
116
  </div>
117
- </NavMenuStyled>
117
+ </nav>
118
118
  )}
119
- </>
119
+ </NavMenuStyled>
120
120
  )
121
121
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.12.16",
3
+ "version": "7.12.18",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",