Merge pull request #1316 from w3bdesign/1314-improve-cart-design-on-mobile

Hide footer

Author: w3bdesign

src/components/Footer/Footer.component.tsx

@@ -4,7 +4,7 @@
  * @returns {JSX.Element} - Rendered component
  */
 const Footer = () => (
-  <footer className="bg-white mb-4">
+  <footer className="bg-white mb-4 hidden md:block px-4">
     <div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 border border-gray-200 rounded">
       <div className="text-gray-600 mx-auto">
         &copy; {new Date().getFullYear()} Daniel / w3bdesign

src/components/Footer/Stickynav.component.tsx

@@ -13,7 +13,7 @@ import Hamburger from './Hamburger.component';
 const Stickynav = () => (
   <nav
     id="footer"
-    className="fixed bottom-0 z-50 w-full mt-[15rem] md:hidden"
+    className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden"
   >
     <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />

src/components/Layout/Layout.component.tsx

@@ -41,7 +41,6 @@ const Layout = ({ children, title }: ILayoutProps) => {
 
       if (!updatedCart && !data?.cart?.contents?.nodes.length) {
         // Should we clear the localStorage if we have no remote cart?
-
         return;
       }
 
@@ -57,13 +56,15 @@ const Layout = ({ children, title }: ILayoutProps) => {
   }, [refetch]);
 
   return (
-    <>
+    <div className="flex flex-col min-h-screen">
       <Header title={title} />
       <PageTitle title={title} />
-      {children}
+      <main className="flex-grow">
+        {children}
+      </main>
       <Footer />
       <Stickynav />
-    </>
+    </div>
   );
 };