diff --git a/pages/app-layout/disable-paddings-with-split-panel.page.tsx b/pages/app-layout/disable-paddings-with-split-panel.page.tsx
index e7b3a9596a..086816d3bd 100644
--- a/pages/app-layout/disable-paddings-with-split-panel.page.tsx
+++ b/pages/app-layout/disable-paddings-with-split-panel.page.tsx
@@ -1,16 +1,29 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useContext } from 'react';
-import AppLayout from '~components/app-layout';
+import AppLayout, { AppLayoutProps } from '~components/app-layout';
import Box from '~components/box';
import SplitPanel from '~components/split-panel';
+import AppContext, { AppContextType } from '../app/app-context';
import { Breadcrumbs, Navigation, Tools } from './utils/content-blocks';
import labels from './utils/labels';
import * as toolsContent from './utils/tools-content';
+type SplitPanelDemoContext = React.Context<
+ AppContextType<{
+ splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
+ splitPanelOpen: boolean;
+ }>
+>;
+
export default function () {
+ const {
+ urlParams: { splitPanelPosition, splitPanelOpen = false },
+ setUrlParams,
+ } = useContext(AppContext as SplitPanelDemoContext);
+
return (
}
navigation={}
tools={{toolsContent.long}}
+ splitPanelPreferences={{ position: splitPanelPosition }}
+ onSplitPanelPreferencesChange={event => {
+ const { position } = event.detail;
+ setUrlParams({ splitPanelPosition: position === 'side' ? position : undefined });
+ }}
+ splitPanelOpen={splitPanelOpen}
+ onSplitPanelToggle={event => setUrlParams({ splitPanelOpen: event.detail.open })}
splitPanel={
Content
}
- content={Content}
+ content={
+
+
+ Content
+
+
+ }
/>
);
}
diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
index 75ea6f8755..ee69296b84 100644
--- a/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
+++ b/src/app-layout/visual-refresh-toolbar/skeleton/styles.scss
@@ -22,7 +22,7 @@
@mixin grid-column-full-content-width {
grid-column: 1 / -1;
@include desktop-only {
- grid-column: 2 / span 4;
+ grid-column: 2 / 5;
}
}