Skip to content

Commit

Permalink
Mobile view fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tyaga001
tyaga001 committed Sep 27, 2024
1 parent 28000de commit 63f98ce
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 33 deletions.
Binary file added public/images/T.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 95 additions & 33 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,107 @@
'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { ModeToggle } from '@/components/mode-toggle';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from '@/components/ui/dropdown-menu';
import { Github, Menu } from 'lucide-react';
import { Sponsor } from '@/components/Sponsor';

import { Github, Menu, X, Heart } from 'lucide-react';
import StylizedSiteName from './StylizedSiteName';

export default function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

const navItems = [
{ name: 'Home', path: '/' },
{ name: 'Blog', path: '/blog' },
];

return (
<nav className="border-b border-gray-200 dark:border-gray-700 bg-black dark:bg-gray-900">
<div className="container mx-auto flex items-center justify-between py-4 px-6">
<div className="flex items-center space-x-4">
<Link href="/" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline">
Home
</Link>
<Link href="/blog" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline">
Blog
</Link>
{/* <Link href="/contribute" className="text-lg font-semibold text-white-900 dark:text-gray-100 hover:underline">
Contribute
</Link>*/}
</div>
<div className="flex items-center space-x-4">
<Sponsor />
<Button
onClick={() => window.open("https://github.com/tyaga001/devtoolsacademy", "_blank", "noopener,noreferrer")}
variant="outline"
className="flex items-center space-x-2"
>
<Github className="w-5 h-5" />
<span>Star on GitHub</span>
</Button>
<nav className="bg-black text-white">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-20">
<StylizedSiteName />
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navItems.map((item) => (
<Link
key={item.name}
href={item.path}
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition duration-150 ease-in-out"
>
{item.name}
</Link>
))}
<Button
onClick={() => window.open("https://github.com/tyaga001/devtoolsacademy", "_blank", "noopener,noreferrer")}
variant="outline"
className="flex items-center space-x-2 bg-transparent border border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-gray-900 transition duration-150 ease-in-out"
>
<Github className="w-5 h-5" />
<span>Star on GitHub</span>
</Button>
<Button
asChild
variant="outline"
className="flex items-center space-x-2 bg-transparent border border-pink-400 text-pink-400 hover:bg-pink-400 hover:text-gray-900 transition duration-150 ease-in-out"
>
<Link href="/sponsor">
<Heart className="w-5 h-5" />
<span>Sponsor</span>
</Link>
</Button>
</div>
</div>
<div className="md:hidden">
<button
onClick={toggleMenu}
className="inline-flex items-center justify-center p-2 rounded-md text-purple-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-400"
>
<span className="sr-only">Open main menu</span>
{isMenuOpen ? (
<X className="block h-6 w-6" aria-hidden="true" />
) : (
<Menu className="block h-6 w-6" aria-hidden="true" />
)}
</button>
</div>
</div>
</div>

{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{navItems.map((item) => (
<Link
key={item.name}
href={item.path}
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 transition duration-150 ease-in-out"
onClick={toggleMenu}
>
{item.name}
</Link>
))}
<a
href="https://github.com/tyaga001/devtoolsacademy"
target="_blank"
rel="noopener noreferrer"
className="block px-3 py-2 rounded-md text-base font-medium text-purple-400 hover:bg-gray-800 transition duration-150 ease-in-out"
onClick={toggleMenu}
>
<Github className="inline-block mr-2 h-5 w-5" />
Star on GitHub
</a>
<Link
href="/sponsor"
className="block px-3 py-2 rounded-md text-base font-medium text-pink-400 hover:bg-gray-800 transition duration-150 ease-in-out"
onClick={toggleMenu}
>
<Heart className="inline-block mr-2 h-5 w-5" />
Sponsor
</Link>
</div>
</div>
)}
</nav>
);
}
18 changes: 18 additions & 0 deletions src/components/StylizedSiteName.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

const StylizedSiteName = () => {
return (
<Link href="/" className="flex items-center space-x-2 group">
<Image src="/images/T.png" alt="DevToolsAcademy Logo" width={40} height={40} className="rounded-full" />
<div className="flex items-baseline">
<span className="text-2xl font-extrabold tracking-tighter text-white group-hover:text-purple-400 transition-colors duration-300">Dev</span>
<span className="text-lg font-bold tracking-tight bg-gradient-to-r from-purple-400 to-pink-500 text-transparent bg-clip-text group-hover:from-purple-300 group-hover:to-pink-400 transition-colors duration-300">Tools</span>
<span className="text-sm font-medium tracking-wide text-gray-300 group-hover:text-pink-300 transition-colors duration-300 ml-0.5">Academy</span>
</div>
</Link>
);
};

export default StylizedSiteName;

0 comments on commit 63f98ce

Please sign in to comment.