Skip to content

Commit 823d115

Browse files
Hridoy-Ahmed163Hridoy-Ahmed163
committed
fixed the navbar for nextjs app routing issue.
1 parent 94be5a7 commit 823d115

11 files changed

+415
-167
lines changed

‎app/globals.css

+5-18
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,57 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
6+
57
@layer base {
68
:root {
79
--background: 0 0% 100%;
810
--foreground: 222.2 84% 4.9%;
9-
1011
--card: 0 0% 100%;
1112
--card-foreground: 222.2 84% 4.9%;
12-
1313
--popover: 0 0% 100%;
1414
--popover-foreground: 222.2 84% 4.9%;
15-
1615
--primary: 222.2 47.4% 11.2%;
1716
--primary-foreground: 210 40% 98%;
18-
1917
--secondary: 210 40% 96.1%;
2018
--secondary-foreground: 222.2 47.4% 11.2%;
21-
2219
--muted: 210 40% 96.1%;
2320
--muted-foreground: 215.4 16.3% 46.9%;
24-
2521
--accent: 210 40% 96.1%;
2622
--accent-foreground: 222.2 47.4% 11.2%;
27-
2823
--destructive: 0 84.2% 60.2%;
2924
--destructive-foreground: 210 40% 98%;
30-
3125
--border: 214.3 31.8% 91.4%;
3226
--input: 214.3 31.8% 91.4%;
3327
--ring: 222.2 84% 4.9%;
34-
3528
--radius: 0.5rem;
3629
}
3730

3831
.dark {
3932
--background: 222.2 84% 4.9%;
4033
--foreground: 210 40% 98%;
41-
4234
--card: 222.2 84% 4.9%;
4335
--card-foreground: 210 40% 98%;
44-
4536
--popover: 222.2 84% 4.9%;
4637
--popover-foreground: 210 40% 98%;
47-
4838
--primary: 210 40% 98%;
4939
--primary-foreground: 222.2 47.4% 11.2%;
50-
5140
--secondary: 217.2 32.6% 17.5%;
5241
--secondary-foreground: 210 40% 98%;
53-
5442
--muted: 217.2 32.6% 17.5%;
5543
--muted-foreground: 215 20.2% 65.1%;
56-
5744
--accent: 217.2 32.6% 17.5%;
5845
--accent-foreground: 210 40% 98%;
59-
6046
--destructive: 0 62.8% 30.6%;
6147
--destructive-foreground: 210 40% 98%;
62-
6348
--border: 217.2 32.6% 17.5%;
6449
--input: 217.2 32.6% 17.5%;
65-
--ring: 212.7 26.8% 83.9%;
50+
--ring: 212.7 26.8% 83.9;
6651
}
6752
}
6853

54+
55+
6956
@layer base {
7057
* {
7158
@apply border-border;

‎app/home/page.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function Page() {
2+
return
3+
4+
<h1>Hello, Next.js!</h1>
5+
}

‎app/layout.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { ThemeProvider } from "@/components/theme-provider";
44
import Navbar from "@/components/Navbar";
55

66

7+
8+
79
export const metadata: Metadata = {
8-
title: "Create Next App",
10+
title: "Mark",
911
description: "Generated by create next app",
1012
};
1113

‎app/page.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,12 @@ import { poppins, roboto } from "@/font/fonts";
55
export default function Home() {
66
return (
77
<main>
8-
9-
10-
11-
12-
{/* <div className='m-5'>
13-
<p className={roboto.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus at voluptatum est sint corporis ea dolorem tenetur? Voluptatibus quisquam atque perspiciatis, veritatis enim harum omnis! Iste atque, sunt eveniet, id porro voluptatum eum ipsum quia magni modi beatae placeat! Veritatis eligendi distinctio animi inventore fuga quo odit corrupti perferendis consectetur repudiandae quibusdam, ut, consequuntur quasi totam est incidunt optio quaerat culpa a id necessitatibus vero labore deserunt esse. Quos ullam officia, provident dolores unde saepe delectus quidem sit nihil, necessitatibus amet voluptates quisquam. Ducimus, labore fugiat. Minima sunt ipsum illum dolore quos iure, dolor incidunt dignissimos libero eius eum dolores.</p>
14-
</div>
158
<div className='m-5'>
16-
<p className={poppins.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ad error quidem maxime! Commodi veniam accusantium earum facere aut reprehenderit.</p>
17-
</div> */}
9+
<p className={roboto.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus at voluptatum est sint corporis ea dolorem tenetur? Voluptatibus quisquam atque perspiciatis, veritatis enim harum omnis! Iste atque, sunt eveniet, id porro voluptatum eum ipsum quia magni modi beatae placeat! Veritatis eligendi distinctio animi inventore fuga quo odit corrupti perferendis consectetur repudiandae quibusdam, ut, consequuntur quasi totam est incidunt optio quaerat culpa a id necessitatibus vero labore deserunt esse. Quos ullam officia, provident dolores unde saepe delectus quidem sit nihil, necessitatibus amet voluptates quisquam. Ducimus, labore fugiat. Minima sunt ipsum illum dolore quos iure, dolor incidunt dignissimos libero eius eum dolores.</p>
10+
</div>
11+
<div className='m-5'>
12+
<p className={poppins.className}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ad error quidem maxime! Commodi veniam accusantium earum facere aut reprehenderit.</p>
13+
</div>
1814
</main>
1915
);
2016
}

‎components/Navbar.tsx

+82-139
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,89 @@
1-
'use client';
2-
import { Fragment } from 'react';
3-
import { Disclosure, Menu, Transition } from '@headlessui/react';
4-
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline';
5-
import { ThemeToggle } from './theme-toggle';
1+
'use client'
2+
import Link from "next/link";
3+
import React, { useState } from "react";
4+
import { FaBars, FaTimes } from "react-icons/fa";
5+
import { ThemeToggle } from "./theme-toggle";
66

7-
const navigation = [
8-
{ name: 'Home', href: '#', current: true },
9-
{ name: 'About Me', href: '#', current: false },
10-
{ name: 'My Works', href: '#', current: false },
11-
{ name: 'Contact Me', href: '#', current: false },
12-
];
7+
const Navbar = () => {
8+
const [nav, setNav] = useState(false);
139

14-
function classNames(...classes: (string | undefined | null | false)[]): string {
15-
return classes.filter(Boolean).join(' ');
16-
}
10+
const links = [
11+
{
12+
id: 1,
13+
link: "home",
14+
},
15+
{
16+
id: 2,
17+
link: "about",
18+
},
19+
{
20+
id: 3,
21+
link: "portfolio",
22+
},
23+
{
24+
id: 4,
25+
link: "experience",
26+
},
27+
{
28+
id: 5,
29+
link: "contact",
30+
},
31+
];
1732

18-
export default function Navbar() {
1933
return (
20-
<Disclosure as="nav" className="">
21-
{({ open }) => (
22-
<>
23-
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
24-
<div className="relative flex h-16 items-center justify-between">
25-
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
26-
{/* Mobile menu button*/}
27-
<Disclosure.Button className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
28-
<span className="absolute -inset-0.5" />
29-
<span className="sr-only">Open main menu</span>
30-
{open ? (
31-
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
32-
) : (
33-
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
34-
)}
35-
</Disclosure.Button>
36-
</div>
37-
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
38-
<div className="flex flex-shrink-0 items-center">
39-
<h1 className="">Mark.Z</h1>
40-
</div>
41-
<div className="hidden sm:ml-6 sm:block">
42-
<div className="flex space-x-4">
43-
{navigation.map(item => (
44-
<a
45-
key={item.name}
46-
href={item.href}
47-
className={classNames(
48-
item.current
49-
? 'bg-gray-900 text-white'
50-
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
51-
'rounded-md px-3 py-2 text-sm font-medium'
52-
)}
53-
aria-current={item.current ? 'page' : undefined}
54-
>
55-
{item.name}
56-
</a>
57-
))}
58-
</div>
59-
</div>
60-
</div>
61-
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
62-
<Menu as="div" className="relative ml-3">
63-
<div>
64-
<ThemeToggle />
65-
</div>
66-
<Transition
67-
as={Fragment}
68-
enter="transition ease-out duration-100"
69-
enterFrom="transform opacity-0 scale-95"
70-
enterTo="transform opacity-100 scale-100"
71-
leave="transition ease-in duration-75"
72-
leaveFrom="transform opacity-100 scale-100"
73-
leaveTo="transform opacity-0 scale-95"
74-
>
75-
<Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
76-
<Menu.Item>
77-
{({ active }) => (
78-
<a
79-
href="#"
80-
className={classNames(
81-
active ? 'bg-gray-100' : '',
82-
'block px-4 py-2 text-sm text-gray-700'
83-
)}
84-
>
85-
Your Profile
86-
</a>
87-
)}
88-
</Menu.Item>
89-
<Menu.Item>
90-
{({ active }) => (
91-
<a
92-
href="#"
93-
className={classNames(
94-
active ? 'bg-gray-100' : '',
95-
'block px-4 py-2 text-sm text-gray-700'
96-
)}
97-
>
98-
Settings
99-
</a>
100-
)}
101-
</Menu.Item>
102-
<Menu.Item>
103-
{({ active }) => (
104-
<a
105-
href="#"
106-
className={classNames(
107-
active ? 'bg-gray-100' : '',
108-
'block px-4 py-2 text-sm text-gray-700'
109-
)}
110-
>
111-
Sign out
112-
</a>
113-
)}
114-
</Menu.Item>
115-
</Menu.Items>
116-
</Transition>
117-
</Menu>
118-
</div>
119-
</div>
120-
</div>
34+
<div className="flex justify-between items-center w-full h-16 px-4 fixed nav">
35+
<div>
36+
<h1 className="text-5xl font-signature ml-2">
37+
<a
38+
className="link-underline link-underline-black"
39+
href=""
40+
target="_blank"
41+
rel="noreferrer"
42+
>
43+
Mark
44+
</a>
45+
</h1>
46+
</div>
12147

122-
<Disclosure.Panel className="sm:hidden">
123-
<div className="space-y-1 px-2 pb-3 pt-2">
124-
{navigation.map(item => (
125-
<Disclosure.Button
126-
key={item.name}
127-
as="a"
128-
href={item.href}
129-
className={classNames(
130-
item.current
131-
? 'bg-gray-900 text-white'
132-
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
133-
'block rounded-md px-3 py-2 text-base font-medium'
134-
)}
135-
aria-current={item.current ? 'page' : undefined}
136-
>
137-
{item.name}
138-
</Disclosure.Button>
139-
))}
140-
</div>
141-
</Disclosure.Panel>
142-
</>
48+
<ul className="hidden md:flex">
49+
{links.map(({ id, link }) => (
50+
<li
51+
key={id}
52+
className="nav-links px-4 cursor-pointer capitalize font-medium hover:scale-105 hover:text-bold duration-200 link-underline"
53+
>
54+
<Link href={link}>{link}</Link>
55+
</li>
56+
))}
57+
<ThemeToggle />
58+
</ul>
59+
<div className="sm: flex gap-5">
60+
<div className="">
61+
<ThemeToggle />
62+
</div>
63+
<div
64+
onClick={() => setNav(!nav)}
65+
className="cursor-pointer m-auto z-10 text-gray-500 md:hidden"
66+
>
67+
{nav ? <FaTimes size={30} /> : <FaBars size={30} />}
68+
</div>
69+
</div>
70+
71+
{nav && (
72+
<ul className="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-screen bg-gradient-to-b from-black to-gray-800 text-gray-500">
73+
{links.map(({ id, link }) => (
74+
<li
75+
key={id}
76+
className="px-4 cursor-pointer capitalize py-6 text-4xl"
77+
>
78+
<Link onClick={() => setNav(!nav)} href={link}>
79+
{link}
80+
</Link>
81+
</li>
82+
))}
83+
</ul>
14384
)}
144-
</Disclosure>
85+
</div>
14586
);
146-
}
87+
};
88+
89+
export default Navbar;

0 commit comments

Comments
 (0)