docs: update grid layout example without responsive sidebar (#3709)

Before: <img width="993" alt="Screenshot 2024-06-14 at 12 29 24" src="https://github.com/dnbexperience/eufemia/assets/1501870/ed776174-488c-4f1a-b5a9-00e3012374a4"> After: ![Screenshot 2024-06-14 at 12 28 02](https://github.com/dnbexperience/eufemia/assets/1501870/c75e066f-5b39-4c0e-8962-ad691835d0a4)
dnbexperience · Jun 14, 2024 · f4363c2 · f4363c2
1 parent a16f1f7
commit f4363c2
Showing 1 changed file with 108 additions and 88 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/visual-tests/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/grid/visual-tests/Examples.tsx
@@ -37,47 +37,11 @@ export function PageLayoutExample() {
 
       <ComponentBox hideCode scope={{ useMedia }}>
         {() => {
-          const Wrapper = styled.div`
-            .pageContainer {
-              --sidebar-width: 17rem;
-              --page-container-gap: 1.5rem;
-              --page-width: var(--layout-large);
-
-              max-width: calc(
-                var(--sidebar-width) + var(--page-container-gap) +
-                  var(--page-width)
-              );
-
-              margin: auto;
-
-              background-color: var(--color-lavender);
-              box-shadow: 0 0 0 1px black;
-            }
-
-            .sidebarContent {
-              background-color: var(--color-sand-yellow);
-            }
-
-            .pageContent {
-            }
-
-            .columnItem {
-              display: grid;
-              place-content: center;
-
-              html:not([data-visual-test]) & {
-                min-height: 70vh;
-              }
-
-              text-align: center;
-            }
-          `
-
           function PageLayout() {
             const { isSmall, isMedium, isLarge } = useMedia()
 
             const { minimizedSidebar, Toggle } = useMinimizeSidebar()
-            const showSidebar = !isMedium
+            const renderWideSidebar = !isMedium
             const sidebarColumns = isSmall ? 0 : minimizedSidebar ? 1 : 3
             const pageColumns = isSmall
               ? 4
@@ -88,28 +52,69 @@ export function PageLayoutExample() {
               : 0
 
             return (
-              <Wrapper>
+              <PageContainerWithStyles>
+                {renderWideSidebar && (
+                  <SidebarContent
+                    columns={sidebarColumns}
+                    Toggle={Toggle}
+                  />
+                )}
+
                 <Grid.Container
                   className="pageContainer"
-                  columns={pageColumns + sidebarColumns}
+                  columns={pageColumns}
                   columnGap="medium"
                 >
-                  {showSidebar && (
-                    <Grid.Item span={[1, sidebarColumns]}>
-                      <SidebarContent
-                        columns={sidebarColumns}
-                        Toggle={Toggle}
-                      />
-                    </Grid.Item>
-                  )}
+                  <Grid.Item span={[1, 'end']}>
+                    <PageContent columns={pageColumns} />
+                  </Grid.Item>
+                </Grid.Container>
+              </PageContainerWithStyles>
+            )
+          }
+
+          function SidebarContent({ columns, Toggle }) {
+            const content = useColumns({ columns, color: colors[1] })
+
+            return (
+              columns > 0 && (
+                <Grid.Container
+                  className="sidebarContent"
+                  data-columns={columns}
+                  columnGap
+                  columns={columns}
+                  element="aside"
+                  aria-label="Main Menu"
+                >
+                  {content}
 
                   <Grid.Item
-                    span={[showSidebar ? sidebarColumns + 1 : 1, 'end']}
+                    span="full"
+                    style={{
+                      display: 'grid',
+                      placeContent: 'center',
+                    }}
                   >
-                    <PageContent columns={pageColumns} />
+                    <Toggle />
                   </Grid.Item>
                 </Grid.Container>
-              </Wrapper>
+              )
+            )
+          }
+
+          function PageContent({ columns }) {
+            const content = useColumns({
+              columns,
+              color: colors[0],
+            })
+            return (
+              <Grid.Container
+                className="pageContent"
+                columns={columns}
+                columnGap
+              >
+                {content}
+              </Grid.Container>
             )
           }
 
@@ -150,47 +155,62 @@ export function PageLayoutExample() {
             }
           }
 
-          function SidebarContent({ columns, Toggle }) {
-            const content = useColumns({ columns, color: colors[1] })
+          const PageContainerWithStyles = styled.div`
+            --sidebar-width: 17rem;
+            --page-container-gap: var(--spacing-medium);
+            --page-width: var(--layout-large);
 
-            return (
-              columns > 0 && (
-                <Grid.Container
-                  className="sidebarContent"
-                  columnGap
-                  columns={columns}
-                >
-                  {content}
+            // horizontal layout
+            display: flex;
 
-                  <Grid.Item
-                    span="full"
-                    style={{
-                      display: 'grid',
-                      placeContent: 'center',
-                    }}
-                  >
-                    <Toggle />
-                  </Grid.Item>
-                </Grid.Container>
-              )
-            )
-          }
+            // the gap between the sidebar and the page content
+            column-gap: var(--page-container-gap);
 
-          function PageContent({ columns }) {
-            const content = useColumns({
-              columns,
-              color: colors[0],
-            })
-            return (
-              <Grid.Container
-                className="pageContent"
-                columns={columns}
-                columnGap
-              >
-                {content}
-              </Grid.Container>
-            )
-          }
+            // center everything
+            margin: auto;
+
+            // max page width
+            max-width: calc(
+              var(--sidebar-width) + var(--page-container-gap) +
+                var(--page-width)
+            );
+
+            .sidebarContent {
+              --width: var(--sidebar-width);
+              &[data-columns='1'] {
+                --width: calc(var(--sidebar-width) / 3);
+              }
+
+              width: var(--width);
+            }
+
+            .pageContainer {
+              flex-grow: 1;
+            }
+
+            .pageContent {
+            }
+
+            // for demo purposes
+            background-color: var(--color-lavender);
+            box-shadow: 0 0 0 1px black;
+
+            .columnItem {
+              display: grid;
+              place-content: center;
+
+              html:not([data-visual-test]) & {
+                min-height: 70vh;
+              }
+
+              text-align: center;
+            }
+
+            .sidebarContent {
+              transition: width 400ms var(--easing-default);
+              background-color: var(--color-sand-yellow);
+            }
+          `
 
           const colors = [
             { background: 'var(--color-sea-green-30)' },