🔀 Solved conflicts due to different commits.

This commit is contained in:
corner 2019-09-26 17:56:26 +02:00
commit a7531e1c31
6 changed files with 81 additions and 4 deletions

View File

@ -28,9 +28,13 @@
"src/assets"
],
"styles": [
"src/styles.scss"
"src/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": []
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
},
"configurations": {
"production": {

10
package-lock.json generated
View File

@ -1594,6 +1594,11 @@
"multicast-dns-service-types": "^1.1.0"
}
},
"bootstrap": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -5346,6 +5351,11 @@
"integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
"dev": true
},
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
"js-tokens": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

View File

@ -24,6 +24,8 @@
"@fortawesome/free-solid-svg-icons": "^5.11.1",
"@types/axios": "^0.14.0",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"

View File

@ -1 +1,19 @@
<p>nav works!</p>
<div [ngClass]="this.navToggled ? 'd-flex toggled' : 'd-flex'" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Cassettea</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">Explore</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Songs</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Albums</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Artists</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Settings</a>
</div>
</div>
<button class="navbar-toggler" (click)="toggleNav();"><span class="navbar-toggler-icon"></span></button>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>

View File

@ -0,0 +1,36 @@
body {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}

View File

@ -6,10 +6,17 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
navToggled;
constructor() { }
constructor() {
this.navToggled = false;
}
ngOnInit() {
}
toggleNav() {
this.navToggled = (this.navToggled) ? false : true;
}
}