simple navbar made with color change
This commit is contained in:
parent
d8c8bd7667
commit
14f6efc2c5
33
Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
Normal file
33
Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import Jefes from "../../../public/jefes_logo.jpg";
|
||||
|
||||
const NavBar = () => {
|
||||
// Create an array to hold the list items
|
||||
const links = [
|
||||
{ label: "Dashboard", href: "/" },
|
||||
{ label: "Issues", href: "/" },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="flex gap-4 border-b mb-5 px-5 h-14 items-center">
|
||||
<Link href="/">
|
||||
<Image src={Jefes} width={50} height="auto" alt="Logo" />
|
||||
</Link>
|
||||
<ul className="flex gap-4 hover:cursor-pointer">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
className="text-zinc-500 hover:text-zinc-800"
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavBar;
|
||||
@ -13,6 +13,6 @@
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 1rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import NavBar from './components/NavBar/NavBar'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
@ -16,7 +17,10 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" data-theme="winter">
|
||||
<body className={inter.className}>{children}</body>
|
||||
<body className={inter.className}>
|
||||
<NavBar />
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import ProductCard from './components/ProductCard/ProductCard';
|
||||
|
||||
|
||||
BIN
Websites/jefes-nextjs/public/jefes_logo.jpg
Normal file
BIN
Websites/jefes-nextjs/public/jefes_logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
1642
Websites/jefes-nextjs/public/logo.svg
Normal file
1642
Websites/jefes-nextjs/public/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 581 KiB |
Loading…
Reference in New Issue
Block a user