V4/svg header bug (#689)

* Fix disappearing heeader * lint
transitmatters · Jun 22, 2023 · 0848c2e · 0848c2e
1 parent 0e381fd
commit 0848c2e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 40 deletions.
diff --git a/common/components/controls/MobileControlPanel.tsx b/common/components/controls/MobileControlPanel.tsx
@@ -55,7 +55,7 @@ export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
   return (
     <div
       className={classNames(
-        'pb-safe fixed bottom-0 z-20 flex w-full flex-col justify-center',
+        'pb-safe fixed bottom-0 flex w-full flex-col justify-center',
         lineColorBackground[line ?? 'DEFAULT']
       )}
     >

diff --git a/modules/navigation/DesktopSideNavBar.tsx b/modules/navigation/DesktopSideNavBar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 
-import TmLogoSvg from '../../public/tm-logo-big.svg';
+import Image from 'next/image';
 import { DonateButton } from '../../common/components/buttons/DonateButton';
 import { SideNavigation } from './SideNavigation';
 
@@ -11,7 +11,7 @@ export const SideNavBar = () => {
       <div className="bg-tm-grey text-gray-300">
         <div className="fixed inset-y-0 flex w-64 flex-col overflow-y-hidden bg-tm-grey">
           <Link href="/" className="sticky flex flex-shrink-0 px-6 pb-2 pt-6">
-            <TmLogoSvg alt="TransitMatters Logo" />
+            <Image src={'/TMLogo.png'} alt="TransitMatters Logo" width={3204} height={301} />
           </Link>
           <div className="relative flex flex-grow flex-col overflow-y-auto pb-4">
             <div className="fixed h-5 w-64 bg-gradient-to-b from-tm-grey to-transparent"></div>

diff --git a/modules/navigation/MobileNavHeader.tsx b/modules/navigation/MobileNavHeader.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import { Transition } from '@headlessui/react';
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 
-import TmLogoSvg from '../../public/tm-logo-big.svg';
+import Image from 'next/image';
 import { DonateButton } from '../../common/components/buttons/DonateButton';
 import { SideNavigation } from './SideNavigation';
 
@@ -14,28 +14,10 @@ export const MobileNavHeader = () => {
     <>
       <div className="sticky top-0 z-10 bg-tm-grey text-gray-300">
         <Transition.Root show={sidebarOpen} as={Fragment}>
-          <Dialog as="div" className="relative z-40 w-full" onClose={setSidebarOpen}>
+          <div className="relative z-40 w-full">
             <div className="fixed bottom-0 right-0 top-0 bg-gray-600 bg-opacity-75" />
 
-            <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex w-full flex-col bg-tm-grey">
-              <div className="top-0 z-10 flex flex-row items-center justify-between bg-tm-grey p-2">
-                <Link
-                  href="/"
-                  className="h-5 w-auto overflow-hidden focus:outline-none"
-                  onClick={() => setSidebarOpen(false)}
-                >
-                  <TmLogoSvg className="mr-4 h-5 w-auto text-black" alt="TransitMatters Logo" />
-                </Link>
-
-                <button
-                  type="button"
-                  className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400"
-                  onClick={() => setSidebarOpen(false)}
-                >
-                  <span className="sr-only">{'Close Sidebar'}</span>
-                  <XMarkIcon className="h-8 w-8 text-stone-100" aria-hidden="true" />
-                </button>
-              </div>
+            <div className="fixed bottom-0 left-0 right-0 top-12 flex w-full flex-col bg-tm-grey">
               <div className="h-0 flex-1 overflow-y-auto px-4 pt-5">
                 <div className="h-0 flex-1 text-white md:mt-5">
                   <SideNavigation setSidebarOpen={setSidebarOpen} />
@@ -75,25 +57,31 @@ export const MobileNavHeader = () => {
                 </p>
                 <DonateButton />
               </div>
-            </Dialog.Panel>
-          </Dialog>
+            </div>
+          </div>
         </Transition.Root>
 
-        <div className="flex flex-1 flex-col">
-          <div className="top-0 z-10 flex flex-row items-center justify-between bg-tm-grey p-2">
-            <Link href="/" className="h-5 w-auto overflow-hidden">
-              <TmLogoSvg className="mr-4 h-5 w-auto text-black" alt="TransitMatters Logo" />
-            </Link>
+        <div className="top-0 z-10 flex flex-row items-center justify-between bg-tm-grey p-2">
+          <Link
+            href="/"
+            className="h-5 w-auto overflow-hidden focus:outline-none"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <Image src={'/TMLogo.png'} alt="TransitMatters Logo" width={208} height={19.5} />
+          </Link>
 
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400"
-              onClick={() => setSidebarOpen(true)}
-            >
-              <span className="sr-only">{'Open Sidebar'}</span>
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-400"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          >
+            <span className="sr-only">{'Close Sidebar'}</span>
+            {sidebarOpen ? (
+              <XMarkIcon className="h-8 w-8 text-stone-100" aria-hidden="true" />
+            ) : (
               <Bars3Icon className="h-8 w-8 text-stone-100" aria-hidden="true" />
-            </button>
-          </div>
+            )}
+          </button>
         </div>
       </div>
     </>

diff --git a/public/TMLogo.png b/public/TMLogo.png