From 9e045570b838cb1cede7fb906a906c8b2a40fb4e Mon Sep 17 00:00:00 2001 From: Jake Howard Date: Tue, 28 May 2024 13:15:56 +0100 Subject: [PATCH] Add navbar and dropdown codepens --- .editorconfig | 7 ++ package-lock.json | 222 +++++++++++++++++++++++++++++++++ package.json | 8 +- src/button-dropdown/index.html | 34 +++++ src/button-dropdown/index.scss | 44 +++++++ src/index.html | 6 + src/navbar/index.html | 23 ++++ src/navbar/index.scss | 69 ++++++++++ src/test/test.html | 0 vite.config.js | 15 ++- 10 files changed, 423 insertions(+), 5 deletions(-) create mode 100644 .editorconfig create mode 100644 src/button-dropdown/index.html create mode 100644 src/button-dropdown/index.scss create mode 100644 src/navbar/index.html create mode 100644 src/navbar/index.scss delete mode 100644 src/test/test.html diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..3920760 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,7 @@ +[*] +charset = utf-8 +insert_final_newline = true +end_of_line = lf +indent_style = space +indent_size = 2 +max_line_length = 80 diff --git a/package-lock.json b/package-lock.json index df7baa0..1b09757 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,12 @@ "version": "0.0.0", "dependencies": { "glob": "^10.4.1", + "normalize.css": "^8.0.1", + "sass": "^1.77.2", "vite": "^5.2.11" + }, + "devDependencies": { + "prettier": "^3.2.5" } }, "node_modules/@esbuild/aix-ppc64": { @@ -645,12 +650,37 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "license": "MIT" }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/brace-expansion": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", @@ -660,6 +690,42 @@ "balanced-match": "^1.0.0" } }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -742,6 +808,18 @@ "@esbuild/win32-x64": "0.20.2" } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/foreground-child": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz", @@ -794,6 +872,45 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==", + "license": "MIT" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -803,6 +920,27 @@ "node": ">=8" } }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -878,6 +1016,21 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==", + "license": "MIT" + }, "node_modules/path-key": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", @@ -909,6 +1062,18 @@ "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", "license": "ISC" }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/postcss": { "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", @@ -937,6 +1102,34 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/rollup": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", @@ -972,6 +1165,23 @@ "fsevents": "~2.3.2" } }, + "node_modules/sass": { + "version": "1.77.2", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz", + "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==", + "license": "MIT", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -1110,6 +1320,18 @@ "node": ">=8" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, "node_modules/vite": { "version": "5.2.11", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.11.tgz", diff --git a/package.json b/package.json index a9094c2..c693c51 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,19 @@ "private": true, "scripts": { "start": "vite", - "build": "vite build" + "build": "vite build", + "format": "prettier --write ." }, "author": "", "description": "", "type": "module", "dependencies": { "glob": "^10.4.1", + "normalize.css": "^8.0.1", + "sass": "^1.77.2", "vite": "^5.2.11" + }, + "devDependencies": { + "prettier": "^3.2.5" } } diff --git a/src/button-dropdown/index.html b/src/button-dropdown/index.html new file mode 100644 index 0000000..10f40cb --- /dev/null +++ b/src/button-dropdown/index.html @@ -0,0 +1,34 @@ + + + + + + Here's some content before +
+ + +
+ +

Text below the button which should be hidden

+ + diff --git a/src/button-dropdown/index.scss b/src/button-dropdown/index.scss new file mode 100644 index 0000000..e1c8017 --- /dev/null +++ b/src/button-dropdown/index.scss @@ -0,0 +1,44 @@ +@import "normalize.css"; + +button { + padding: 15px; +} + +.button-dropdown { + display: inline-block; + position: relative; +} + +button + .dropdown { + visibility: hidden; + opacity: 0; + transition: all 0.25s; + margin: 0; + list-style: none; + padding: 0; + background-color: red; + position: absolute; + min-width: 100%; + + overflow: scroll; + max-height: calc(100vh - 100%); + + li { + padding: 0.25rem; + + a { + display: inline-block; + width: 100%; + + &:hover { + background-color: black; + } + } + } +} + +button:hover + .dropdown, +button + .dropdown:hover { + visibility: visible; + opacity: 1; +} diff --git a/src/index.html b/src/index.html index e69de29..7e42b7d 100644 --- a/src/index.html +++ b/src/index.html @@ -0,0 +1,6 @@ + + + Website Components + + + diff --git a/src/navbar/index.html b/src/navbar/index.html new file mode 100644 index 0000000..91e3439 --- /dev/null +++ b/src/navbar/index.html @@ -0,0 +1,23 @@ + + + + + +
+ + + + + + + + +
+ + diff --git a/src/navbar/index.scss b/src/navbar/index.scss new file mode 100644 index 0000000..1d34a57 --- /dev/null +++ b/src/navbar/index.scss @@ -0,0 +1,69 @@ +@import "normalize.css"; + +body, +html { + height: 100%; +} + +header { + display: flex; + align-items: center; + background-color: red; + padding: 1rem; + + .header-main { + width: 100%; + display: flex; + justify-content: space-between; + } + + .side-menu { + display: none; + } + + .menu { + list-style: none; + display: flex; + margin: 0; + padding: 0; + + li { + padding-left: 1rem; + } + } +} + +@media (min-width: 200px) { + header { + justify-content: space-between; + flex-wrap: wrap; + + .side-menu { + display: initial; + background: none; + border: none; + cursor: pointer; + } + + .side-menu:focus ~ nav { + // Just a value big enough not to overflow + max-height: 100vh; + } + + nav { + max-height: 0; + overflow: hidden; + width: 100%; + transition: max-height 0.33s ease-in-out; + + .menu { + display: initial; + } + + li { + padding-left: 1rem; + padding-top: 1rem; + } + } + } +} diff --git a/src/test/test.html b/src/test/test.html deleted file mode 100644 index e69de29..0000000 diff --git a/vite.config.js b/vite.config.js index 6bc6910..dbf698c 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,9 +1,9 @@ -import { resolve } from 'path' +import { resolve } from "path"; import { defineConfig } from "vite"; -import { globSync } from 'glob' +import { globSync } from "glob"; const SRC = resolve(__dirname, "src"); -const ENTRYPOINTS = globSync("**/*.html", {cwd: SRC}); +const ENTRYPOINTS = globSync("**/*.html", { cwd: SRC }); export default defineConfig({ root: SRC, @@ -12,7 +12,14 @@ export default defineConfig({ outDir: "../dist", emptyOutDir: true, rollupOptions: { - input: Object.fromEntries(ENTRYPOINTS.map(e => [e, resolve(SRC, e)])), + input: Object.fromEntries(ENTRYPOINTS.map((e) => [e, resolve(SRC, e)])), + }, + }, + css: { + preprocessorOptions: { + scss: { + includePaths: [resolve(__dirname, "node_modules")], + }, }, }, });