switch from masthead switches to fullpage switches

patternfly · Feb 13, 2024 · 6f80c45 · 6f80c45
1 parent 0b898e8
commit 6f80c45
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 39 deletions.
diff --git a/src/app/AppLayout/AppLayout.css b/src/app/AppLayout/AppLayout.css
@@ -0,0 +1,19 @@
+#primary-app-container {
+  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
+}
+
+.ws-full-page-utils {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  padding: var(--pf-v5-global--spacer--lg);
+}
+
+.ws-full-page-utils::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background-color: var(--pf-v5-global--BackgroundColor--100);
+  opacity: 0.8;
+  box-shadow: var(--pf-v5-global--BoxShadow--sm);
+}
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import {
   Button,
+  Flex,
   Icon,
   Masthead,
   MastheadBrand,
@@ -28,6 +29,7 @@ import { IAppRoute, IAppRouteGroup, routes } from '@app/routes';
 import { BarsIcon } from '@patternfly/react-icons';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
+import './AppLayout.css';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -102,45 +104,6 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
           </svg>
         </MastheadBrand>
       </MastheadMain>
-      <MastheadContent>
-        <Toolbar isFullHeight>
-          <ToolbarContent>
-            <ToolbarGroup
-              className="pf-m-align-end"
-              align={{ default: 'alignRight' }}
-              spaceItems={{ default: 'spaceItemsNone', md: 'spaceItemsMd' }}
-            >
-              <ToolbarItem>
-                <ToggleGroup aria-label="Dark theme toggle group">
-                  <ToggleGroupItem
-                    aria-label="light theme toggle"
-                    icon={
-                      <Icon size="md">
-                        <SunIcon />
-                      </Icon>
-                    }
-                    isSelected={!isDarkTheme}
-                    onChange={toggleDarkTheme}
-                  />
-                  <ToggleGroupItem
-                    aria-label="dark theme toggle"
-                    icon={
-                      <Icon size="md">
-                        <MoonIcon />
-                      </Icon>
-                    }
-                    isSelected={isDarkTheme}
-                    onChange={toggleDarkTheme}
-                  />
-                </ToggleGroup>
-              </ToolbarItem>
-              <ToolbarItem>
-                <Switch id="ws-rtl-switch" label={'RTL'} defaultChecked={false} onChange={() => toggleRTL()} />
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarContent>
-        </Toolbar>
-      </MastheadContent>
     </Masthead>
   );
 
@@ -199,6 +162,22 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   return (
     <Page mainContainerId={pageId} header={Header} sidebar={sidebarOpen && Sidebar} skipToContent={PageSkipToContent}>
       {children}
+      <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils">
+        <Switch
+          label="Dark theme"
+          defaultChecked={false}
+          onChange={() => document!.querySelector('html')!.classList.toggle('pf-v5-theme-dark')}
+        />
+        <Switch
+          label="RTL"
+          defaultChecked={false}
+          onChange={() => {
+            const html = document.querySelector('html');
+            const curDir = html!.dir;
+            html!.dir = curDir !== 'rtl' ? 'rtl' : 'ltr';
+          }}
+        />
+      </Flex>
     </Page>
   );
 };