Skip to content

Commit dfec448

Browse files
ariflogsariflogs
committed
added top nav
1 parent 957ffde commit dfec448

File tree

12 files changed

+215
-28
lines changed

12 files changed

+215
-28
lines changed

‎app/(marketing)/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import Link from "next/link";
1717
export default function Home() {
1818
return (
1919
<main className="space-y-36">
20-
<section className="container max-w-6xl mx-auto mt-36 px-4 text-center text-gray-900">
20+
<section className="container max-w-6xl mx-auto mt-36 text-center text-gray-900">
2121
<H1>Make your projects</H1>
2222
<H1 className="text-outlined">stand out!</H1>
2323

@@ -132,7 +132,7 @@ export default function Home() {
132132
<footer className="bg-black py-8">
133133
<div className="container max-w-6xl mx-auto flex justify-between items-center">
134134
<p className="text-gray-300 text-sm">
135-
Built by <a className="text-primary-500">Arif Hossain</a>.
135+
Built by <a href="https://twitter.com/ariflogs" className="text-primary-500">Arif Hossain</a>.
136136
</p>
137137
<div className="flex justify-center space-x-4 mb-6">
138138
<a

‎app/layout.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import "./global.css"
1+
import TopNav from "@/components/TopNav";
2+
import "./global.css";
23
import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
34

45
const archivoBlack = Archivo_Black({
56
subsets: ["latin"],
67
weight: "400",
7-
variable: '--font-head',
8+
variable: "--font-head",
89
});
910

1011
const shareTech = Share_Tech({
1112
subsets: ["latin"],
1213
weight: "400",
13-
variable: '--font-sans',
14+
variable: "--font-sans",
1415
});
1516

1617
const shareTechMono = Share_Tech_Mono({
1718
subsets: ["latin"],
1819
weight: "400",
19-
variable: '--font-mono',
20+
variable: "--font-mono",
2021
});
2122

2223
export default function RootLayout({
2324
children,
2425
}: {
25-
children: React.ReactNode
26+
children: React.ReactNode;
2627
}) {
2728
return (
2829
<html lang="en">
29-
<body className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}>{children}</body>
30+
<body
31+
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
32+
>
33+
<div className="mb-8 relative z-10">
34+
<TopNav />
35+
</div>
36+
{children}
37+
</body>
3038
</html>
31-
)
39+
);
3240
}

‎components/HamburgerMenu.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import SideNav from "./SideNav";
5+
import { AlignJustify, X } from "lucide-react";
6+
import { Button } from "@/packages/ui";
7+
8+
export default function HamburgerMenu() {
9+
const [isOpen, setIsOpen] = useState(false);
10+
11+
return (
12+
<div>
13+
<Button
14+
size="sm"
15+
variant="outline"
16+
onClick={() => setIsOpen((prev) => !prev)}
17+
>
18+
{isOpen ? <X /> : <AlignJustify />}
19+
</Button>
20+
{isOpen && <SideNav />}
21+
</div>
22+
);
23+
}

‎components/SideNav.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Link from "next/link";
2+
3+
const navItems = [
4+
{ title: "Getting Started", route: "/components" },
5+
{ title: "Accordions", route: "/components/accordions" },
6+
{ title: "Avatars", route: "/components/avatars" },
7+
// { title: "Badges", route: "/components/badges" },
8+
{ title: "Buttons", route: "/components/buttons" },
9+
{ title: "Cards", route: "/components/cards" },
10+
{ title: "Inputs", route: "/components/inputs" },
11+
{ title: "Textareas", route: "/components/textareas" },
12+
{ title: "Typography", route: "/components/typography" },
13+
];
14+
15+
export default function SideNav() {
16+
return (
17+
<div
18+
className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
19+
>
20+
<nav className="flex flex-col items-start p-6 space-y-2">
21+
{navItems.map((item) => (
22+
<Link key={item.route} href={item.route}>
23+
{item.title}
24+
</Link>
25+
))}
26+
</nav>
27+
</div>
28+
);
29+
}

‎components/TopNav.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import { GitBranchIcon, GithubIcon } from "lucide-react";
4+
import HamburgerMenu from "./HamburgerMenu";
5+
import { Button } from "@/packages/ui";
6+
7+
export default function TopNav() {
8+
return (
9+
<nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
10+
<div className="container max-w-6xl mx-auto">
11+
<div className="flex justify-between items-center h-16">
12+
{/* Logo Section */}
13+
<div className="flex-shrink-0">
14+
<a
15+
href="/"
16+
className="text-black font-head text-2xl flex items-end"
17+
>
18+
<img
19+
src="/images/logo_full.png"
20+
alt="retro ui logo"
21+
className="w-16 mr-2"
22+
/>
23+
RetroUI
24+
</a>
25+
</div>
26+
27+
{/* Navigation Links */}
28+
<div className="hidden md:flex space-x-8">
29+
<a
30+
href="/components"
31+
className="hover:text-primary-500 transition-all"
32+
>
33+
Documentation
34+
</a>
35+
<a
36+
href="/components/buttons"
37+
className="hover:text-primary-500 transition-all"
38+
>
39+
Components
40+
</a>
41+
</div>
42+
43+
<div className="flex items-center space-x-4 lg:hidden">
44+
<Link
45+
href="https://github.com/ariflogs/retroui"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
<GithubIcon />
50+
</Link>
51+
<HamburgerMenu />
52+
</div>
53+
<div className="hidden lg:flex items-center">
54+
<Link
55+
href="https://github.com/ariflogs/retroui"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<Button className="flex items-center" variant="outline" size="sm">
60+
<GithubIcon size="16" className="mr-2" />
61+
Star on GitHub
62+
</Button>
63+
</Link>
64+
</div>
65+
</div>
66+
</div>
67+
</nav>
68+
);
69+
}

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,19 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"lucide-react": "^0.445.0",
13+
"next": "14.2.7",
1214
"react": "^18",
13-
"react-dom": "^18",
14-
"next": "14.2.7"
15+
"react-dom": "^18"
1516
},
1617
"devDependencies": {
17-
"typescript": "^5",
1818
"@types/node": "^20",
1919
"@types/react": "^18",
2020
"@types/react-dom": "^18",
21+
"eslint": "^8",
22+
"eslint-config-next": "14.2.7",
2123
"postcss": "^8",
2224
"tailwindcss": "^3.4.1",
23-
"eslint": "^8",
24-
"eslint-config-next": "14.2.7"
25+
"typescript": "^5"
2526
}
2627
}

‎packages/ui/Buttons/IconButton.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React, { ButtonHTMLAttributes } from "react";
2+
3+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
4+
size?: "sm" | "md" | "lg";
5+
className?: string;
6+
variant?: "primary" | "outline" | "link";
7+
}
8+
9+
export function IconButton({
10+
children,
11+
size = "md",
12+
className = "",
13+
variant = "primary",
14+
...props
15+
}: ButtonProps) {
16+
const sizeClasses = {
17+
sm: "p-2",
18+
md: "p-3",
19+
lg: "p-4",
20+
};
21+
22+
const variantClasses = {
23+
primary:
24+
"bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
25+
outline: "bg-transparent text-black border-2 border-black",
26+
link: "bg-transparent text-primary-400 hover:underline",
27+
};
28+
29+
return (
30+
<button
31+
className={`font-head border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
32+
{...props}
33+
>
34+
{children}
35+
</button>
36+
);
37+
}

0 commit comments

Comments
 (0)