fix: added print: tailwind classes to hide appbar and footer while pr…

…inting
code100x · Mar 28, 2024 · a78058e · a78058e
1 parent 7c3917a
commit a78058e
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 23 deletions.
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
@@ -21,10 +21,7 @@ export const Appbar = () => {
   const currentPath = usePathname();
   return (
     <>
-      <nav
-        id="appbar-nav"
-        className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2"
-      >
+      <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2 print:hidden">
         {currentPath.includes('courses') && (
           <ToggleButton
             onClick={() => {
@@ -92,7 +89,7 @@ export const Appbar = () => {
           )}
         </div>
       </nav>
-      <div className="h-16 w-full" id="appbar-placeholder" />
+      <div className="h-16 w-full print:hidden" />
     </>
   );
 };
diff --git a/src/components/landing/footer/footer.tsx b/src/components/landing/footer/footer.tsx
@@ -6,10 +6,7 @@ import Logo from '../logo/logo';
 
 const Footer = () => {
   return (
-    <div
-      id="footer"
-      className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36"
-    >
+    <div className="bottom-0 w-full p-4 bg-neutral-900 dark:bg-slate-900 px-6 lg:px-36 print:hidden">
       <div className="md:max-w-screen-2xl mt-4 mx-auto flex flex-row items-start justify-between w-full">
         <div className="flex flex-col md:flex-row w-3/5 md:justify-between">
           <div className="flex">

diff --git a/src/components/print/Print.tsx b/src/components/print/Print.tsx
@@ -20,20 +20,6 @@ export function Print() {
       e.style.marginBottom = '0px';
     });
 
-    // Removing layout header and footer from print
-    const appbar = document.getElementById('appbar-nav');
-    const footer = document.getElementById('footer');
-    const appbarPlaceholder = document.getElementById('appbar-placeholder');
-    if (appbar) {
-      appbar.style.display = 'none';
-    }
-    if (appbarPlaceholder) {
-      appbarPlaceholder.style.display = 'none';
-    }
-    if (footer) {
-      footer.style.display = 'none';
-    }
-
     setTimeout(() => {
       print();
       opened = true;