diff --git a/src/components/StructuredNavigation/StructuredNavigation.js b/src/components/StructuredNavigation/StructuredNavigation.js
index 1bf582e3..b00b26b7 100644
--- a/src/components/StructuredNavigation/StructuredNavigation.js
+++ b/src/components/StructuredNavigation/StructuredNavigation.js
@@ -211,12 +211,15 @@ const StructuredNavigation = ({ showAllSectionsButton = false, sectionsHeading =
return (
- {hasCollapsibleStructRef.current &&
+ {showAllSectionsButton && !playlist.isPlaylist &&
- {sectionsHeading}
-
+ {sectionsHeading}
+ {hasCollapsibleStructRef.current && }
}
diff --git a/src/components/StructuredNavigation/StructuredNavigation.md b/src/components/StructuredNavigation/StructuredNavigation.md
index 8cf382ea..3232f65b 100644
--- a/src/components/StructuredNavigation/StructuredNavigation.md
+++ b/src/components/StructuredNavigation/StructuredNavigation.md
@@ -1,7 +1,7 @@
StructuredNavigation component, renders any available structural properties in a given IIIF manifest. This component reads data from state provided through Contexts, therefore it should be wrapped by the context providers (both Manifest and Player as seen below).
`StructuredNavigation` component has the following prop;
-- `showAllSectionsButton`: accepts a Boolean value, which has a default value of `false` and is _not required_. This allows to display the collapse/expand all sections button above the structure for manifests with collapsible structures.
+- `showAllSectionsButton`: accepts a Boolean value, which has a default value of `false` and is _not required_. This allows to display the collapse/expand all sections button with a text heading (given as the value for the `sectionsHeading` prop) above structures. Collapse/expand all sections button is displayed only for manifests with collapsible structures even when this prop is turned on.
- `sectionsHeading`: accepts a String value, which has a default value of `Sections` and is _not required_. This allows to customize the text that is shown next to collapse/expand all sections button at the top of collapsible structures.
To import this component from the library;
diff --git a/src/components/StructuredNavigation/StructuredNavigation.scss b/src/components/StructuredNavigation/StructuredNavigation.scss
index b9274106..f9bcb3fc 100644
--- a/src/components/StructuredNavigation/StructuredNavigation.scss
+++ b/src/components/StructuredNavigation/StructuredNavigation.scss
@@ -7,7 +7,7 @@
margin-top: 1em;
display: flex;
justify-content: space-between;
- padding: 0.5em 0.5em 0;
+ padding: 0.5em;
background-color: $primaryLightest;
border: 1px solid $primaryLight;
border-radius: 0.25em 0.25em 0 0;
@@ -16,6 +16,9 @@
.ramp--structured-nav__sections-text {
font-weight: bold;
font-size: 1.25em;
+ &.hidden {
+ visibility: hidden;
+ }
}
.ramp--structured-nav__collapse-all-btn {
@@ -25,7 +28,7 @@
border: none;
border-radius: 0.3em;
cursor: pointer;
- margin-bottom: 0.5rem;
+ align-items: flex-end;
.arrow {
border: solid $primaryLightest;