Dashboard

src/App.vue

@@ -7,7 +7,7 @@
       is-full-page
     ></loading>
     <Layout>
-      <v-container>
+      <v-container fluid style="height: 100%;">
         <router-view></router-view>
       </v-container>
     </Layout>

src/components/Dashboard.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-card
+    class="mx-auto px-4"
+    height="100%"
+  >
+    <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>
+
+<script>
+import DashboardHeader from './DashboardHeader';
+import DashboardBody from './DashboardBody';
+
+export default {
+  name: 'Dashboard',
+  props: {
+    breadcrumbItems: Array,
+    tabItems: Array,
+  },
+  data: () => ({
+  }),
+  components: {
+    DashboardHeader,
+    DashboardBody,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/DashboardBody.vue

@@ -0,0 +1,13 @@
+<template>
+  <fragment></fragment>
+</template>
+
+<script>
+export default {
+  name: 'DashboardBody',
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/DashboardHeader.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-row justify="space-between">
+    <v-col xs="12" md="9">
+      <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-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="mx-auto">
+                {{ 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 xs="12" md="3" align-self="center">
+      <v-row>
+        <slot name="actions"></slot>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'DashboardHeader',
+  props: {
+    breadcrumbItems: Array,
+    tabItems: Array,
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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';

src/views/Home.vue

@@ -1,13 +1,46 @@
 <template>
-  <HelloWorld />
+  <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 { HelloWorld } from '../components';
+import { Dashboard } from '../components';
 
 export default {
+  name: 'Home',
   components: {
-    HelloWorld,
+    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>