chore: github button in navbar (#1101)

* add github button

* cleanup

* type

Author: ameer2468

apps/web/app/(site)/Navbar.tsx

@@ -2,7 +2,6 @@
 
 import {
 	Button,
-	ListItem,
 	Logo,
 	NavigationMenu,
 	NavigationMenuContent,
@@ -15,6 +14,7 @@ import {
 import { classNames } from "@cap/utils";
 import { Clapperboard, Zap } from "lucide-react";
 import { motion } from "motion/react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Suspense, use, useEffect, useState } from "react";
@@ -131,8 +131,8 @@ export const Navbar = () => {
 
 	return (
 		<>
-			<header className="fixed top-4 left-0 right-0 z-[51] md:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
-				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md md:max-w-fit border-zinc-200 h-fit">
+			<header className="fixed top-4 left-0 right-0 z-[51] lg:top-10  animate-in fade-in slide-in-from-top-4 duration-500">
+				<nav className="p-2 mx-auto w-full max-w-[calc(100%-20px)] bg-white rounded-full border backdrop-blur-md lg:max-w-fit border-zinc-200 h-fit">
 					<div className="flex gap-12 justify-between items-center mx-auto max-w-4xl h-full transition-all">
 						<div className="flex items-center">
 							<Link passHref href="/home">
@@ -146,7 +146,7 @@ export const Navbar = () => {
 									}}
 								/>
 							</Link>
-							<div className="hidden md:flex">
+							<div className="hidden lg:flex">
 								<NavigationMenu>
 									<NavigationMenuList className="space-x-0">
 										{Links.map((link) => (
@@ -169,9 +169,9 @@ export const Navbar = () => {
 																				href={sublink.href}
 																				className="block p-3 space-y-1 leading-none no-underline rounded-md transition-all duration-200 outline-none select-none hover:bg-gray-2 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
 																			>
-																				<div className="flex items-center gap-2 text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
+																				<div className="flex gap-2 items-center text-base font-medium leading-none transition-colors duration-200 text-zinc-700 group-hover:text-zinc-900">
 																					{sublink.icon && sublink.icon}
-																					<span className="text-gray-12 font-semibold">
+																					<span className="font-semibold text-gray-12">
 																						{sublink.label}
 																					</span>
 																				</div>
@@ -206,7 +206,24 @@ export const Navbar = () => {
 								</NavigationMenu>
 							</div>
 						</div>
-						<div className="hidden items-center space-x-2 md:flex">
+						<div className="hidden items-center space-x-2 lg:flex">
+							<Button
+								variant="outline"
+								icon={
+									<Image
+										src="/github.svg"
+										alt="Github"
+										width={16}
+										height={16}
+									/>
+								}
+								target="_blank"
+								href="https://github.com/CapSoftware/Cap"
+								size="sm"
+								className="w-full font-medium sm:w-auto"
+							>
+								Github
+							</Button>
 							<Suspense
 								fallback={
 									<Button
@@ -234,7 +251,7 @@ export const Navbar = () => {
 						</div>
 						<button
 							type="button"
-							className="flex md:hidden"
+							className="flex lg:hidden"
 							onClick={() => setShowMobileMenu(!showMobileMenu)}
 						>
 							<div className="flex flex-col gap-[5px] mr-1">

apps/web/components/ui/MobileMenu.tsx

@@ -56,9 +56,8 @@ const externalLinks: NavLink[] = [
 ];
 
 const MobileMenu: React.FC<MobileMenuProps> = ({ setShowMobileMenu, auth }) => {
-	console.log(auth, "auth");
 	return (
-		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2 md:hidden">
+		<div className="block overflow-auto fixed top-0 left-0 z-40 px-4 w-full h-full bg-gray-2">
 			<div className="pb-12">
 				<nav className="relative mt-24 mobile">
 					<ul className="p-0 space-y-4">

apps/web/public/github.svg

@@ -19,7 +19,7 @@ const buttonVariants = cva(
 				destructive:
 					"bg-red-500 text-white hover:bg-red-600 disabled:bg-red-200",
 				outline:
-					"border border-gray-4 hover:border-gray-12 hover:bg-gray-12 hover:text-gray-1 text-gray-12 disabled:bg-gray-8",
+					"border border-gray-4 hover:border-gray-5 hover:bg-gray-3 text-gray-12 disabled:bg-gray-8",
 				white:
 					"bg-gray-1 border border-gray-5 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
@@ -49,6 +49,7 @@ export interface ButtonProps
 	href?: string;
 	kbd?: string;
 	icon?: React.ReactNode;
+	target?: string;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -62,6 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			href,
 			kbd,
 			icon,
+			target,
 			...props
 		},
 		ref,
@@ -71,6 +73,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			<Comp
 				className={classNames(buttonVariants({ variant, size, className }))}
 				ref={ref as any}
+				target={target || undefined}
 				href={href || undefined}
 				{...props}
 			>