create home button

2026-10-28 23:41:15 +00:00 · 2021-11-15 19:16:58 +03:00
1 parent 192ce479c9
commit 8ffe9dd453
@@ -1,11 +1,12 @@
 <template>
-  <div class="container">
-    <div class="l-sidebar"></div>
+  <div class="l-container">
+    <div class="l-sidebar">
+      <router-link :to="{ name: 'Home' }"><div id="logo"></div></router-link>
+      <hr id="logo-seperator" />
+      <Navigation />
+    </div>
    <div class="nav">
-      <div id="nav">
-        <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link>
-      </div>
+      <div id="nav"></div>
    </div>
    <div class="content">
      <router-view />
@@ -14,67 +15,37 @@
  </div>
 </template>

+<script>
+import Navigation from "./components/LeftSidebar/Navigation.vue";
+
+export default {
+  components: {
+    Navigation,
+  },
+  setup() {},
+};
+</script>
+
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+#logo {
+  height: 60px;
+  width: 200px;
+  background: url(./assets/logo.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }

-#nav {
-  padding: 30px;
+.l-container #logo-seperator {
+  margin-left: -1em;
+  border: 1px solid;
+  color: rgba(255, 255, 255, 0.514);
+  margin-bottom: 1em;
 }

-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-
-.container {
-  display: grid;
-  grid-template-columns: 50px 4fr 0fr;
-  grid-template-rows: 0.1fr 1fr 1fr;
-  /* grid-auto-columns: 1fr 1fr 1fr;
-  grid-auto-rows: 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;
-  border: solid;
-  /* height: calc(100vh - 98px); */
-}
-
-.nav {
-  grid-area: nav;
-  border: solid;
-  max-height: 70px;
-}
-
-.content {
-  grid-area: content;
-  border: solid;
-}
-body {
-  margin: 0;
-}
-
-.r-sidebar {
-  grid-area: r-sidebar;
-  border: solid;
-  /* max-width: 500px; */
+.l-container #l-home-icon {
+  height: 40px;
+  width: 40px;
+  background: red;
 }
 </style>
@@ -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;
+}
@@ -0,0 +1,22 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_105_187)">
+<g filter="url(#filter0_d_105_187)">
+<path d="M6.25 27.5H23.75C24.413 27.5 25.0489 27.2366 25.5178 26.7678C25.9866 26.2989 26.25 25.6631 26.25 25V13.75C26.251 13.5855 26.2194 13.4224 26.1572 13.2701C26.095 13.1178 26.0034 12.9793 25.8875 12.8625L15.8875 2.86251C15.6533 2.6297 15.3365 2.49902 15.0063 2.49902C14.676 2.49902 14.3592 2.6297 14.125 2.86251L4.125 12.8625C4.00689 12.9783 3.91293 13.1163 3.84856 13.2687C3.78419 13.421 3.75069 13.5846 3.75 13.75V25C3.75 25.6631 4.01339 26.2989 4.48223 26.7678C4.95107 27.2366 5.58696 27.5 6.25 27.5ZM12.5 25V18.75H17.5V25H12.5ZM6.25 14.2625L15 5.51251L23.75 14.2625V25H20V18.75C20 18.087 19.7366 17.4511 19.2678 16.9822C18.7989 16.5134 18.163 16.25 17.5 16.25H12.5C11.837 16.25 11.2011 16.5134 10.7322 16.9822C10.2634 17.4511 10 18.087 10 18.75V25H6.25V14.2625Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_105_187" x="-0.25" y="2.49902" width="30.5" height="33.001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_105_187"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_105_187" result="shape"/>
+</filter>
+<clipPath id="clip0_105_187">
+<rect width="30" height="30" rx="10" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,4 @@
+<svg width="191" height="54" viewBox="0 0 191 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.6328 35L10.625 10.3203H10.4141C10.7422 14.5234 10.9062 17.7891 10.9062 20.1172V35H2.70312V0.734375H15.0312L22.1797 25.0625H22.3672L29.375 0.734375H41.7266V35H33.2188V19.9766C33.2188 19.1953 33.2266 18.3281 33.2422 17.375C33.2734 16.4219 33.3828 14.0859 33.5703 10.3672H33.3594L26.4453 35H17.6328ZM78.2422 0.734375V21.3594C78.2422 25.8438 76.9688 29.3203 74.4219 31.7891C71.8906 34.2422 68.2344 35.4688 63.4531 35.4688C58.7812 35.4688 55.1875 34.2734 52.6719 31.8828C50.1719 29.4922 48.9219 26.0547 48.9219 21.5703V0.734375H58.2266V20.8438C58.2266 23.2656 58.6797 25.0234 59.5859 26.1172C60.4922 27.2109 61.8281 27.7578 63.5938 27.7578C65.4844 27.7578 66.8516 27.2188 67.6953 26.1406C68.5547 25.0469 68.9844 23.2656 68.9844 20.7969V0.734375H78.2422ZM107.844 24.5938C107.844 26.7188 107.305 28.6094 106.227 30.2656C105.148 31.9062 103.594 33.1875 101.562 34.1094C99.5312 35.0156 97.1484 35.4688 94.4141 35.4688C92.1328 35.4688 90.2188 35.3125 88.6719 35C87.125 34.6719 85.5156 34.1094 83.8438 33.3125V25.0625C85.6094 25.9688 87.4453 26.6797 89.3516 27.1953C91.2578 27.6953 93.0078 27.9453 94.6016 27.9453C95.9766 27.9453 96.9844 27.7109 97.625 27.2422C98.2656 26.7578 98.5859 26.1406 98.5859 25.3906C98.5859 24.9219 98.4531 24.5156 98.1875 24.1719C97.9375 23.8125 97.5234 23.4531 96.9453 23.0938C96.3828 22.7344 94.8672 22 92.3984 20.8906C90.1641 19.875 88.4844 18.8906 87.3594 17.9375C86.25 16.9844 85.4219 15.8906 84.875 14.6562C84.3438 13.4219 84.0781 11.9609 84.0781 10.2734C84.0781 7.11719 85.2266 4.65625 87.5234 2.89062C89.8203 1.125 92.9766 0.242188 96.9922 0.242188C100.539 0.242188 104.156 1.0625 107.844 2.70312L105.008 9.85156C101.805 8.38281 99.0391 7.64844 96.7109 7.64844C95.5078 7.64844 94.6328 7.85938 94.0859 8.28125C93.5391 8.70312 93.2656 9.22656 93.2656 9.85156C93.2656 10.5234 93.6094 11.125 94.2969 11.6562C95 12.1875 96.8906 13.1562 99.9688 14.5625C102.922 15.8906 104.969 17.3203 106.109 18.8516C107.266 20.3672 107.844 22.2812 107.844 24.5938ZM113.141 35V0.734375H122.445V35H113.141ZM145.133 7.83594C142.93 7.83594 141.211 8.74219 139.977 10.5547C138.742 12.3516 138.125 14.8359 138.125 18.0078C138.125 24.6016 140.633 27.8984 145.648 27.8984C147.164 27.8984 148.633 27.6875 150.055 27.2656C151.477 26.8438 152.906 26.3359 154.344 25.7422V33.5703C151.484 34.8359 148.25 35.4688 144.641 35.4688C139.469 35.4688 135.5 33.9688 132.734 30.9688C129.984 27.9688 128.609 23.6328 128.609 17.9609C128.609 14.4141 129.273 11.2969 130.602 8.60938C131.945 5.92188 133.867 3.85938 136.367 2.42188C138.883 0.96875 141.836 0.242188 145.227 0.242188C148.93 0.242188 152.469 1.04688 155.844 2.65625L153.008 9.94531C151.742 9.35156 150.477 8.85156 149.211 8.44531C147.945 8.03906 146.586 7.83594 145.133 7.83594ZM1.32617 53.8828C1.05664 53.8828 0.816406 53.8418 0.605469 53.7598V52.9336C0.84375 53.0195 1.07617 53.0625 1.30273 53.0625C1.79102 53.0625 2.11914 52.6621 2.28711 51.8613L3.83398 44.5781H4.80664L3.24805 51.9492C3.10742 52.6172 2.88281 53.1055 2.57422 53.4141C2.26953 53.7266 1.85352 53.8828 1.32617 53.8828ZM4.10938 42.9375C4.10938 42.7188 4.17188 42.541 4.29688 42.4043C4.42188 42.2637 4.58398 42.1934 4.7832 42.1934C5.11914 42.1934 5.28711 42.3691 5.28711 42.7207C5.28711 42.9355 5.2207 43.1172 5.08789 43.2656C4.95898 43.4141 4.80859 43.4883 4.63672 43.4883C4.48828 43.4883 4.36328 43.4414 4.26172 43.3477C4.16016 43.25 4.10938 43.1133 4.10938 42.9375ZM7.80664 44.5781L6.92773 48.6504C6.85742 48.998 6.82227 49.2695 6.82227 49.4648C6.82227 50.0234 7.10938 50.3027 7.68359 50.3027C8.02734 50.3027 8.36523 50.1855 8.69727 49.9512C9.0293 49.7168 9.32227 49.3809 9.57617 48.9434C9.83008 48.5059 10.0234 47.9785 10.1562 47.3613L10.7422 44.5781H11.7148L10.3613 51H9.54688L9.67578 49.8105H9.60547C9.22266 50.2988 8.85742 50.6387 8.50977 50.8301C8.16211 51.0215 7.80273 51.1172 7.43164 51.1172C6.93164 51.1172 6.53906 50.9824 6.25391 50.7129C5.96875 50.4395 5.82617 50.0508 5.82617 49.5469C5.82617 49.3047 5.86914 48.9688 5.95508 48.5391L6.81055 44.5781H7.80664ZM16.3965 49.1777C16.3965 49.7871 16.1797 50.2637 15.7461 50.6074C15.3164 50.9473 14.709 51.1172 13.9238 51.1172C13.2637 51.1172 12.668 50.9824 12.1367 50.7129V49.7871C12.4102 49.9512 12.7051 50.0781 13.0215 50.168C13.3379 50.2578 13.6309 50.3027 13.9004 50.3027C14.3926 50.3027 14.7637 50.2051 15.0137 50.0098C15.2637 49.8145 15.3887 49.5645 15.3887 49.2598C15.3887 49.0371 15.3203 48.8496 15.1836 48.6973C15.0469 48.5449 14.752 48.3359 14.2988 48.0703C13.791 47.7852 13.4316 47.5059 13.2207 47.2324C13.0098 46.959 12.9043 46.6348 12.9043 46.2598C12.9043 45.7207 13.1016 45.2871 13.4961 44.959C13.8906 44.627 14.4102 44.4609 15.0547 44.4609C15.7227 44.4609 16.3672 44.6055 16.9883 44.8945L16.6719 45.6973L16.3438 45.5508C15.9492 45.3828 15.5195 45.2988 15.0547 45.2988C14.6914 45.2988 14.4062 45.3848 14.1992 45.5566C13.9922 45.7246 13.8887 45.9434 13.8887 46.2129C13.8887 46.4316 13.957 46.6191 14.0938 46.7754C14.2344 46.9316 14.5215 47.1328 14.9551 47.3789C15.373 47.6133 15.6719 47.8145 15.8516 47.9824C16.0Line truncated
+<path d="M162.289 14.4453C161.008 12.5859 160.367 9.9375 160.367 6.5V3.10156H169.602L187.039 22.2031C188.023 23.2969 188.68 24.2188 189.008 24.9688C189.336 25.7188 189.578 26.4062 189.734 27.0312C190.078 28.2812 190.25 29.8203 190.25 31.6484V35H181.273L162.359 14.4453H162.289ZM180.102 13.1094C180.102 8.8125 180.766 6.01562 182.094 4.71875C182.797 4.03125 183.711 3.59375 184.836 3.40625C185.977 3.20312 187.359 3.10156 188.984 3.10156H190.25V6.80469C190.25 10.1328 189.375 12.3594 187.625 13.4844C186.375 14.2969 184.273 14.7031 181.32 14.7031H180.102V13.1094ZM160.367 31.3438C160.367 28.0156 161.242 25.7812 162.992 24.6406C164.242 23.8438 166.344 23.4453 169.297 23.4453H170.516V25.0391C170.516 29.3828 169.852 32.1719 168.523 33.4062C167.617 34.25 166.297 34.75 164.562 34.9062C163.688 34.9688 162.711 35 161.633 35H160.367V31.3438Z" fill="#4AD168"/>
+</svg>
@@ -0,0 +1,3 @@
+<template>
+  <h1>This is your Homepage</h1>
+</template>
@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
@@ -0,0 +1,39 @@
+<template>
+  <div id="nav-container">
+    <router-link :to="{ name: 'Home' }">
+      <div id="home-button">
+        <div id="home-icon"></div>
+        <span id="text">Home</span>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+#nav-container {
+  color: #fff;
+}
+
+#nav-container #home-button {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+#nav-container #home-button #home-icon {
+  height: 30px;
+  width: 30px;
+  background-image: url(../../assets/icons/home.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 0.5em;
+}
+
+#nav-container #home-button #text {
+  margin-top: 5px;
+}
+</style>
@@ -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')
@@ -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;
@@ -1,5 +1,5 @@
 <template>
  <div class="about">
-    <h1>This is an about page</h1>
+    <h1>This is a folder view</h1>
  </div>
 </template>
@@ -1,18 +1,16 @@
 <template>
  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <AlbumOfTheDay />
  </div>
 </template>

 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import AlbumOfTheDay from "@/components/AlbumOfTheDay.vue";

 export default {
-  name: 'Home',
+  name: "Home",
  components: {
-    HelloWorld
-  }
-}
+    AlbumOfTheDay,
+  },
+};
 </script>