Creating the menu bar based on routes to create simple menu,

Eventually this will be done in groups
Hardocs · Sep 15, 2020 · dba4a0a · dba4a0a
1 parent 53e5767
commit dba4a0a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,8 +10,8 @@
 </head>
 
 <body style="background-color: white;" <noscript>
-  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-    Please enable it to continue.</strong>
+  <!-- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    Please enable it to continue.</strong> -->
   </noscript>
   <div id="app"></div>
   <!-- built files will be auto injected -->

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="border-solid border-b border-gray-25 py-4 w-full flex gap-3 border-b-1">
+    <!-- <p>{{ menuActions }}</p> -->
+    <div v-for="item in menuActions" :key="item.name">
+        <router-link v-if='item.name && item.name !== "Index"' class="primary-button" :to="{ path: item.path}">
+          {{item.name}}
+        </router-link>
+    </div>
+  </div>
+</template>
+<script>
+import { routes } from '@/router/index.js';
+export default {
+  name: 'MenuBar',
+  computed:{
+    menuActions(){
+      return routes;
+    }
+  },
+};
+</script>
diff --git a/src/components/OpenDocs.vue b/src/components/OpenDocs.vue
@@ -1,18 +1,18 @@
 <template>
-  <div>
+  <div class="m-auto w-2/3">
     <form class="flex" ref="form">
       <input
         type="text"
         name="path"
         id="path"
         placeholder="Input path to folder"
-        class="w-3/5 p-3 rounded focus:shadow-outline outline-none bg-gray-15 focus:bg-white border border-solid border-gray-25"
+        class="w-full p-3 rounded focus:shadow-outline outline-none bg-gray-15 focus:bg-white border border-solid border-gray-25"
         v-model="path"
       />
       <button
         @click="onSubmit"
         type="submit"
-        class="bg-blue-400 ml-4 text-white focus:shadow-outline hover:bg-blue-500 focus:outline-none outline-none border-none rounded font-semibold px-4 py-2"
+        class="primary-button mx-4"
       >
         Open
       </button>

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
@@ -1,18 +1,24 @@
 <template>
-  <div class="w-full xl:w-2/3 m-auto layout flex gap-8 px-4">
-    <aside class="w-1/3">
+<div>
+  <div>
+    <MenuBar class="fixed bg-white z-40"></MenuBar>
+  </div>
+  <div class="py-16 w-full layout flex gap-8">
+    <aside class="fixed h-screen pl-6 pr-4 w-1/5 border-r border-solid border-gray-25">
       <DocsContents></DocsContents>
     </aside>
-    <div class="w-2/3">
+    <div class="w-1/5"></div>
+    <div class="m-auto w-2/4">
       <slot />
     </div>
   </div>
+  </div>
 </template>
 <script>
 import DocsContents from '@/components/DocsContents';
-
+import MenuBar from '@/components/MenuBar';
 export default {
   name: 'LayoutDefault',
-  components: { DocsContents }
+  components: { DocsContents , MenuBar }
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,22 +1,58 @@
+// import { routes } from '../configs/menu.config.js';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 
+// let views = { path: '@/views/', format: '.vue' }
+
+
 Vue.use(VueRouter);
 
-const routes = [
+export const routes = [
   {
     path: '/doc/:id',
     component: () => import('@/views/Doc.vue')
   },
   {
     path: '/',
     name: 'Index',
-    component: () => import('../views/Index.vue')
+    component: () => import('@/views/Index.vue')
+  },
+  {
+    path: '/open-project/',
+    name: 'Open project',
+    // this component should be a dialog
+    component: () => import('@/views/OpenProject.vue')
+  },
+  {
+    path:'/new-project/',
+    name: 'New project'
+  },
+  {
+    path:'/from-folder/',
+    name:'Create from folder'
+  },
+  {
+    path:'//'
   }
+
 ];
 
+// THIS DIDNT WORK BUT IT WAS A NICE
+routes.forEach((action) => {
+  if (action.name && !action.component) {
+      // action['component'] = () => import(`${views.path}${action.name}${views.format}`);
+      // console.log(action['component'].toString())
+      let path = action.name.charAt(0).toLowerCase() + action.name.slice(1);
+      path = path.replace(/[A-Z]/g, m => "-" + m.toLowerCase());
+      action['path']= `/${path}/`;
+      action['label'] = action.path.replace('-', ' ');
+    }
+});
+
+console.log(routes)
+
 const router = new VueRouter({
   routes
 });
 
-export default router;
+export default router