Merge pull request #23 from powdr-labs:fix-mobile

Fix mobile layout
powdr-labs · Sep 30, 2024 · 8e20f01 · 8e20f01
2 parents e13eaec + 0a34232
commit 8e20f01
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -100,15 +100,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className="min-h-screen bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
         <ThemeProviders>
           {/* <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} /> */}
-          <div className="flex min-h-screen flex-col">
-            <SectionContainer>
-              <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
-                <Header />
-                <main className="mb-12 flex-grow">{children}</main>
-              </SearchProvider>
-            </SectionContainer>
-            <Footer />
-          </div>
+          <SectionContainer>
+            <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
+              <Header />
+              <main className="mb-12 flex-grow">{children}</main>
+            </SearchProvider>
+          </SectionContainer>
+          <Footer />
         </ThemeProviders>
       </body>
     </html>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,8 +3,8 @@ import { PowdrLogo } from './powdrLogo'
 
 export default function Footer() {
   return (
-    <footer className="mt-auto bg-[#1e1b4b] py-8 text-white">
-      <div className="container mx-auto flex flex-col items-center">
+    <footer className="mt-auto bg-[#1e1b4b] px-8 py-8 text-white">
+      <div className="container mx-auto flex flex-col items-center text-center">
         <PowdrLogo className="mb-4 h-24 w-auto text-white" />
         <p className="mb-2 text-sm">
           © powdr labs GmbH {new Date().getFullYear()}-{new Date().getFullYear() + 1}. All Rights

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -32,8 +32,8 @@ const Header = () => {
             ))}
         </div>
         <SearchButton />
-        <ThemeSwitch />
         <MobileNav />
+        <ThemeSwitch />
       </div>
     </header>
   )

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
@@ -27,8 +27,25 @@ const MobileNav = () => {
   })
 
   return (
-    <>
-      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
+    <div className="sm:hidden">
+      <nav
+      // ref={navRef}
+      // className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
+      >
+        {headerNavLinks.map((link) =>
+          link.title === 'Home' ? null : (
+            <Link
+              key={link.title}
+              href={link.href}
+              className="mb-4 py-2 text-xl font-bold tracking-widest text-gray-900 outline outline-0 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
+              onClick={onToggleNav}
+            >
+              {link.title}
+            </Link>
+          )
+        )}
+      </nav>
+      {/* <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
@@ -41,8 +58,9 @@ const MobileNav = () => {
             clipRule="evenodd"
           />
         </svg>
-      </button>
-      <Transition appear show={navShow} as={Fragment} unmount={false}>
+      </button> */}
+
+      {/* <Transition appear show={navShow} as={Fragment} unmount={false}>
         <Dialog as="div" onClose={onToggleNav} unmount={false}>
           <Transition.Child
             as={Fragment}
@@ -100,8 +118,8 @@ const MobileNav = () => {
             </Dialog.Panel>
           </Transition.Child>
         </Dialog>
-      </Transition>
-    </>
+      </Transition> */}
+    </div>
   )
 }