Make the navbar responsive

Frontend/src/app/components/navbar.tsx

@@ -3,6 +3,7 @@ import config from "@/config";
 import { minecrafter } from "@/font/fonts";
 import { cn } from "@/lib/utils";
 import { StarIcon } from "@heroicons/react/24/outline";
+import Image from "next/image";
 import Link from "next/link";
 
 /**
@@ -11,9 +12,9 @@ import Link from "next/link";
  * @returns the navbar jsx
  */
 const Navbar = (): JSX.Element => (
-	<nav className="fixed inset-x-0 flex h-16 px-12 justify-between items-center bg-navbar-background">
+	<nav className="fixed inset-x-0 flex h-16 px-12 justify-center sm:justify-between items-center bg-navbar-background">
 		{/* Left */}
-		<div className="flex gap-16 items-center">
+		<div className="flex gap-7 xs:gap-16 items-center">
 			{/* App Branding */}
 			<Link
 				className={cn(
@@ -22,7 +23,17 @@ const Navbar = (): JSX.Element => (
 				)}
 				href="/"
 			>
-				{config.siteName}
+				{/* Small Screens */}
+				<Image
+					className="flex md:hidden"
+					src="/media/logo.webp"
+					alt="Site Logo"
+					width={42}
+					height={42}
+				/>
+
+				{/* Large Screens */}
+				<span className="hidden md:flex">{config.siteName}</span>
 			</Link>
 
 			{/* Links */}
@@ -40,7 +51,7 @@ const Navbar = (): JSX.Element => (
 		</div>
 
 		{/* Social Buttons */}
-		<div>
+		<div className="hidden sm:flex">
 			{/* Star on Github <3 */}
 			<MinecraftButton>
 				<Link