diff --git a/.jsconfig b/.jsconfig deleted file mode 100644 index e69de29..0000000 diff --git a/src/App.vue b/src/App.vue index 0d25176..21e3c98 100644 --- a/src/App.vue +++ b/src/App.vue @@ -21,7 +21,9 @@
- + + +
@@ -32,13 +34,17 @@ import { ref } from "@vue/reactivity"; import Navigation from "./components/LeftSidebar/Navigation.vue"; import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue"; -import Search from "./components/RightSideBar/Search.vue" +import Search from "./components/RightSideBar/Search.vue"; +import NowPlaying from "./components/RightSideBar/NowPlaying.vue"; +import UpNext from "./components/RightSideBar/UpNext.vue"; export default { components: { Navigation, PinnedStuff, - Search + Search, + NowPlaying, + UpNext }, setup() { const collapsed = ref(true); @@ -48,7 +54,14 @@ export default { function toggleNav() { collapsed.value = !collapsed.value; } - return { logo, toggleNav, collapsed }; + + const collapser = ref(false) + const updateCollapser = ()=> { + collapser.value = !collapser.value + console.log(collapser.value); + } + + return { logo, toggleNav, collapsed, collapser, updateCollapser }; }, }; @@ -76,11 +89,11 @@ export default { } #logo-container { - height: 3.60em; + height: 3.6em; margin-left: 1em; display: flex; align-items: center; - margin-bottom: .5em; + margin-bottom: 0.5em; } .l-sidebar { @@ -97,7 +110,7 @@ export default { background-repeat: no-repeat; background-position: center; cursor: pointer; - margin-left: .25em; + margin-left: 0.25em; } .l-container #settings-button { @@ -123,7 +136,7 @@ export default { .l-container #settings-button #settings-icon { margin-left: 1em; - margin-right: .25em; + margin-right: 0.25em; width: 1.5em; height: 1.5em; background-image: url(./assets/icons/settings.svg); diff --git a/src/assets/css/global.css b/src/assets/css/global.css index 3d41b41..d23370a 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -93,6 +93,7 @@ a { grid-area: r-sidebar; border-radius: 5px; margin-right: .5em; + overflow-y: scroll; } .image { diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg new file mode 100644 index 0000000..874c310 --- /dev/null +++ b/src/assets/icons/next.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg new file mode 100644 index 0000000..6bb4f1b --- /dev/null +++ b/src/assets/icons/pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/previous.svg b/src/assets/icons/previous.svg new file mode 100644 index 0000000..78fe775 --- /dev/null +++ b/src/assets/icons/previous.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/htf.jpeg b/src/assets/images/htf.jpeg new file mode 100644 index 0000000..6c42253 Binary files /dev/null and b/src/assets/images/htf.jpeg differ diff --git a/src/assets/images/tk.jpg b/src/assets/images/tk.jpg new file mode 100644 index 0000000..c03af78 Binary files /dev/null and b/src/assets/images/tk.jpg differ diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue new file mode 100644 index 0000000..5c76ce1 --- /dev/null +++ b/src/components/RightSideBar/NowPlaying.vue @@ -0,0 +1,95 @@ + + + + + \ No newline at end of file diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue index b4fcf65..9e6c810 100644 --- a/src/components/RightSideBar/Search.vue +++ b/src/components/RightSideBar/Search.vue @@ -1,10 +1,14 @@