mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-06 03:05:35 +00:00
create home button
This commit is contained in:
geoffrey45
parent
192ce479c9
commit
8ffe9dd453
@ -5,7 +5,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<title>MusicX</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
97
src/App.vue
97
src/App.vue
@ -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>
|
||||
|
||||
57
src/assets/css/global.css
Normal file
57
src/assets/css/global.css
Normal file
@ -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;
|
||||
}
|
||||
22
src/assets/icons/home.svg
Normal file
22
src/assets/icons/home.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
4
src/assets/logo.svg
Normal file
4
src/assets/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
3
src/components/AlbumOfTheDay.vue
Normal file
3
src/components/AlbumOfTheDay.vue
Normal file
@ -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>
|
||||
39
src/components/LeftSidebar/Navigation.vue
Normal file
39
src/components/LeftSidebar/Navigation.vue
Normal file
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user