- {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
-
- {% endif %}
+
+{% if _breadcrumbs is not empty %}
+
+ {% include '@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig' with _breadcrumbs only %}
+
+{% endif %}
+
{% for modal in _modals %}
{% include '@oe-bcl/bcl-modal/modal.html.twig' with modal only %}
{% endfor %}
diff --git a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
index fb2116062..0d7742a63 100644
--- a/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
+++ b/src/compositions/bcl-landing-page/__snapshots__/landing-page.test.js.snap
@@ -42,7 +42,6 @@ exports[`OE - Landing page renders correctly 1`] = `
-
-
-
+
+
-
+
+
+ About the European Union
+
+
+
+ News
+
+
+
+
div:has(.breadcrumb) {
display: none;
@@ -127,6 +126,7 @@ $header-link-active-background: #003776 !default;
z-index: 1030;
width: 100%;
align-items: flex-start;
+ overflow: auto;
.navbar-nav {
width: 100%;
margin-top: 1rem;
diff --git a/src/themes/default/src/scss/_mega-menu.scss b/src/themes/default/src/scss/_mega-menu.scss
index c03217668..85e8356cf 100644
--- a/src/themes/default/src/scss/_mega-menu.scss
+++ b/src/themes/default/src/scss/_mega-menu.scss
@@ -275,34 +275,6 @@ ul.bcl-mega-menu__items {
}
}
}
-
- // The see-all link is at the bottom of the list.
- &:has(> a.see-all-button) {
- position: sticky;
- inset-block-start: 100%;
- }
- > a.see-all-button {
- border-top: none;
- &:after {
- background: $neutral-border-color;
- content: "";
- block-size: 1px;
- inset-inline-start: 0;
- position: absolute;
- inset-block-start: 0;
- // Replicate horizontal padding of parent element.
- inset-inline: $mm-gutter-x;
- }
- > svg {
- inline-size: 0.8rem;
- }
- > span {
- text-overflow: ellipsis;
- overflow: hidden;
- display: block;
- white-space: nowrap;
- }
- }
}
}
@@ -314,6 +286,21 @@ ul.bcl-mega-menu__items {
// Avoid a space between the parent menu and the submenu.
@include padding-right(0);
}
+ @include media-breakpoint-down(lg) {
+ > .bcl-mega-menu__items {
+ &:has(.bcl-mega-menu__submenu:not([hidden])) {
+ > .__leaf,
+ > .__parent {
+ display: none;
+ }
+ }
+ > .__parent {
+ &:has(.bcl-mega-menu__submenu:not([hidden])) {
+ display: block;
+ }
+ }
+ }
+ }
}
// Nested submenu.
@@ -372,40 +359,42 @@ ul.bcl-mega-menu__items {
}
}
}
-}
-
-// Second level items column.
-.bcl-mega-menu__second-submenu {
- > .tab-content > .tab-pane {
- // In desktop, the entire second-level list has a light blue background.
- @include media-breakpoint-up(lg) {
- background: $primary-bg-subtle;
- }
- // Hide other parts of the mega menu in mobile, when a sub-submenu is open.
- @include media-breakpoint-down(lg) {
- .bcl-mega-menu__container:has(&.active) {
- .bcl-mega-menu__info,
- .bcl-mega-menu__first-submenu {
- display: none;
- }
+ @include media-breakpoint-up(lg) {
+ > .bcl-mega-menu__items {
+ flex: 1 1 0;
+ overflow-y: auto;
+ > li > :is(span, a, button) {
+ @include mm-item-padding($px: map-get($spacers, "4-25"));
}
}
- // The panel title only shows in mobile.
- > .panel-title {
- @include mm-item-padding(map-get($spacers, 3));
- margin: 0;
- color: $dark;
- background: $primary-bg-subtle;
- display: block;
- font-size: 20px;
+ }
+ > .__see_all {
+ border-top: 1px solid $neutral-border-color;
+ @include media-breakpoint-up(lg) {
+ border-top: 1px solid $primary-border-subtle;
+ margin: 0 map-get($spacers, "4-25");
+ }
+ > .see-all-button {
+ @include mm-item-padding();
+ // Use flex for icon spacing.
+ display: flex;
+ align-items: center;
+ color: $link-color;
@include media-breakpoint-up(lg) {
- display: none;
+ padding: $mm-gutter-y map-get($spacers, "4-25");
+ margin: 0 -1.75rem;
}
- }
- // Items get a bit more space to the sides in xl viewport.
- @include media-breakpoint-up(xl) {
- > ul > li > * {
- margin: 0 map-get($spacers, "2-5");
+ &:hover {
+ background: $primary-bg-subtle;
+ }
+ > svg {
+ flex-shrink: 0;
+ }
+ > span {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ white-space: nowrap;
}
}
}
diff --git a/src/themes/default/storybook/.storybook/environment.js b/src/themes/default/storybook/.storybook/environment.js
index d3a84e502..aa0c8efe9 100644
--- a/src/themes/default/storybook/.storybook/environment.js
+++ b/src/themes/default/storybook/.storybook/environment.js
@@ -6,17 +6,7 @@ const {
createFilesystemLoader,
createFunction,
} = require("twing");
-const storybookAttributePath = path.resolve(
- __dirname,
- "..",
- "..",
- "..",
- "..",
- "..",
- ".storybook",
- "drupal-attribute",
-);
-const { StorybookDrupalAttribute } = require(storybookAttributePath);
+const { StorybookDrupalAttribute } = require("../../../../../.storybook/drupal-attribute");
const componentsPath = path.resolve(__dirname, "../../../components");
const compositionsPath = path.resolve(__dirname, "../../../compositions");
-
- Project name
-
- 
-
- UCP Knowledge Network: Applied knowledge for action
-
-