diff --git a/index.html b/index.html index 1f3095e..a70a9b4 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + Vue + TS + Contexted
diff --git a/package-lock.json b/package-lock.json index e273fc6..bac7eff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,11 @@ "version": "0.0.0", "dependencies": { "@popperjs/core": "^2.11.7", + "@vueuse/core": "^10.1.0", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.5", "firebase": "^9.20.0", + "hamburgers": "^1.2.1", "vue": "^3.2.47" }, "devDependencies": { @@ -1012,6 +1014,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz", "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==" }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", + "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==" + }, "node_modules/@vitejs/plugin-vue": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz", @@ -1187,6 +1194,89 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" }, + "node_modules/@vueuse/core": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz", + "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==", + "dependencies": { + "@types/web-bluetooth": "^0.0.16", + "@vueuse/metadata": "10.1.0", + "@vueuse/shared": "10.1.0", + "vue-demi": ">=0.14.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/core/node_modules/vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/@vueuse/metadata": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz", + "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz", + "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==", + "dependencies": { + "vue-demi": ">=0.14.0" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared/node_modules/vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -1500,6 +1590,11 @@ "node": ">= 6" } }, + "node_modules/hamburgers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.2.1.tgz", + "integrity": "sha512-uFuVVF7/MeUtRWrA+S1FGGo4iVi7RgPzZAmljBnSeDh4snOZzaQ+oB6CI1m4vKD5RGz9s70ufgiJLxgivqA26Q==" + }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -2780,6 +2875,11 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz", "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==" }, + "@types/web-bluetooth": { + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", + "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==" + }, "@vitejs/plugin-vue": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz", @@ -2940,6 +3040,46 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz", "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==" }, + "@vueuse/core": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz", + "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==", + "requires": { + "@types/web-bluetooth": "^0.0.16", + "@vueuse/metadata": "10.1.0", + "@vueuse/shared": "10.1.0", + "vue-demi": ">=0.14.0" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "requires": {} + } + } + }, + "@vueuse/metadata": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz", + "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==" + }, + "@vueuse/shared": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz", + "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==", + "requires": { + "vue-demi": ">=0.14.0" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz", + "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==", + "requires": {} + } + } + }, "ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", @@ -3170,6 +3310,11 @@ "is-glob": "^4.0.1" } }, + "hamburgers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.2.1.tgz", + "integrity": "sha512-uFuVVF7/MeUtRWrA+S1FGGo4iVi7RgPzZAmljBnSeDh4snOZzaQ+oB6CI1m4vKD5RGz9s70ufgiJLxgivqA26Q==" + }, "he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", diff --git a/package.json b/package.json index 376cde7..26370fb 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ }, "dependencies": { "@popperjs/core": "^2.11.7", + "@vueuse/core": "^10.1.0", "bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.5", "firebase": "^9.20.0", + "hamburgers": "^1.2.1", "vue": "^3.2.47" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index 2630cf0..ef16888 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,23 +1,55 @@ - + position: absolute; + top: 50px; + left: 0; + right: 0; + bottom: 0; + margin-left: $sidebar-width; + transition: margin $transition-duration ease-out; + &.side-bar-collapsed { + margin-left: 0; + } +} + diff --git a/src/assets/_variables.scss b/src/assets/_variables.scss new file mode 100644 index 0000000..97c5c39 --- /dev/null +++ b/src/assets/_variables.scss @@ -0,0 +1,4 @@ +$primary: #1e4bc4; +$white: #fff !default; +$transition-duration: 0.2s; +$sidebar-width: 220px; diff --git a/src/assets/style.scss b/src/assets/style.scss index a5d0cf4..3946a19 100644 --- a/src/assets/style.scss +++ b/src/assets/style.scss @@ -1,5 +1,4 @@ -$primary: #1e4bc4; - +@import './_variables'; @import 'bootstrap/scss/bootstrap'; body, @@ -7,3 +6,7 @@ body > div, html { height: 100%; } + +body { + overflow-y: scroll; +} diff --git a/src/components/Hamburger.vue b/src/components/Hamburger.vue new file mode 100644 index 0000000..9283940 --- /dev/null +++ b/src/components/Hamburger.vue @@ -0,0 +1,98 @@ + + + diff --git a/src/components/Note.vue b/src/components/Note.vue new file mode 100644 index 0000000..388b3da --- /dev/null +++ b/src/components/Note.vue @@ -0,0 +1,9 @@ + + diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 920e675..bddd00a 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -1,35 +1,35 @@