From 541830bfdc852deff1e4a1753f975a39316dbf88 Mon Sep 17 00:00:00 2001 From: geoffrey45 Date: Wed, 17 Nov 2021 10:14:28 +0300 Subject: [PATCH] further smoothen sidebar toggling --- package.json | 1 + src/App.vue | 80 ++++++++++++++-------- src/assets/css/global.css | 26 ++++--- src/assets/icons/menu.svg | 5 ++ src/assets/logo.svg | 6 +- src/components/LeftSidebar/Navigation.vue | 76 ++++++++++++-------- src/components/LeftSidebar/PinnedStuff.vue | 22 ++++-- src/main.js | 15 ++-- yarn.lock | 5 ++ 9 files changed, 158 insertions(+), 78 deletions(-) create mode 100644 src/assets/icons/menu.svg diff --git a/package.json b/package.json index 4fbc7eed..b7bb1aee 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "animate.css": "^4.1.1", "core-js": "^3.6.5", "register-service-worker": "^1.7.1", "vue": "^3.0.0", diff --git a/src/App.vue b/src/App.vue index 144cb006..2889d601 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,16 @@ diff --git a/src/assets/css/global.css b/src/assets/css/global.css index 7e710f5e..5d904b0d 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -25,11 +25,15 @@ hr, color: #ffffff48; } +.hidden { + display: none; + +} + .l-container { display: grid; - grid-template-columns: 250px 4fr 2fr; + grid-template-columns: min-content 4fr 1fr; grid-template-rows: 78px 1fr 1fr; - gap: 4px; grid-auto-flow: row; grid-template-areas: "l-sidebar nav nav" @@ -39,21 +43,27 @@ hr, height: 100vh; } +.collapsed .l-sidebar{ + width: 70px; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: width; +} + .l-sidebar { + width: 250px; grid-area: l-sidebar; padding-top: 0.5em; background-color: #131313b2; + transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); + transition-duration: .3s; + transition-property: width; } -@media (max-width: 1000px) { - .l-sidebar { - width: 70px; - } -} .nav { grid-area: nav; - border-radius: 5px; + border: 1px solid; } .content { diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg new file mode 100644 index 00000000..4b1f48ad --- /dev/null +++ b/src/assets/icons/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg index a9a18538..68cd0996 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue index 5605888b..6fa5bb0e 100644 --- a/src/components/LeftSidebar/Navigation.vue +++ b/src/components/LeftSidebar/Navigation.vue @@ -1,76 +1,97 @@
+
+ + + + \ No newline at end of file diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue index 1214f2bb..8e45bddd 100644 --- a/src/components/LeftSidebar/PinnedStuff.vue +++ b/src/components/LeftSidebar/PinnedStuff.vue @@ -1,5 +1,9 @@ + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 3ef9b169..da9242aa 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,10 @@ -import { createApp } from 'vue' -import App from './App.vue' -import './registerServiceWorker' -import router from './router' -import '../src/assets/css/global.css' +import { createApp } from "vue"; +import App from "./App.vue"; +import "./registerServiceWorker"; +import router from "./router"; -createApp(App).use(router).mount('#app') +import "../src/assets/css/global.css"; + +import "animate.css"; + +createApp(App).use(router).mount("#app"); diff --git a/yarn.lock b/yarn.lock index 87725d5f..62ccffec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1727,6 +1727,11 @@ alphanum-sort@^1.0.0: resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM= +animate.css@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075" + integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ== + ansi-colors@^3.0.0: version "3.2.4" resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"