updated masthead to match website

patternfly · Feb 6, 2024 · 574fd12 · 574fd12
1 parent a9ab824
commit 574fd12
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -36,16 +36,21 @@ interface IAppLayout {
 const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = React.useState(true);
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
-  const [isRTL, setIsRTL] = React.useState(false);
 
   const toggleDarkTheme = (_evt, selected) => {
     const darkThemeToggleClicked = !selected === isDarkTheme;
     document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
     setIsDarkTheme(darkThemeToggleClicked);
   };
 
+  const toggleRTL = () => {
+    const html = document.querySelector('html');
+    const curDir = html.dir;
+    html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr';
+  };
+
   const Header = (
-    <Masthead>
+    <Masthead className="demo-masthead">
       <MastheadToggle>
         <Button variant="plain" onClick={() => setSidebarOpen(!sidebarOpen)} aria-label="Global navigation">
           <BarsIcon />
@@ -100,7 +105,11 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
       <MastheadContent>
         <Toolbar isFullHeight>
           <ToolbarContent>
-            <ToolbarGroup align={{ default: 'alignRight' }} spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}>
+            <ToolbarGroup
+              className="pf-m-align-end"
+              align={{ default: 'alignRight' }}
+              spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
+            >
               <ToolbarItem>
                 <ToggleGroup aria-label="Dark theme toggle group">
                   <ToggleGroupItem
@@ -126,12 +135,7 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
                 </ToggleGroup>
               </ToolbarItem>
               <ToolbarItem>
-                <Switch
-                  id="ws-rtl-switch"
-                  label={'RTL'}
-                  defaultChecked={isRTL}
-                  onChange={() => setIsRTL((isRTL) => !isRTL)}
-                />
+                <Switch id="ws-rtl-switch" label={'RTL'} defaultChecked={false} onChange={() => toggleRTL()} />
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarContent>

diff --git a/src/app/app.css b/src/app/app.css
@@ -9,3 +9,9 @@ body,
   --pf-v5-c-content--blockquote--BorderLeftColor: purple; /* changes all <blockquote> left border color to purple */
   --pf-v5-c-content--hr--BackgroundColor: lemonchiffon; /* changes a <hr> color to lemonchiffon */
 }
+
+.demo-masthead .pf-v5-c-toggle-group {
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
+  --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
+}