feat: add basic support to Toolbar to allow conditionally disabling s…

…ticky behavior
boltdesignsystem · Jan 31, 2020 · 76557e5 · 76557e5
1 parent 5112ecc
commit 76557e5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/03-blueprints/03-organisms/toolbar/_toolbar.twig b/docs-site/src/pages/pattern-lab/_patterns/03-blueprints/03-organisms/toolbar/_toolbar.twig
@@ -1,6 +1,7 @@
 {% embed "@bolt-components-toolbar/toolbar.twig" with {
   size: "xsmall",
   theme: "none",
+  sticky: sticky ?? true,
   gradientName: toolbarGradient | default(''),
   title: {
     tag: "h2",

diff --git a/packages/components/bolt-toolbar/toolbar.scss b/packages/components/bolt-toolbar/toolbar.scss
@@ -3,14 +3,18 @@
 .c-bolt-toolbar {
   @include bolt-font-size(small);
   position: relative;
+  z-index: 10;
+  width: 100%;
+  margin: 0 auto;
+  color: bolt-theme(secondary);
+}
+
+.c-bolt-toolbar--sticky {
   position: sticky;
   top: 0;
   left: 0;
-  z-index: 10;
-  width: 100%;
   width: 100vw;
   margin: 0 -50vw;
-  color: bolt-theme(secondary);
 }
 
 .c-bolt-toolbar__inner {

diff --git a/packages/components/bolt-toolbar/toolbar.twig b/packages/components/bolt-toolbar/toolbar.twig
@@ -2,7 +2,7 @@
 {% set toolbar_content = block("content") %}
 {% set toolbar_content_after = block("content_after") %}
 
-<div class="t-bolt-xdark c-bolt-toolbar c-bolt-toolbar--{{ gradientName | default('purple') }}">
+<div class="t-bolt-xdark c-bolt-toolbar {{ sticky ? "c-bolt-toolbar--sticky" : "" }} c-bolt-toolbar--{{ gradientName | default('purple') }}">
   <div class="c-bolt-toolbar__inner">
     <div class="c-bolt-toolbar__items">
       {% if title or toolbar_content_before or content_before %}