diff --git a/package.json b/package.json index 4fbc7ee..b7bb1ae 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 144cb00..2889d60 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 7e710f5..5d904b0 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 0000000..4b1f48a --- /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 a9a1853..68cd099 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 5605888..6fa5bb0 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 1214f2b..8e45bdd 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 3ef9b16..da9242a 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 87725d5..62ccffe 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"