diff --git a/plugins/woocommerce-admin/client/homepage/index.js b/plugins/woocommerce-admin/client/homepage/index.js
index 5789f1e59f6..8f21a578511 100644
--- a/plugins/woocommerce-admin/client/homepage/index.js
+++ b/plugins/woocommerce-admin/client/homepage/index.js
@@ -14,11 +14,11 @@ import { Spinner } from '@woocommerce/components';
*/
import withSelect from 'wc-api/with-select';
import { isOnboardingEnabled } from 'dashboard/utils';
-import StatsOverview from './stats-overview';
const ProfileWizard = lazy( () =>
import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' )
);
+import Layout from './layout';
const Homepage = ( { profileItems, query } ) => {
if ( isOnboardingEnabled() && ! profileItems.completed ) {
@@ -29,7 +29,7 @@ const Homepage = ( { profileItems, query } ) => {
);
}
- return ;
+ return ;
};
export default compose(
diff --git a/plugins/woocommerce-admin/client/homepage/layout.js b/plugins/woocommerce-admin/client/homepage/layout.js
new file mode 100644
index 00000000000..99dd12192a2
--- /dev/null
+++ b/plugins/woocommerce-admin/client/homepage/layout.js
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import StatsOverview from './stats-overview';
+import './style.scss';
+
+const Layout = () => {
+ const [ showInbox, setShowInbox ] = useState( true );
+ const [ isContentSticky, setIsContentSticky ] = useState( false );
+ const content = useRef( null );
+ const maybeStickContent = () => {
+ if ( ! content.current ) {
+ return;
+ }
+ const { bottom } = content.current.getBoundingClientRect();
+ const shouldBeSticky = showInbox && bottom < window.innerHeight;
+
+ setIsContentSticky( shouldBeSticky );
+ };
+
+ useEffect( () => {
+ maybeStickContent();
+ window.addEventListener( 'resize', maybeStickContent );
+
+ return () => {
+ window.removeEventListener( 'resize', maybeStickContent );
+ };
+ }, [] );
+
+ return (
+
+ { showInbox && (
+
+
+
+
+
+
+
+
+
+
+
+ ) }
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/plugins/woocommerce-admin/client/homepage/style.scss b/plugins/woocommerce-admin/client/homepage/style.scss
new file mode 100644
index 00000000000..c39c780888e
--- /dev/null
+++ b/plugins/woocommerce-admin/client/homepage/style.scss
@@ -0,0 +1,45 @@
+.woocommerce-page #wpcontent,
+.woocommerce-page.woocommerce_page_wc-admin #wpbody-content {
+ overflow-x: inherit !important; // Overwriting wc-admin css from elsewhere. Necessary to make the right-hand column 'stick'
+}
+
+.woocommerce-homepage {
+ display: flex;
+ max-width: 1032px;
+ margin: 0 auto;
+ justify-content: space-between;
+
+ &.hasInbox .woocommerce-homepage-column {
+ width: calc(50% - 12px);
+ margin: 0;
+
+ @include breakpoint('<782px') {
+ width: 100%;
+ position: inherit;
+ top: auto;
+ }
+ }
+
+ @include breakpoint('<782px') {
+ margin-left: -16px;
+ margin-right: -16px;
+ flex-direction: column-reverse;
+ }
+}
+.woocommerce-homepage-column {
+ width: 50%;
+ top: 130px;
+ margin: 0 auto;
+ align-self: flex-start;
+}
+.temp-content {
+ width: 100%;
+ height: 300px;
+ margin-bottom: 24px;
+ background-color: #9acd32;
+}
+
+.is-inbox .temp-content {
+ height: 225px;
+ background-color: #6495ed;
+}