Only show debug menu while running locally

1 files changed, 11 insertions, 8 deletions

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 1743133..e2747c3 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -5,6 +5,7 @@ import { Button } from "..";
 import * as Styled from "./index.styled";
 
 export function Footer() {
+  const showDebugButton = location.hostname == "localhost" || location.port == "3000";
   const [showDebugMenu, setShowDebugMenu] = React.useState<boolean>(false);
 
   const toggleDebugMenu = React.useCallback(() => {
@@ -28,14 +29,16 @@ export function Footer() {
           Maciej Synowski
         </Styled.Link>
       </Styled.Text>
-      <Styled.Text>
-        <Button onClick={toggleDebugMenu}><IoBug /> Debug Options</Button><br />
-        {showDebugMenu &&
-          <Button variant="red" onClick={clearLocalStorage}>
-            Clear Local Storage & Reload
-          </Button>
-        }
-      </Styled.Text>
+      {showDebugButton &&
+        <Styled.Text>
+          <Button onClick={toggleDebugMenu}><IoBug /> Debug Options</Button><br />
+          {showDebugMenu &&
+            <Button variant="red" onClick={clearLocalStorage}>
+              Clear Local Storage & Reload
+            </Button>
+          }
+        </Styled.Text>
+      }
     </footer>
   );
 }