LeftSideBar

src/views/Home.vue

@@ -1,18 +1,88 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
+    <div class="albums-wrapper">
+      <div class="albums">
+       <Album v-for="album in albums" :key="album.folderName" :data="album"></Album>
+      </div>
+    </div>
   </div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
-export default {
+import LeftBlock from '@/components/LeftBlock.vue';
+import Album, { IAlbum } from '@/components/Album.vue';
+
+@Component({
   name: 'Home',
   components: {
-    HelloWorld
+    LeftBlock,
+    Album,
   }
+})
+export default class Home extends Vue {
+  @Prop({required: true}) public readonly leftPanelClosed!: boolean;
+
+  public albums: IAlbum[] = [
+    {
+      name: 'Test',
+      description: 'Test description',
+      protected: false,
+
+      folderName: 'test',
+      files: [
+        'p (1).jpg',
+        'p (2).jpg',
+        'p (3).jpg',
+        'p (4).jpg',
+        'p (5).jpg',
+        'p (6).jpg',
+      ]
+    },
+    {
+      name: 'Test 2',
+      description: 'Test 2 description',
+      protected: false,
+
+      folderName: 'test2',
+      files: [
+        'p (1).jpg',
+        'p (2).jpg',
+        'p (3).jpg',
+        'p (4).jpg',
+        'p (5).jpg',
+      ]
+    },
+    {
+      name: 'Test 3',
+      description: 'Test 3 description',
+      protected: false,
+
+      folderName: 'test3',
+      files: [
+        'p (1).jpg',
+        'p (2).jpg',
+        'p (3).jpg',
+        'p (4).jpg',
+        'p (5).jpg',
+      ]
+    }
+  ];
 }
 </script>
+
+<style scoped>
+.albums-wrapper {
+  display: inline-block;
+  width: calc(100vw - 425px);
+  vertical-align: top;
+}
+
+.albums {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>