From 574fd12d5cfbb9bfa95bd21786c7402334047db9 Mon Sep 17 00:00:00 2001
From: Evan <evan.wilkinson@redhat.com>
Date: Mon, 5 Feb 2024 21:50:37 -0500
Subject: [PATCH] updated masthead to match website

---
 src/app/AppLayout/AppLayout.tsx | 22 +++++++++++++---------
 src/app/app.css                 |  6 ++++++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
index 4c49349b..b91afc7a 100644
--- a/src/app/AppLayout/AppLayout.tsx
+++ b/src/app/AppLayout/AppLayout.tsx
@@ -36,7 +36,6 @@ 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;
@@ -44,8 +43,14 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children }) => {
     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
index 63ccf806..0200d563 100644
--- 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;
+}