@@ -99,6 +99,18 @@ export default class App extends Vue {
this.leftPanelClosed = !this.leftPanelClosed;
}
+
+ closeLeftPanel() {
+ if (this.leftPanelClosed) {
+ this.closeIcon.anim.setDirection(1);
+ this.closeIcon.anim.play();
+ } else {
+ this.closeIcon.anim.setDirection(-1);
+ this.closeIcon.anim.play();
+ }
+
+ this.leftPanelClosed = true;
+ }
}
diff --git a/src/components/Album.vue b/src/components/Album.vue
index 071d566..e9543e9 100644
--- a/src/components/Album.vue
+++ b/src/components/Album.vue
@@ -1,30 +1,34 @@
-
-
-
-
-
-
-
-
-
+
+
-
-
-
{{ data.name }}
-
-
{{ data.description }}
+
+
+
{{ data.name }}
+
+
{{ data.description }}
+
-
+
diff --git a/src/router/index.ts b/src/router/index.ts
index 8e3e946..c134d6e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,8 +1,9 @@
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
-import Home from '@/views/Home.vue'
-import About from '@/views/About.vue'
+import Home from '@/views/Home.vue';
+import About from '@/views/About.vue';
+import Album from '@/views/Album.vue';
Vue.use(VueRouter)
@@ -16,6 +17,11 @@ Vue.use(VueRouter)
path: '/about',
name: 'About Me',
component: About
+ },
+ {
+ path: '/album/:name',
+ name: 'Album Page',
+ component: Album,
}
]
diff --git a/src/views/Album.vue b/src/views/Album.vue
new file mode 100644
index 0000000..c84561c
--- /dev/null
+++ b/src/views/Album.vue
@@ -0,0 +1,20 @@
+
+
+ Album Page
+
+
+
+
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ea56e0e..012b32c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,8 +4,6 @@
@@ -29,7 +27,9 @@ import Album, { IAlbum } from '@/components/Album.vue';
export default class Home extends Vue {
@Prop({required: true}) public readonly leftPanelClosed!: boolean;
- public albums: IAlbum[] = [
+ public albums: IAlbum[] = [];
+
+ public sourceAlbums: IAlbum[] = [
{
name: 'Test',
description: 'Test description',
@@ -74,6 +74,12 @@ export default class Home extends Vue {
]
}
];
+
+ mounted() {
+ this.sourceAlbums.forEach((item, index) => {
+ setTimeout(() => this.albums.push(item), 300 * index);
+ })
+ }
}
@@ -93,7 +99,6 @@ export default class Home extends Vue {
.albums-wrapper {
width: calc(100vw - 405px);
margin-left: 405px;
-
}
}