From 3096855f345864b84bbb7679a2f7266f2551a423 Mon Sep 17 00:00:00 2001 From: Beau Findlay Date: Wed, 24 Apr 2024 14:12:10 +0100 Subject: [PATCH] Add nav bar --- src/Client/package-lock.json | 72 +++++++++++++++++++++++++++ src/Client/package.json | 3 ++ src/Client/src/assets/logo.webp | Bin 0 -> 4096 bytes src/Client/src/pages/Layout.tsx | 4 +- src/Client/src/pages/NavBar.tsx | 85 ++++++++++++++++++++++++++++++++ 5 files changed, 163 insertions(+), 1 deletion(-) create mode 100644 src/Client/src/assets/logo.webp create mode 100644 src/Client/src/pages/NavBar.tsx diff --git a/src/Client/package-lock.json b/src/Client/package-lock.json index 9aec40d..30898b3 100644 --- a/src/Client/package-lock.json +++ b/src/Client/package-lock.json @@ -8,11 +8,14 @@ "name": "client", "version": "0.0.0", "dependencies": { + "@headlessui/react": "^1.7.19", + "@heroicons/react": "^2.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.23.0" }, "devDependencies": { + "@types/node": "^20.12.7", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", @@ -869,6 +872,30 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@headlessui/react": { + "version": "1.7.19", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz", + "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==", + "dependencies": { + "@tanstack/react-virtual": "^3.0.0-beta.60", + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@heroicons/react": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz", + "integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1277,6 +1304,31 @@ "win32" ] }, + "node_modules/@tanstack/react-virtual": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.4.0.tgz", + "integrity": "sha512-GZN4xn/Tg5w7gvYeVcMVCeL4pEyUhvg+Cp6KX2Z01C4FRNxIWMgIQ9ibgMarNQfo+gt0PVLcEER4A9sNv/jlow==", + "dependencies": { + "@tanstack/virtual-core": "3.4.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@tanstack/virtual-core": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.4.0.tgz", + "integrity": "sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1330,6 +1382,15 @@ "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/node": { + "version": "20.12.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz", + "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } + }, "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", @@ -1870,6 +1931,11 @@ "node": ">= 6" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -4018,6 +4084,12 @@ "node": ">=14.17" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", diff --git a/src/Client/package.json b/src/Client/package.json index 6120504..801c66c 100644 --- a/src/Client/package.json +++ b/src/Client/package.json @@ -10,11 +10,14 @@ "preview": "vite preview" }, "dependencies": { + "@headlessui/react": "^1.7.19", + "@heroicons/react": "^2.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.23.0" }, "devDependencies": { + "@types/node": "^20.12.7", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", diff --git a/src/Client/src/assets/logo.webp b/src/Client/src/assets/logo.webp new file mode 100644 index 0000000000000000000000000000000000000000..d31f1e5df765897dddd1f0f77bbedd4b829ac831 GIT binary patch literal 4096 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 literal 0 HcmV?d00001 diff --git a/src/Client/src/pages/Layout.tsx b/src/Client/src/pages/Layout.tsx index 0405162..91a1d95 100644 --- a/src/Client/src/pages/Layout.tsx +++ b/src/Client/src/pages/Layout.tsx @@ -1,9 +1,11 @@ import { Outlet } from "react-router-dom"; +import NavBar from "./NavBar"; export default function Layout() { return (
-
+ +
diff --git a/src/Client/src/pages/NavBar.tsx b/src/Client/src/pages/NavBar.tsx new file mode 100644 index 0000000..534ff97 --- /dev/null +++ b/src/Client/src/pages/NavBar.tsx @@ -0,0 +1,85 @@ +import { Dialog, Popover } from "@headlessui/react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import { useState } from "react"; +import { NavLink } from "react-router-dom"; +import logo from "../assets/logo.webp"; + +export default function NavBar() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + return ( +
+ + +
+ +
+ + Beau Findlay + Logo + + +
+
+
+
+ + Contact + + + This App + +
+
+
+ +
+
+ ); +}