+
@@ -14,67 +15,37 @@
+
+
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
new file mode 100644
index 0000000..f39a1b9
--- /dev/null
+++ b/src/assets/css/global.css
@@ -0,0 +1,57 @@
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: #2c3e50;
+}
+
+a {
+ text-decoration: none;
+ color: #fff;
+}
+
+.l-container {
+ display: grid;
+ grid-template-columns: 300px 4fr 2fr;
+ grid-template-rows: 0.1fr 1fr 1fr;
+ gap: 4px;
+ grid-auto-flow: row;
+ grid-template-areas:
+ "l-sidebar nav nav"
+ "l-sidebar content r-sidebar"
+ "l-sidebar content r-sidebar";
+ width: 100vw;
+ height: 100vh;
+}
+
+.l-sidebar {
+ grid-area: l-sidebar;
+ padding-left: 20px;
+ padding-top: 0.5em;
+ background-color: #131313b2;
+ /* border: 1px solid rgb(109, 109, 109); */
+ border-radius: 5px;
+}
+
+.nav {
+ grid-area: nav;
+ max-height: 70px;
+ border: 1px solid rgb(109, 109, 109);
+ border-radius: 5px;
+}
+
+.content {
+ grid-area: content;
+ border: 1px solid rgb(109, 109, 109);
+ border-radius: 5px;
+}
+body {
+ margin: 0;
+ background: #0e141a;
+}
+
+.r-sidebar {
+ grid-area: r-sidebar;
+ border: 1px solid rgb(109, 109, 109);
+ border-radius: 5px;
+}
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
new file mode 100644
index 0000000..56fa80f
--- /dev/null
+++ b/src/assets/icons/home.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..a9a1853
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/AlbumOfTheDay.vue b/src/components/AlbumOfTheDay.vue
new file mode 100644
index 0000000..378e5b0
--- /dev/null
+++ b/src/components/AlbumOfTheDay.vue
@@ -0,0 +1,3 @@
+
+ This is your Homepage
+
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 4a440e2..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
{{ msg }}
-
- For a guide and recipes on how to configure / customize this project,
- check out the
- vue-cli documentation.
-
-
Installed CLI Plugins
-
-
Essential Links
-
-
Ecosystem
-
-
-
-
-
-
-
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
new file mode 100644
index 0000000..17da4cf
--- /dev/null
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 97bfc3f..3ef9b16 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,5 +2,6 @@ import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
+import '../src/assets/css/global.css'
createApp(App).use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 15988df..75e6a43 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,25 +1,23 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/Home.vue";
+import FolderView from "../views/FolderView.vue";
const routes = [
{
- path: '/',
- name: 'Home',
- component: Home
+ path: "/",
+ name: "Home",
+ component: Home,
},
{
- path: '/about',
- name: 'About',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
- }
-]
+ path: "/folder",
+ name: "FolderView",
+ component: FolderView,
+ },
+];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
- routes
-})
+ routes,
+});
-export default router
+export default router;
diff --git a/src/views/About.vue b/src/views/FolderView.vue
similarity index 60%
rename from src/views/About.vue
rename to src/views/FolderView.vue
index 3fa2807..cc4d12d 100644
--- a/src/views/About.vue
+++ b/src/views/FolderView.vue
@@ -1,5 +1,5 @@
-
This is an about page
+ This is a folder view
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8bd6c57..8f69495 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,16 @@
-
-
+