refactor: update mobile-nav styling for PWA compatibility

kdurek · Aug 2, 2024 · fe5de6b · fe5de6b
1 parent 4e517a3
commit fe5de6b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/app/(auth)/logowanie/page.tsx b/src/app/(auth)/logowanie/page.tsx
@@ -57,7 +57,7 @@ const SubmitButton = () => {
   );
 };
 
-export function GoogleSignInButton() {
+function GoogleSignInButton() {
   const t = useTranslations('GoogleSignInButton');
 
   return (

diff --git a/src/components/layout/mobile-nav.tsx b/src/components/layout/mobile-nav.tsx
@@ -20,7 +20,7 @@ export function MobileNav() {
 
   return (
     <>
-      <nav className="fixed bottom-0 z-40 flex w-full rounded-t-md bg-background shadow-[0px_4px_16px_rgba(17,17,26,0.1),_0px_8px_24px_rgba(17,17,26,0.1),_0px_16px_56px_rgba(17,17,26,0.1)]">
+      <nav className="fixed bottom-0 z-40 flex w-full rounded-t-md bg-background shadow-[0px_4px_16px_rgba(17,17,26,0.1),_0px_8px_24px_rgba(17,17,26,0.1),_0px_16px_56px_rgba(17,17,26,0.1)] pwa:pb-8">
         {navItems.map((item, index) => (
           <Fragment key={index}>
             <Link
@@ -36,7 +36,7 @@ export function MobileNav() {
           </Fragment>
         ))}
       </nav>
-      <div className="pt-16" />
+      <div className="pt-16 pwa:pt-24" />
     </>
   );
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -66,6 +66,9 @@ export default {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
+      screens: {
+        pwa: { raw: '(display-mode: standalone)' },
+      },
     },
   },
   plugins: [require('tailwindcss-animate')],