From 658430226d159bfc9057faba565848b1d5b72ee7 Mon Sep 17 00:00:00 2001
From: Bhanu Teja P <bhanuteja.p@swiggy.in>
Date: Wed, 18 Sep 2019 00:23:42 +0530
Subject: [PATCH 1/4] Add dashboard header

---
 src/App.vue                        |  2 +-
 src/components/Dashboard.vue       | 47 ++++++++++++++++++++++++++++++
 src/components/DashboardHeader.vue | 42 ++++++++++++++++++++++++++
 src/components/index.js            |  1 +
 src/views/Home.vue                 |  6 ++--
 5 files changed, 94 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Dashboard.vue
 create mode 100644 src/components/DashboardHeader.vue

diff --git a/src/App.vue b/src/App.vue
index 772f663..df8389e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
       is-full-page
     ></loading>
     <Layout>
-      <v-container>
+      <v-container fluid>
         <router-view></router-view>
       </v-container>
     </Layout>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
new file mode 100644
index 0000000..2b49897
--- /dev/null
+++ b/src/components/Dashboard.vue
@@ -0,0 +1,47 @@
+<template>
+  <v-container fluid :style="{ backgroundColor: 'aliceblue', width: '100%' }">
+    <dashboard-header :breadcrumb-items="breadcrumbItems" :tab-items="tabItems" />
+  </v-container>
+</template>
+
+<script>
+import DashboardHeader from './DashboardHeader';
+
+export default {
+  name: 'Dashboard',
+  data: () => ({
+    breadcrumbItems: [
+      {
+        text: 'Tests',
+        disabled: false,
+        href: 'breadcrumbs_dashboard',
+      },
+      {
+        text: 'OpenRank Software Developer Hiring Test',
+        disabled: false,
+        href: 'breadcrumbs_link_1',
+      },
+      {
+        text: 'Library - OpenRank',
+        disabled: true,
+        href: 'breadcrumbs_link_2',
+      },
+    ],
+    tabItems: [
+      {
+        text: 'OpenRank questions',
+      },
+      {
+        text: 'My company questions',
+      },
+    ],
+  }),
+  components: {
+    DashboardHeader,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DashboardHeader.vue b/src/components/DashboardHeader.vue
new file mode 100644
index 0000000..a9535db
--- /dev/null
+++ b/src/components/DashboardHeader.vue
@@ -0,0 +1,42 @@
+<template>
+  <v-row justify="space-between">
+    <v-col cols="4">
+      <v-container>
+        <v-row>
+          <v-breadcrumbs :items="breadcrumbItems">
+            <template v-slot:divider>
+              <v-icon>mdi-forward</v-icon>
+            </template>
+          </v-breadcrumbs>
+        </v-row>
+        <v-row>
+          <v-tabs centered grow>
+            <v-tab v-for="(item, index) in tabItems" :key="index">
+              {{ item.text }}
+            </v-tab>
+          </v-tabs>
+        </v-row>
+      </v-container>
+    </v-col>
+    <!--      <v-spacer></v-spacer>-->
+    <v-col cols="2" align-self="center">
+      <div>
+        <v-btn large block>Go to test</v-btn>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'DashboardHeader',
+  props: {
+    breadcrumbItems: Array,
+    tabItems: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
index 35990f2..8855ac6 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,3 +4,4 @@ export { default as FormAlerts } from './FormAlerts';
 export { default as FormFields } from './FormFields';
 export { default as FormButtons } from './FormButtons';
 export { default as CustomForm } from './CustomForm';
+export { default as Dashboard } from './Dashboard';
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b39b275..89066d1 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,13 +1,13 @@
 <template>
-  <HelloWorld />
+  <Dashboard />
 </template>
 
 <script>
-import { HelloWorld } from '../components';
+import { Dashboard } from '../components';
 
 export default {
   components: {
-    HelloWorld,
+    Dashboard,
   },
 };
 </script>

From 797f4f3b1cd9f00d1fcc88fc41f091e51b1574e9 Mon Sep 17 00:00:00 2001
From: Bhanu Teja P <bhanuteja.p@swiggy.in>
Date: Sat, 21 Sep 2019 15:50:10 +0530
Subject: [PATCH 2/4] Make Dashboard header responsive

---
 src/components/Dashboard.vue       |  2 +-
 src/components/DashboardHeader.vue | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 2b49897..6e4091b 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid :style="{ backgroundColor: 'aliceblue', width: '100%' }">
+  <v-container fluid :style="{ backgroundColor: 'aliceblue' }">
     <dashboard-header :breadcrumb-items="breadcrumbItems" :tab-items="tabItems" />
   </v-container>
 </template>
diff --git a/src/components/DashboardHeader.vue b/src/components/DashboardHeader.vue
index a9535db..4f5c506 100644
--- a/src/components/DashboardHeader.vue
+++ b/src/components/DashboardHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row justify="space-between">
-    <v-col cols="4">
+    <v-col xs="12" md="10">
       <v-container>
         <v-row>
           <v-breadcrumbs :items="breadcrumbItems">
@@ -10,16 +10,25 @@
           </v-breadcrumbs>
         </v-row>
         <v-row>
-          <v-tabs centered grow>
-            <v-tab v-for="(item, index) in tabItems" :key="index">
-              {{ item.text }}
-            </v-tab>
-          </v-tabs>
+          <v-col xs="12" md="6">
+            <v-tabs centered grow class="d-none d-md-flex">
+              <v-tab v-for="(item, index) in tabItems" :key="index" class="ml-0">
+                {{ item.text }}
+              </v-tab>
+            </v-tabs>
+            <v-tabs vertical grow class="d-md-none">
+              <fragment v-for="(item, index) in tabItems" :key="index" :style="{width: '100%'}">
+                <v-tab class="ml-0">
+                  {{ item.text }}
+                </v-tab>
+              </fragment>
+            </v-tabs>
+          </v-col>
         </v-row>
       </v-container>
     </v-col>
     <!--      <v-spacer></v-spacer>-->
-    <v-col cols="2" align-self="center">
+    <v-col xs="12" md="2" align-self="center">
       <div>
         <v-btn large block>Go to test</v-btn>
       </div>

From 88a2a0aaf398302a06287636286ee2d0c65bafa4 Mon Sep 17 00:00:00 2001
From: Bhanu Teja P <bhanuteja.p@swiggy.in>
Date: Sat, 21 Sep 2019 16:26:22 +0530
Subject: [PATCH 3/4] Wrap the dashboard in v-card

---
 src/App.vue                        |  2 +-
 src/components/Dashboard.vue       | 10 ++++++++--
 src/components/DashboardBody.vue   | 13 +++++++++++++
 src/components/DashboardHeader.vue |  6 +++---
 4 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DashboardBody.vue

diff --git a/src/App.vue b/src/App.vue
index df8389e..a282bf7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
       is-full-page
     ></loading>
     <Layout>
-      <v-container fluid>
+      <v-container fluid style="height: 100%;">
         <router-view></router-view>
       </v-container>
     </Layout>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 6e4091b..9aa7bf5 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,11 +1,16 @@
 <template>
-  <v-container fluid :style="{ backgroundColor: 'aliceblue' }">
+  <v-card
+    class="mx-auto px-4"
+    height="100%"
+  >
     <dashboard-header :breadcrumb-items="breadcrumbItems" :tab-items="tabItems" />
-  </v-container>
+    <dashboard-body />
+  </v-card>
 </template>
 
 <script>
 import DashboardHeader from './DashboardHeader';
+import DashboardBody from './DashboardBody';
 
 export default {
   name: 'Dashboard',
@@ -38,6 +43,7 @@ export default {
   }),
   components: {
     DashboardHeader,
+    DashboardBody,
   },
 };
 </script>
diff --git a/src/components/DashboardBody.vue b/src/components/DashboardBody.vue
new file mode 100644
index 0000000..27fa066
--- /dev/null
+++ b/src/components/DashboardBody.vue
@@ -0,0 +1,13 @@
+<template>
+  <fragment></fragment>
+</template>
+
+<script>
+export default {
+  name: 'DashboardBody',
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/DashboardHeader.vue b/src/components/DashboardHeader.vue
index 4f5c506..c968777 100644
--- a/src/components/DashboardHeader.vue
+++ b/src/components/DashboardHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row justify="space-between">
-    <v-col xs="12" md="10">
+    <v-col xs="12" md="9">
       <v-container>
         <v-row>
           <v-breadcrumbs :items="breadcrumbItems">
@@ -12,7 +12,7 @@
         <v-row>
           <v-col xs="12" md="6">
             <v-tabs centered grow class="d-none d-md-flex">
-              <v-tab v-for="(item, index) in tabItems" :key="index" class="ml-0">
+              <v-tab v-for="(item, index) in tabItems" :key="index" class="mx-auto">
                 {{ item.text }}
               </v-tab>
             </v-tabs>
@@ -28,7 +28,7 @@
       </v-container>
     </v-col>
     <!--      <v-spacer></v-spacer>-->
-    <v-col xs="12" md="2" align-self="center">
+    <v-col xs="12" md="3" align-self="center">
       <div>
         <v-btn large block>Go to test</v-btn>
       </div>

From e6d31078cd20a60ca522a9796b523fbd74dce948 Mon Sep 17 00:00:00 2001
From: Bhanu Teja P <bhanuteja.p@swiggy.in>
Date: Sat, 21 Sep 2019 17:01:58 +0530
Subject: [PATCH 4/4] Make breadcrumb-items and tab-items as props

---
 src/components/Dashboard.vue       | 36 +++++++++---------------------
 src/components/DashboardHeader.vue |  6 ++---
 src/views/Home.vue                 | 35 ++++++++++++++++++++++++++++-
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 9aa7bf5..bd5da0a 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -3,7 +3,12 @@
     class="mx-auto px-4"
     height="100%"
   >
-    <dashboard-header :breadcrumb-items="breadcrumbItems" :tab-items="tabItems" />
+    <dashboard-header :breadcrumb-items="breadcrumbItems" :tab-items="tabItems">
+      <template v-slot:actions>
+        <slot name="header-actions"></slot>
+      </template>
+    </dashboard-header>
+
     <dashboard-body />
   </v-card>
 </template>
@@ -14,32 +19,11 @@ import DashboardBody from './DashboardBody';
 
 export default {
   name: 'Dashboard',
+  props: {
+    breadcrumbItems: Array,
+    tabItems: Array,
+  },
   data: () => ({
-    breadcrumbItems: [
-      {
-        text: 'Tests',
-        disabled: false,
-        href: 'breadcrumbs_dashboard',
-      },
-      {
-        text: 'OpenRank Software Developer Hiring Test',
-        disabled: false,
-        href: 'breadcrumbs_link_1',
-      },
-      {
-        text: 'Library - OpenRank',
-        disabled: true,
-        href: 'breadcrumbs_link_2',
-      },
-    ],
-    tabItems: [
-      {
-        text: 'OpenRank questions',
-      },
-      {
-        text: 'My company questions',
-      },
-    ],
   }),
   components: {
     DashboardHeader,
diff --git a/src/components/DashboardHeader.vue b/src/components/DashboardHeader.vue
index c968777..2d07c7c 100644
--- a/src/components/DashboardHeader.vue
+++ b/src/components/DashboardHeader.vue
@@ -29,9 +29,9 @@
     </v-col>
     <!--      <v-spacer></v-spacer>-->
     <v-col xs="12" md="3" align-self="center">
-      <div>
-        <v-btn large block>Go to test</v-btn>
-      </div>
+      <v-row>
+        <slot name="actions"></slot>
+      </v-row>
     </v-col>
   </v-row>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 89066d1..9ae207a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,13 +1,46 @@
 <template>
-  <Dashboard />
+  <dashboard :breadcrumb-items="breadcrumbItems" :tab-items="tabItems">
+    <template v-slot:header-actions>
+      <v-btn class="mx-4">Go to test</v-btn>
+      <v-btn class="mx-4">Go to test</v-btn>
+    </template>
+  </dashboard>
 </template>
 
 <script>
 import { Dashboard } from '../components';
 
 export default {
+  name: 'Home',
   components: {
     Dashboard,
   },
+  data: () => ({
+    breadcrumbItems: [
+      {
+        text: 'Tests',
+        disabled: false,
+        href: 'breadcrumbs_dashboard',
+      },
+      {
+        text: 'OpenRank Software Developer Hiring Test',
+        disabled: false,
+        href: 'breadcrumbs_link_1',
+      },
+      {
+        text: 'Library - OpenRank',
+        disabled: true,
+        href: 'breadcrumbs_link_2',
+      },
+    ],
+    tabItems: [
+      {
+        text: 'OpenRank questions',
+      },
+      {
+        text: 'My company questions',
+      },
+    ],
+  }),
 };
 </script>