Rainnny/RESTfulMC
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Wiki Activity

Make the navbar responsive

Browse Source
This commit is contained in:
Braydon 2024-04-15 22:53:23 -04:00
parent 18c298376a
commit 061b7df8b1
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Frontend/src/app/components/navbar.tsx
View File

@ -3,6 +3,7 @@ import config from "@/config";
import { minecrafter } from "@/font/fonts"; import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { StarIcon } from "@heroicons/react/24/outline"; import { StarIcon } from "@heroicons/react/24/outline";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
/** /**
@ -11,9 +12,9 @@ import Link from "next/link";
* @returns the navbar jsx * @returns the navbar jsx
*/ */
const Navbar = (): JSX.Element => ( 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 */} {/* Left */}
<div className="flex gap-16 items-center"> <div className="flex gap-7 xs:gap-16 items-center">
{/* App Branding */} {/* App Branding */}
<Link <Link
className={cn( className={cn(
@ -22,7 +23,17 @@ const Navbar = (): JSX.Element => (
)} )}
href="/" 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> </Link>
{/* Links */} {/* Links */}
@ -40,7 +51,7 @@ const Navbar = (): JSX.Element => (
</div> </div>
{/* Social Buttons */} {/* Social Buttons */}
<div> <div className="hidden sm:flex">
{/* Star on Github <3 */} {/* Star on Github <3 */}
<MinecraftButton> <MinecraftButton>
<Link <Link