fix: header safari

rocket-connect · Aug 21, 2023 · 6d20a0a · 6d20a0a
1 parent 1ec323f
commit 6d20a0a
Showing 1 changed file with 47 additions and 37 deletions.
diff --git a/frontend/src/components/views/Header.tsx b/frontend/src/components/views/Header.tsx
@@ -30,12 +30,18 @@ function NavItem({ href, children, dropdownId }: NavItemProps) {
   );
 }
 
-interface DropdownItemProps {
-  title: string;
-  children: ReactNode[];
-}
-
 export function Header() {
+  const isSafari =
+    // @ts-ignore
+    /constructor/i.test(window.HTMLElement) ||
+    (function (p) {
+      return p.toString() === "[object SafariRemoteNotification]";
+    })(
+      !window["safari"] ||
+        // @ts-ignore
+        (typeof safari !== "undefined" && safari.pushNotification)
+    );
+
   return (
     <div className="bg-white fixed w-full py-2 bg-rocket-connect-lightgrey">
       <Container>
@@ -49,38 +55,42 @@ export function Header() {
                 Rocket Connect
               </span>
             </a>
-            <button
-              data-collapse-toggle="navbar-dropdown"
-              type="button"
-              className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-rocket-connect-darkblue rounded-lg md:hidden"
-              aria-controls="navbar-dropdown"
-            >
-              <svg
-                className="w-5 h-5"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 17 14"
-              >
-                <path
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M1 1h15M1 7h15M1 13h15"
-                />
-              </svg>
-            </button>
-            <div
-              className={`w-full md:block md:w-auto md:pl-5`}
-              id="navbar-dropdown"
-            >
-              <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0">
-                <NavItem href="#home">Home</NavItem>
-                <NavItem href="#contact">Contact</NavItem>
-                <NavItem href="#services">Services</NavItem>
-              </ul>
-            </div>
+            {!isSafari && (
+              <>
+                <button
+                  data-collapse-toggle="navbar-dropdown"
+                  type="button"
+                  className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-rocket-connect-darkblue rounded-lg md:hidden"
+                  aria-controls="navbar-dropdown"
+                >
+                  <svg
+                    className="w-5 h-5"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 17 14"
+                  >
+                    <path
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M1 1h15M1 7h15M1 13h15"
+                    />
+                  </svg>
+                </button>
+                <div
+                  className={`w-full md:block md:w-auto md:pl-5`}
+                  id="navbar-dropdown"
+                >
+                  <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0">
+                    <NavItem href="#home">Home</NavItem>
+                    <NavItem href="#contact">Contact</NavItem>
+                    <NavItem href="#services">Services</NavItem>
+                  </ul>
+                </div>
+              </>
+            )}
           </div>
         </nav>
       </Container>