From 99e756c50835ff8fb73a6b823f814a0316a1d4e7 Mon Sep 17 00:00:00 2001 From: Dorian Niemiec Date: Tue, 5 Nov 2024 21:14:06 +0100 Subject: [PATCH] feat: add the header --- app/(root)/layout.jsx | 31 +++++ app/(root)/page.js | 5 - app/(root)/{layout.js => page.jsx} | 20 +-- app/{layout.js => layout.jsx} | 14 +-- components/Header.jsx | 189 +++++++++++++++++++++++++++++ components/Logo.jsx | 51 ++++++++ constants/index.jsx | 23 ++++ package-lock.json | 15 ++- package.json | 2 + 9 files changed, 324 insertions(+), 26 deletions(-) create mode 100644 app/(root)/layout.jsx delete mode 100644 app/(root)/page.js rename app/(root)/{layout.js => page.jsx} (81%) rename app/{layout.js => layout.jsx} (91%) create mode 100644 components/Header.jsx create mode 100644 components/Logo.jsx create mode 100644 constants/index.jsx diff --git a/app/(root)/layout.jsx b/app/(root)/layout.jsx new file mode 100644 index 0000000..4656e47 --- /dev/null +++ b/app/(root)/layout.jsx @@ -0,0 +1,31 @@ +import Header from "@/components/Header"; + +export default function RootLayout({ children }) { + return ( +
+
+ {/*
*/} +
{children}
+
+ ); +} diff --git a/app/(root)/page.js b/app/(root)/page.js deleted file mode 100644 index 5d01b56..0000000 --- a/app/(root)/page.js +++ /dev/null @@ -1,5 +0,0 @@ -function Home() { - return
Placeholder
; -} - -export default Home; diff --git a/app/(root)/layout.js b/app/(root)/page.jsx similarity index 81% rename from app/(root)/layout.js rename to app/(root)/page.jsx index bca4e7d..2c10383 100644 --- a/app/(root)/layout.js +++ b/app/(root)/page.jsx @@ -1,5 +1,3 @@ -import { ThemeProvider } from "next-themes"; - export const metadata = { title: "MERNMail - a MERN stack webmail application", description: @@ -15,9 +13,9 @@ export const metadata = { url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`, width: 2560, height: 1440, - alt: "MERNMail - a MERN stack webmail application", - }, - ], + alt: "MERNMail - a MERN stack webmail application" + } + ] }, twitter: { card: "summary_large_image", @@ -26,12 +24,14 @@ export const metadata = { description: "MERNMail: Open-source webmail app built with MERN stack. Send, receive, & manage emails easily. Explore and contribute today!", images: [ - `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`, + `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png` ], - creator: "@MERNMail", - }, + creator: "@MERNMail" + } }; -export default function RootLayout({ children }) { - return <>{children}; +function Home() { + return
Placeholder
; } + +export default Home; diff --git a/app/layout.js b/app/layout.jsx similarity index 91% rename from app/layout.js rename to app/layout.jsx index 4fbe0df..539d6a0 100644 --- a/app/layout.js +++ b/app/layout.jsx @@ -4,7 +4,7 @@ import "./globals.css"; const inter = Inter({ weight: ["400", "600", "700", "900"], - subsets: ["latin"], + subsets: ["latin"] }); export const metadata = { @@ -22,9 +22,9 @@ export const metadata = { url: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`, width: 2560, height: 1440, - alt: "MERNMail - a MERN stack webmail application", - }, - ], + alt: "MERNMail - a MERN stack webmail application" + } + ] }, twitter: { card: "summary_large_image", @@ -33,10 +33,10 @@ export const metadata = { description: "MERNMail: Open-source webmail app built with MERN stack. Send, receive, & manage emails easily. Explore and contribute today!", images: [ - `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png`, + `${process.env.NEXT_PUBLIC_WEBSITE_URL}/metadata/mernmail-cover.png` ], - creator: "@MERNMail", - }, + creator: "@MERNMail" + } }; export default function RootLayout({ children }) { diff --git a/components/Header.jsx b/components/Header.jsx new file mode 100644 index 0000000..205e657 --- /dev/null +++ b/components/Header.jsx @@ -0,0 +1,189 @@ +"use client"; +import Logo from "@/components/Logo"; +import { headerLinks } from "@/constants"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; +import { Menu, Moon, Sun, X } from "lucide-react"; +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; +import PropTypes from "prop-types"; + +function Header({ docLinks }) { + const pathname = usePathname(); + const [menuShown, setMenuShown] = useState(false); + const { resolvedTheme, setTheme } = useTheme(); + + useEffect(() => { + if (menuShown) { + document.documentElement.style.overflow = "hidden"; + } else { + document.documentElement.style.overflow = null; + } + }, [menuShown]); + + return ( +
+
+ + MERNMail logo + + + + + + Git + + + + + + + +
+ +
+ ); +} + +Header.propTypes = { + docLinks: PropTypes.arrayOf(PropTypes.object) +}; + +export default Header; diff --git a/components/Logo.jsx b/components/Logo.jsx new file mode 100644 index 0000000..6506bcb --- /dev/null +++ b/components/Logo.jsx @@ -0,0 +1,51 @@ +const Logo = (props) => ( + + + + + + + + +); +export default Logo; diff --git a/constants/index.jsx b/constants/index.jsx new file mode 100644 index 0000000..cdbca6c --- /dev/null +++ b/constants/index.jsx @@ -0,0 +1,23 @@ +export const headerLinks = { + nav: [ + { + href: "/", + target: "_self", + label: "Home" + }, + { + href: "/docs", + target: "_self", + label: "Docs" + }, + { + href: "/blog", + target: "_self", + label: "Blog" + } + ], + git: { + href: "https://git.svrjs.org", + target: "_blank" + } +}; diff --git a/package-lock.json b/package-lock.json index fe74fa4..3a77a4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "mernmail-website", "version": "0.1.0", "dependencies": { + "lucide-react": "^0.454.0", "next": "^15.0.2", "next-themes": "^0.4.3", + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1" }, @@ -6822,6 +6824,14 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "dev": true }, + "node_modules/lucide-react": { + "version": "0.454.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz", + "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/meow": { "version": "12.1.1", "resolved": "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz", @@ -7133,7 +7143,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -7749,7 +7758,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -7839,8 +7847,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/read-cache": { "version": "1.0.0", diff --git a/package.json b/package.json index ba8bd03..457c906 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ "cz": "cz" }, "dependencies": { + "lucide-react": "^0.454.0", "next": "^15.0.2", "next-themes": "^0.4.3", + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1" },