Add toolbar block

src/components/Main.vue

@@ -1,8 +1,11 @@
 <template>
   <div id="main">
     <!-- idを渡してそのIDのTL情報をとってきてもらうつもり -->
+    <div id="timelines">
       <Column v-for="id in timelines" :key="id" :id="id"/>
     </div>
+    <div id="toolbar"></div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -43,6 +46,19 @@ export default class Main extends Vue {
 
 <style lang="postcss">
 #main {
+  width: 100vw;
   height: 100vh;
+  overflow-x: hidden;
+}
+#timelines {
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 40px);
+  overflow-x: scroll;
+}
+#toolbar {
+  width: 100vw;
+  height: 40px;
+  background-color: var(--toolbar);
 }
 </style>

src/components/Timeline/Column.vue

@@ -115,7 +115,16 @@ export default class Column extends Vue {
 <style scoped lang="postcss">
 .timeline {
   height: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
   overflow-y: scroll;
+  overflow-x: hidden;
+
+  & + .timeline {
+    border-left: solid 1px;
+    border-right: none;
+  }
+
   .header {
     position: sticky;
     top: 0;

src/views/App.vue

@@ -34,6 +34,7 @@ export default class App extends Vue {
     return {
       '--color': this.isDarkMode ? 'white' : 'black',
       '--bg-color': this.isDarkMode ? '#212121' : 'white',
+      '--toolbar': this.isDarkMode ? '#424242' : '#eeeeee',
       '--font-size': this.fontSize,
     }
   }