ref: extract navbar, sidebar

frontend/src/App.vue

@@ -1,52 +1,16 @@
 <template>
     <div class="app">
-        <va-navbar shape>
+        <admin-view />
-            <template #left>
-                <va-navbar-item class="top-icon">
-                    <va-icon size="3rem">🌍</va-icon>
-                </va-navbar-item>
-            </template>
-            <template #right>
-                <va-navbar-item class="top-icon">
-                    <va-icon size="3rem">👤</va-icon>
-                </va-navbar-item>
-            </template>
-        </va-navbar>
-        <div class="central-view">
-            <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
-                <va-sidebar-item active>
-                    <va-sidebar-item-content class="sidebar-item">
-                        <va-icon class="sidebar-icon" size="2rem" name="fact_check" />
-                        <va-sidebar-item-title class="sidebar-title">Active Schema</va-sidebar-item-title>
-                    </va-sidebar-item-content>
-                </va-sidebar-item>
-                <va-sidebar-item>
-                    <va-sidebar-item-content class="sidebar-item">
-                        <va-icon class="sidebar-icon" size="2rem" name="dashboard" />
-                        <va-sidebar-item-title class="sidebar-title">Review Data</va-sidebar-item-title>
-                    </va-sidebar-item-content>
-                </va-sidebar-item>
-                <va-sidebar-item>
-                    <va-sidebar-item-content class="sidebar-item">
-                        <va-icon class="sidebar-icon" size="2rem" name="file_upload" />
-                        <va-sidebar-item-title class="sidebar-title">Upload</va-sidebar-item-title>
-                    </va-sidebar-item-content>
-                </va-sidebar-item>
-            </va-sidebar>
-            <div class="main-view">
-                <!-- <upload-screen /> -->
-                <active-schema-screen />
-            </div>
-        </div>
     </div>
 </template>
 
 
 <script>
-import UploadScreen from '@/components/UploadScreen.vue'
+
-import ActiveSchemaScreen from './components/ActiveSchemaScreen.vue'
+
+import AdminView from '@/views/AdminView.vue'
 export default {
-    components: { UploadScreen, ActiveSchemaScreen }
+    components: { AdminView }
 }
 </script>
 
@@ -59,32 +23,5 @@ export default {
     height: 100%;
 }
 
-.central-view {
-    height: 100vh;
-    margin: 0;
-    display: flex;
-    flex-direction: row;
-}
 
-.sidebar-proper {
-    position: fixed;
-}
-
-.sidebar-item {
-    height: 4rem;
-    display: flex;
-    padding: 1rem 0.5rem;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    font-size: 1.2rem;
-}
-
-.sidebar-icon {
-    margin: 1rem;
-}
-
-.main-view {
-    width: 100%;
-}
 </style>

frontend/src/components/Navbar.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <va-navbar shape class="navbar">
+            <template #left>
+                <va-navbar-item class="top-icon">
+                    <va-icon size="3rem" color="gray" name="public" />
+                </va-navbar-item>
+            </template>
+            <template #right>
+                <va-navbar-item class="top-icon">
+                    <va-icon size="3rem" color="gray" name="account_box" />
+                </va-navbar-item>
+            </template>
+        </va-navbar>
+    </div>
+</template>
+
+
+<script>
+export default {
+
+}
+</script>
+
+
+<style lang="css" scoped>
+.navbar {
+    position: relative;
+}
+</style>

frontend/src/components/Sidebar.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
+            <template v-for="item in sidebarItems" :key="item.title">
+                <va-sidebar-item :active="item.active">
+                    <va-sidebar-item-content class="sidebar-item">
+                        <va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
+                        <va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
+                    </va-sidebar-item-content>
+                </va-sidebar-item>
+            </template>
+        </va-sidebar>
+    </div>
+</template>
+
+
+<script>
+export default {
+    props: {
+        sidebarItems: {
+            type: Array,
+            required: true,
+        }
+    },
+}
+</script>
+
+
+<style lang="css" scoped>
+.sidebar-proper {
+    height: max(100vh, 100%);
+}
+
+.sidebar-item {
+    height: 4rem;
+    display: flex;
+    padding: 1rem 0.5rem;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 1.2rem;
+}
+
+.sidebar-icon {
+    margin: 1rem;
+}
+</style>

frontend/src/views/AdminView.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <navbar />
+
+        <div class="central-view">
+            <sidebar :sidebarItems="sidebarItems" />
+
+            <div class="main-view">
+                <!-- <upload-screen /> -->
+                <active-schema-screen />
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import UploadScreen from '@/components/UploadScreen.vue'
+import ActiveSchemaScreen from '@/components/ActiveSchemaScreen.vue'
+import Navbar from '@/components/Navbar.vue'
+import Sidebar from '@/components/Sidebar.vue'
+export default {
+    components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar },
+    data() {
+        return {
+            sidebarItems: [
+                {
+                    title: "Active Schema",
+                    icon: "fact_check",
+                    active: true
+                },
+                {
+                    title: "Review Data",
+                    icon: "dashboard",
+                },
+                {
+                    title: "Upload",
+                    icon: "file_upload",
+                },
+
+            ]
+        }
+    },
+}
+</script>
+
+
+<style lang="css" scoped>
+.central-view {
+    height: max(100vh, 100%);
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.main-view {
+    width: 100%;
+}
+</style>