mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 12:33:03 +00:00
add @1000px media queries for the sidebar
This commit is contained in:
geoffrey45
@@ -1,39 +1,124 @@
|
||||
<template>
|
||||
<div id="nav-container">
|
||||
<div class="nav-container">
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div id="home-button">
|
||||
<div id="home-icon"></div>
|
||||
<div class="nav-button" id="home-button">
|
||||
<div class="nav-icon" id="home-icon"></div>
|
||||
<span id="text">Home</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="album-button">
|
||||
<div class="nav-icon" id="album-icon"></div>
|
||||
<span id="text">Albums</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="artists-button">
|
||||
<div class="nav-icon" id="artists-icon"></div>
|
||||
<span id="text">Artists</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="playlists-button">
|
||||
<div class="nav-icon" id="playlists-icon"></div>
|
||||
<span id="text">Playlist</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="mixes-button">
|
||||
<div class="nav-icon" id="mixes-icon"></div>
|
||||
<span id="text">Mixes</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="folders-button">
|
||||
<div class="nav-icon" id="folders-icon"></div>
|
||||
<span id="text">Folders</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#nav-container {
|
||||
.nav-container {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#nav-container #home-button {
|
||||
.nav-container .nav-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
background-color: transparent;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
#nav-container #home-button #home-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background-image: url(../../assets/icons/home.svg);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.nav-container .nav-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-container .nav-button .nav-icon {
|
||||
margin-left: calc(100% - 20px*2);
|
||||
}
|
||||
|
||||
.nav-container span {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-container .nav-button:hover {
|
||||
background-color: rgba(220, 20, 60, 0.5);
|
||||
}
|
||||
|
||||
.nav-container .nav-button .nav-icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.nav-container #home-button #home-icon {
|
||||
background-image: url(../../assets/icons/home.svg);
|
||||
}
|
||||
|
||||
#nav-container #home-button #text {
|
||||
.nav-container #album-button #album-icon {
|
||||
background-image: url(../../assets/icons/album.svg);
|
||||
}
|
||||
|
||||
.nav-container #home-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-container #artists-button #artists-icon {
|
||||
background-image: url(../../assets/icons/artist.svg);
|
||||
}
|
||||
|
||||
.nav-container #playlists-button #playlists-icon {
|
||||
background-image: url(../../assets/icons/playlist.svg);
|
||||
}
|
||||
|
||||
.nav-container #mixes-button #mixes-icon {
|
||||
background-image: url(../../assets/icons/mix.svg);
|
||||
}
|
||||
|
||||
.nav-container #folders-button #folders-icon {
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
}
|
||||
|
||||
.nav-container #folders-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-container hr {
|
||||
/* color: transparent; */
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="nav-container hidden" id="pinned-container">
|
||||
<div>
|
||||
<div class="nav-button" id="pinned-button">
|
||||
<!-- <div class="nav-icon" id="pinned-icon"></div> -->
|
||||
<span id="text">Quick access</span>
|
||||
</div>
|
||||
</div>
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="album-button">
|
||||
<div class="nav-icon" id="album-icon"></div>
|
||||
<span id="text">Legends Never Die</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="album-button">
|
||||
<div class="nav-icon" id="album-icon"></div>
|
||||
<span id="text">The Party Never Ends</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="artists-button">
|
||||
<div class="nav-icon" id="artists-icon"></div>
|
||||
<span id="text">Juice WRLD</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="playlists-button">
|
||||
<div class="nav-icon" id="playlists-icon"></div>
|
||||
<span id="text">Juice WRLD Discography</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="mixes-button">
|
||||
<div class="nav-icon" id="mixes-icon"></div>
|
||||
<span id="text">Lil Peep Radio</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr />
|
||||
<router-link :to="{ name: 'Home' }">
|
||||
<div class="nav-button" id="folders-button">
|
||||
<div class="nav-icon" id="folders-icon"></div>
|
||||
<span id="text">Ngogoyo ya Kamarú</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pinned-container .nav-button {
|
||||
color: rgba(255, 255, 255, 0.671);
|
||||
}
|
||||
|
||||
#pinned-container .nav-button:hover {
|
||||
background-color: rgba(5, 80, 150, 0.322);
|
||||
}
|
||||
|
||||
#pinned-container .nav-button .nav-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#pinned-container #album-button #album-icon {
|
||||
background-image: url(../../assets/icons/album.svg);
|
||||
}
|
||||
|
||||
#pinned-container #home-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#pinned-container #artists-button #artists-icon {
|
||||
background-image: url(../../assets/icons/artist.svg);
|
||||
}
|
||||
|
||||
#pinned-container #playlists-button #playlists-icon {
|
||||
background-image: url(../../assets/icons/playlist.svg);
|
||||
}
|
||||
|
||||
#pinned-container #mixes-button #mixes-icon {
|
||||
background-image: url(../../assets/icons/mix.svg);
|
||||
}
|
||||
|
||||
#pinned-container #folders-button #folders-icon {
|
||||
background-image: url(../../assets/icons/folder.svg);
|
||||
}
|
||||
|
||||
#pinned-container #pinned-button #pinned-icon {
|
||||
background-image: url(../../assets/icons/pin.svg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#pinned-container #pinned-button #text {
|
||||
text-transform: uppercase;
|
||||
font-weight: 1000;
|
||||
font-size: small;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#pinned-container #pinned-button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#pinned-container #folders-button #text {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#pinned-container hr {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#pinned-container .seperator {
|
||||
color: var(--grey);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user