diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/dist/islands/main-menu.island.umd.js b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/dist/islands/main-menu.island.umd.js index 4af1483b8..9100de917 100644 --- a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/dist/islands/main-menu.island.umd.js +++ b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/dist/islands/main-menu.island.umd.js @@ -156,7 +156,7 @@ } @media (min-width: 992px) { - margin: 12px 10px 0 10px; + margin: 12px 10px 0 0; &:hover, &:focus, &:active { @@ -173,7 +173,6 @@ @media (min-width: 992px) { color: ${e=>e.open?"#ffffff":"#155f65"}; background-color: ${e=>e.open?"#F5FEFF":"transparent"}; - padding-bottom: ${e=>(e.level,"0")}; width: ${e=>0===e.level?"fit-content":"100%"}; padding-bottom: ${e=>0===e.level?"2rem":"0"}; border-radius: ${e=>0===e.level?"10px":"0"}; @@ -204,15 +203,17 @@ color: ${({level:e})=>"#2E2D29"}; font-weight: 400; font-size: 1.9rem; - padding: ${({level:e})=>0!=e?"0":"16px 0"}; + padding: ${({level:e})=>"16px 16px 16px 8px"}; + padding: ${({level:e})=>"16px 16px 2rem 16px"}; margin-bottom: ${({level:e,inTrail:t,isCurrent:r})=>0===e?"-6px":""}; &:hover, &:focus { - color: ${({level:e})=>0!=e?"#155F65":"#2E2D29"}; + color: ${({level:e})=>e>0?"#155F65":"#2E2D29"}; background-color: #F5FEFF; border-radius: 10px; - padding: ${({level:e})=>0!=e?"16px":"0"}; + padding: ${({level:e})=>"16px 16px 16px 8px"}; + padding: ${({level:e})=>"16px 16px 2rem 16px"}; } } `,un=Or.h2` diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/components/menu-level-0.tsx b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/components/menu-level-0.tsx deleted file mode 100644 index d1fb20c80..000000000 --- a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/components/menu-level-0.tsx +++ /dev/null @@ -1,53 +0,0 @@ -const MenuLevel0 = ({...props}) => { - return ( - - - {!isNoLink && - - {title} - - } - {isNoLink && - {title} - } - - {items && level === 0 ? ( - - ) : "" - } - - - {items && - - - - - {items.map(item => - - )} - - - - } - - ) - } - export default MenuLevel0; diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/main-menu.island.tsx b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/main-menu.island.tsx index c12572a04..12586be49 100644 --- a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/main-menu.island.tsx +++ b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/decoupled-menu/src/main-menu.island.tsx @@ -31,7 +31,7 @@ if (isBlueHeader.length === 0) { } -const TopList = styled.ul<{ open?: boolean }>` +const TopList = styled.ul<{ open?: boolean, level?: number }>` display: ${props => props.open ? "block" : "none"}; padding: ${props => props.open ? "225px 0 0 0" : "0"}; top: ${props => props.open ? "-225px" : "0"}; @@ -278,7 +278,7 @@ const Button = styled.button<{ open?: boolean }>` } @media (min-width: 992px) { - margin: 12px 10px 0 10px; + margin: 12px 10px 0 0; &:hover, &:focus, &:active { @@ -297,7 +297,6 @@ const MenuItemContainer = styled.div<{ open?: boolean, level?: number }>` @media (min-width: 992px) { color: ${props => props.open ? "#ffffff" : "#155f65"}; background-color: ${props => props.open ? "#F5FEFF" : "transparent"}; - padding-bottom: ${props => props.level === 0 ? "0" : "0"}; width: ${props => props.level === 0 ? "fit-content" : "100%"}; padding-bottom: ${props => props.level === 0 ? "2rem" : "0"}; border-radius: ${props => props.level === 0 ? "10px" : "0"}; @@ -330,15 +329,17 @@ const MenuLink = styled.a<{ isCurrent?: boolean, inTrail?: boolean, level?: numb color: ${({level}) => level != 0 ? "#2E2D29" : "#2E2D29"}; font-weight: 400; font-size: 1.9rem; - padding: ${({level}) => level != 0 ? "0" : "16px 0"}; + padding: ${({level}) => level > 0 ? "16px 16px 16px 8px" : "16px 16px 16px 8px"}; + padding: ${({level}) => level === 0 ? "16px 16px 2rem 16px" : "16px 16px 2rem 16px"}; margin-bottom: ${({level, inTrail, isCurrent}) => level === 0 ? (isCurrent ? "-6px" : (inTrail ? "-6px" : "-6px")) : ""}; &:hover, &:focus { - color: ${({level}) => level != 0 ? "#155F65" : "#2E2D29"}; + color: ${({level}) => level > 0 ? "#155F65" : "#2E2D29"}; background-color: #F5FEFF; border-radius: 10px; - padding: ${({level}) => level != 0 ? "16px" : "0"}; + padding: ${({level}) => level > 0 ? "16px 16px 16px 8px" : "16px 16px 16px 8px"}; + padding: ${({level}) => level === 0 ? "16px 16px 2rem 16px" : "16px 16px 2rem 16px"}; } } `