diff --git a/src/components/SplitScreen/SplitScreen.stories.tsx b/src/components/SplitScreen/SplitScreen.stories.tsx index 3139e3d..daa5762 100644 --- a/src/components/SplitScreen/SplitScreen.stories.tsx +++ b/src/components/SplitScreen/SplitScreen.stories.tsx @@ -46,3 +46,10 @@ Apportionment.args = { mobileIsOpen: false, apportionment: 60, }; + +export const NoHeaderGap = Template.bind({}); +NoHeaderGap.args = { + hideLeftOnMobile: false, + mobileIsOpen: false, + showHeaderGap: false, +}; diff --git a/src/components/SplitScreen/SplitScreen.tsx b/src/components/SplitScreen/SplitScreen.tsx index 85ae8bb..ee4252f 100644 --- a/src/components/SplitScreen/SplitScreen.tsx +++ b/src/components/SplitScreen/SplitScreen.tsx @@ -12,6 +12,7 @@ export interface SplitScreenProps { mobileIsOpen?: boolean; hideLeftOnMobile?: boolean; apportionment?: number; + showHeaderGap?: boolean; } export const SplitScreen: React.FC = ({ @@ -20,6 +21,7 @@ export const SplitScreen: React.FC = ({ mobileIsOpen = false, hideLeftOnMobile = false, apportionment = 42, + showHeaderGap = true, }: SplitScreenProps) => { useResizeEventListener(); @@ -34,10 +36,8 @@ export const SplitScreen: React.FC = ({ mobileOpen: { top: height - 40, height: 'calc(100% - var(--boemly-space-28))' }, }; - const mobileAndLeftNotHidden = mobile && !hideLeftOnMobile; - useEffect(() => { - if (mobileAndLeftNotHidden) { + if (mobile && !hideLeftOnMobile) { controls.start(mobileIsOpen ? 'mobileOpen' : 'mobileClosed'); } else { controls.start('desktop'); @@ -50,7 +50,7 @@ export const SplitScreen: React.FC = ({ {(!mobile || !hideLeftOnMobile) && left}