fix: fixed footer not showing on mobile (#259)

nthumodifications · Apr 2, 2024 · 167c10c · 167c10c
2 parents 179ecdf + ee23779
commit 167c10c
Showing 1 changed file with 32 additions and 40 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -6,47 +6,39 @@ import NTHUModsLogo from "@/components/Branding/NTHUModsLogo"
 import Link from "next/link"
 
 const Footer = () => {
-  return (
-    <footer className="hidden md:grid w-screen py-16 grid-cols-2">
-      <div className="">
-
-        <div className="flex gap-4">
-          <NTHUModsLogo/>
-          <div className="flex flex-col">
-            <FullLogo/>
-            <p className="text-muted-foreground text-sm">Made with ❤️ by students for students</p>
-          </div>
-        </div>
-
-        <div className="py-2">
-          <p className="text-xs text-gray-600 dark:text-gray-400">We desperately need more contributers, join us if you're interested</p>
-          <p className="text-xs text-gray-600 dark:text-gray-400">就是你！我們很需要你加入我們，讓這個平臺更加完善！</p>
-        </div>
-
-        <Button variant="ghost" size="icon" asChild>
-          <Link target="_blank" href="https://github.com/nthumodifications/courseweb">
-            <Github/>
-          </Link>
-        </Button>
-        <Button variant="ghost" size="icon" asChild>
-          <Link target="_blank" href="mailto:nthumods@gmail.com">
-            <Mail/>
-          </Link>
-        </Button>
-        <Button variant="ghost" size="icon" asChild>
-          <Link target="_blank" href="https://www.instagram.com/nthumods">
-            <Instagram />
-          </Link>
-        </Button>
-        <Button variant="ghost" size="icon" asChild>
-          <Link target="_blank" href="https://facebook.com/nthumods">
-            <Facebook />
-          </Link>
-        </Button>
-
+  return <div className="py-16 flex flex-col gap-1">
+    <div className="flex gap-3">
+      <div className="-translate-y-1">
+        <NTHUModsLogo/>
+      </div>
+      <div className="flex flex-col">
+        <FullLogo/>
+        <p className="text-muted-foreground text-xs">Made with ❤️ by students for students</p>
       </div>
-    </footer>
-  );
+    </div>
+    <div className="flex gap-2">
+      <Button className="h-8 w-8" variant="ghost" size="icon" asChild>
+        <Link target="_blank" href="https://github.com/nthumodifications/courseweb">
+          <Github size="20" className="text-muted-foreground"/>
+        </Link>
+      </Button>
+      <Button className="h-8 w-8" variant="ghost" size="icon" asChild>
+        <Link target="_blank" href="mailto:nthumods@gmail.com">
+          <Mail size="20" className="text-muted-foreground"/>
+        </Link>
+      </Button>
+      <Button className="h-8 w-8" variant="ghost" size="icon" asChild>
+        <Link target="_blank" href="https://www.instagram.com/nthumods">
+          <Instagram size="20" className="text-muted-foreground"/>
+        </Link>
+      </Button>
+      <Button className="h-8 w-8" variant="ghost" size="icon" asChild>
+        <Link target="_blank" href="https://facebook.com/nthumods">
+          <Facebook size="20" className="text-muted-foreground"/>
+        </Link>
+      </Button>
+    </div>
+  </div>
 }
 
 export default Footer;