basic nav setup

This commit is contained in:
Noah Swerhun 2023-07-23 17:26:35 -05:00
parent 4e08188a70
commit 1a3f46ea31
18 changed files with 223 additions and 151 deletions

View file

@ -0,0 +1,5 @@
const Accupuncture = () => {
return <div>Accupuncture</div>;
};
export default Accupuncture;

5
app/articles/page.tsx Normal file
View file

@ -0,0 +1,5 @@
const Articles = () => {
return <div>Articles</div>;
};
export default Articles;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

View file

@ -1,29 +1,16 @@
@import url(https://fonts.bunny.net/css?family=abel:400|cormorant:700|frank-ruhl-libre:300);
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(https://fonts.bunny.net/css?family=abel:400|cormorant:400|frank-ruhl-libre:300);
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
@layer base {
html {
scroll-behavior: smooth;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
@apply bg-primary-100;
@apply text-primary-500;
@apply font-abel;
}
}

View file

@ -1,22 +1,26 @@
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
import Navbar from "@/components/Navbar";
import "./globals.css";
import type { Metadata } from "next";
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "Dr. Richard Feely",
description: `Dr. Feely is a highly accomplished physician with over 25 years
of experience in osteopathic medicine, acupuncture, herbal medicine, and
family practice. He specializes in the treatment of neuromusculoskeletal
pain, especially back pain, neck pain and headaches.`,
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body>
<Navbar></Navbar>
{children}
</body>
</html>
)
);
}

5
app/nor/page.tsx Normal file
View file

@ -0,0 +1,5 @@
const NeuroOcularRelease = () => {
return <div>NeuroOcularRelease</div>;
};
export default NeuroOcularRelease;

5
app/osteopathy/page.tsx Normal file
View file

@ -0,0 +1,5 @@
const Osteopathy = () => {
return <div>Osteopathy</div>;
};
export default Osteopathy;

View file

@ -1,113 +1,5 @@
import Image from 'next/image'
const Home = () => {
return <div>Home</div>;
};
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore the Next.js 13 playground.
</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
)
}
export default Home;

View file

@ -0,0 +1,37 @@
import Link from "next/link";
import { ReactNode } from "react";
interface Props {
page: string;
currentPage: string;
setCurrentPage: (page: string) => void;
currentPageClasses: string;
children: ReactNode;
}
const NavLink = ({
page,
currentPage,
setCurrentPage,
currentPageClasses,
children,
}: Props) => {
const defaultClasses =
"font-bold drop-shadow hover:text-primary-100 transition-all duration-500 ";
return (
<Link
className={
currentPage === page
? defaultClasses + currentPageClasses
: defaultClasses
}
href={page}
onClick={() => setCurrentPage(page)}
>
{children}
</Link>
);
};
export default NavLink;

View file

@ -0,0 +1,56 @@
import { useState } from "react";
import NavLink from "./NavLink";
interface Props {
currentPageClasses: string;
}
const NavPages = ({ currentPageClasses }: Props) => {
const [currentPage, setCurrentPage] = useState("/");
return (
<>
<NavLink
page="/"
currentPage={currentPage}
setCurrentPage={setCurrentPage}
currentPageClasses={currentPageClasses}
>
Home
</NavLink>
<NavLink
page="/osteopathy"
currentPage={currentPage}
setCurrentPage={setCurrentPage}
currentPageClasses={currentPageClasses}
>
Osteopathy
</NavLink>
<NavLink
page="/accupuncture"
currentPage={currentPage}
setCurrentPage={setCurrentPage}
currentPageClasses={currentPageClasses}
>
Accupuncture
</NavLink>
<NavLink
page="/articles"
currentPage={currentPage}
setCurrentPage={setCurrentPage}
currentPageClasses={currentPageClasses}
>
Articles
</NavLink>
<NavLink
page="/nor"
currentPage={currentPage}
setCurrentPage={setCurrentPage}
currentPageClasses={currentPageClasses}
>
Neuro Ocular Release
</NavLink>
</>
);
};
export default NavPages;

View file

@ -0,0 +1,45 @@
"use client";
import { useState } from "react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import NavPages from "./NavPages";
const Navbar = () => {
const [menuActive, setMenuActive] = useState(false);
return (
<nav className="bg-primary-500 text-primary-100">
<div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
<div className="font-cormorant text-2xl p-5">Richard A. Feely, DO</div>
{/* Burger icon */}
<div className="md:hidden w-[30px] text-tertiary-300">
<Bars3Icon onClick={() => setMenuActive((e) => !e)}></Bars3Icon>
</div>
{/* Burger menu */}
{menuActive ? (
<div className="text-lg animate-fadeIn fixed bottom-0 right-0 z-50 h-full bg-secondary-500 drop-shadow-lg ">
<div className="px-12 py-5 flex flex-col gap-6 text-primary-500 text-right">
<div className="pb-3 flex justify-end ">
<XMarkIcon
className="w-[30px]"
onClick={() => setMenuActive((e) => !e)}
></XMarkIcon>
</div>
<NavPages currentPageClasses="text-primary-100"></NavPages>
</div>
</div>
) : (
<></>
)}
{/* Nav Bar */}
<div className="hidden md:flex font-abel tems-center gap-6 p-5 text-lg text-tertiary-300">
<NavPages currentPageClasses="text-secondary-500"></NavPages>
</div>
</div>
</nav>
);
};
export default Navbar;

View file

@ -1,4 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}
const nextConfig = {};
module.exports = nextConfig
module.exports = nextConfig;

View file

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^2.0.18",
"@types/node": "20.4.4",
"@types/react": "18.2.15",
"@types/react-dom": "18.2.7",

View file

@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
'@heroicons/react':
specifier: ^2.0.18
version: 2.0.18(react@18.2.0)
'@types/node':
specifier: 20.4.4
version: 20.4.4
@ -98,6 +101,14 @@ packages:
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: false
/@heroicons/react@2.0.18(react@18.2.0):
resolution: {integrity: sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==}
peerDependencies:
react: '>= 16'
dependencies:
react: 18.2.0
dev: false
/@humanwhocodes/config-array@0.11.10:
resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
engines: {node: '>=10.10.0'}

View file

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

Before

Width:  |  Height:  |  Size: 629 B

View file

@ -29,7 +29,28 @@ module.exports = {
cormorant: ["Cormorant", "serif"],
frankRuhl: ["Frank Ruhl Libre", "serif"],
},
screens: {
lg: "1100px",
md: "900px",
},
keyframes: {
fadeIn: {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
fadeOut: {
"0%": { opacity: "1" },
"100%": { opacity: "0" },
},
},
animation: {
fadeIn: "fadeIn 75ms ease-in",
fadeOut: "fadeOut 500ms ease-out",
},
},
},
plugins: [],
future: {
hoverOnlyWhenSupported: true,
},
};