add basic nav bar and very basic design

This commit is contained in:
Marcel-Anker
2025-10-27 22:15:04 +01:00
parent db05aa2a8a
commit d0293cc37c
5 changed files with 23 additions and 27 deletions

View File

@@ -113,5 +113,8 @@
}
}
}
},
"cli": {
"analytics": "6c026e73-90a0-47be-850c-7e38cc39dc83"
}
}

28
package-lock.json generated
View File

@@ -400,7 +400,6 @@
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.9.tgz",
"integrity": "sha512-rbY1AMz9389WJI29iAjWp4o0QKRQHCrQQUuP0ctNQzh1tgWpwiRLx8N4yabdVdsCA846vPsyKJtBlSNwKMsjJA==",
"license": "MIT",
"peer": true,
"dependencies": {
"parse5": "^8.0.0",
"tslib": "^2.3.0"
@@ -447,7 +446,6 @@
"node_modules/@angular/common": {
"version": "20.3.5",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -462,7 +460,6 @@
"node_modules/@angular/compiler": {
"version": "20.3.5",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -474,7 +471,6 @@
"version": "20.3.5",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/core": "7.28.3",
"@jridgewell/sourcemap-codec": "^1.4.14",
@@ -505,7 +501,6 @@
"node_modules/@angular/core": {
"version": "20.3.5",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -529,7 +524,6 @@
"node_modules/@angular/forms": {
"version": "20.3.5",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -563,7 +557,6 @@
"node_modules/@angular/platform-browser": {
"version": "20.3.5",
"license": "MIT",
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -622,7 +615,6 @@
"version": "7.28.3",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -1515,7 +1507,6 @@
"version": "7.8.2",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@inquirer/checkbox": "^4.2.1",
"@inquirer/confirm": "^5.1.14",
@@ -3602,7 +3593,6 @@
"version": "24.8.0",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~7.14.0"
}
@@ -3888,7 +3878,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.8.9",
"caniuse-lite": "^1.0.30001746",
@@ -4777,7 +4766,6 @@
"version": "5.1.0",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"accepts": "^2.0.0",
"body-parser": "^2.2.0",
@@ -5583,8 +5571,7 @@
"node_modules/jasmine-core": {
"version": "5.9.0",
"dev": true,
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/jiti": {
"version": "2.6.1",
@@ -5658,7 +5645,6 @@
"version": "6.4.4",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@colors/colors": "1.5.0",
"body-parser": "^1.19.0",
@@ -6284,7 +6270,6 @@
"version": "9.0.1",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"cli-truncate": "^4.0.0",
"colorette": "^2.0.20",
@@ -7743,7 +7728,6 @@
"node_modules/rxjs": {
"version": "7.8.2",
"license": "Apache-2.0",
"peer": true,
"dependencies": {
"tslib": "^2.1.0"
}
@@ -7792,7 +7776,6 @@
"version": "1.90.0",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@@ -8449,8 +8432,7 @@
},
"node_modules/tslib": {
"version": "2.8.1",
"license": "0BSD",
"peer": true
"license": "0BSD"
},
"node_modules/tuf-js": {
"version": "3.1.0",
@@ -8482,7 +8464,6 @@
"version": "5.9.3",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -8641,7 +8622,6 @@
"version": "7.1.5",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@@ -8991,7 +8971,6 @@
"version": "3.25.76",
"dev": true,
"license": "MIT",
"peer": true,
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
@@ -9006,8 +8985,7 @@
},
"node_modules/zone.js": {
"version": "0.15.1",
"license": "MIT",
"peer": true
"license": "MIT"
}
}
}

View File

@@ -7,5 +7,6 @@ nav {
.navbar {
width: 200px;
background-color: #ff0080;
background-color: #ffffff;
padding: 20px;
}

View File

@@ -1,2 +1,13 @@
<nav class="navbar">
<ul class="nav-list">
@for (item of navItems; track item.path) {
<li>
<div class="flex justify-center">
<a href="{{item.path}}" class="text-xl font-bold">
{{ item.label }}
</a>
</div>
</li>
}
</ul>
</nav>

View File

@@ -7,5 +7,8 @@ import { Component } from '@angular/core';
styleUrl: './navbar.component.css'
})
export class NavbarComponent {
navItems:{label:string, path:string}[] = [
{label: 'Schedule', path: '/schedule'},
{label: 'beispiel', path: ''}, /* mal gucken wie man das elegant dynamisch machen kann*/
]
}