Skip to content
Snippets Groups Projects
Commit 3ea72867 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

Update Navbar

parent 5149509b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 16
− 6
View file @ 3ea72867
<template>
<div id="app">
<div id="nav">
<div id='app'>
<div id='nav'>
<navbar />
<img
src='./assets/Aktuelles_Hochschule_Deggendorf.jpg'
class='img-fluid w-100 h-25 header-img'
alt='THD Campus'
/>
</div>
<router-view />
<thdfooter />
</div>
</template>
<style lang="scss">
<style lang='scss'>
// global imports
// import the Bootstrap scss files and the other scss attributs
@import "./assets/app.scss";
@import './assets/app.scss';
// global style
......@@ -22,6 +27,11 @@
text-align: center;
color: $thdblue;
}
@include media-breakpoint-down(md) {
.header-img {
display: none;
}
}
</style>
<script>
......@@ -45,7 +55,7 @@ export default {
<!--
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<img alt='Vue logo' src='./assets/logo.png'>
<HelloWorld msg='Welcome to Your Vue.js App'/>
</template>
-->
src/assets/Aktuelles_Hochschule_Deggendorf.jpg 0 → 100644
+ 0
− 0
View file @ 3ea72867
src/assets/Aktuelles_Hochschule_Deggendorf.jpg

193 KiB

src/components/navbar.vue
+ 106
− 47
View file @ 3ea72867
<template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="/de">
<img src="../assets/logos/public_src_assets_THD.png" class="img-brand" alt="Responsive image">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link to="/" class="nav-link active" aria-current="page">Home</router-link> <!--vue link instead of the anchor-->
</li>
<li class="nav-item">
<router-link to="/about" class="nav-link">About</router-link>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<nav
class="navbar navbar-expand-lg navbar-dark"
:class="{ 'fixed-top': isfixedtop }"
>
<div class="container-fluid">
<a class="navbar-brand" href="/de">
<img
src="../assets/logos/public_src_assets_THD.png"
class="img-brand"
alt="Responsive image"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul
class="navbar-nav nav-pills nav-fill nav-justified me-auto mb-2 mb-lg-0"
role="tabpanel"
>
<li class="nav-item">
<router-link to="/" class="nav-link" aria-current="page">
Home
</router-link>
<!--vue link instead of the anchor-->
</li>
<li class="nav-item">
<router-link to="/about" class="nav-link">About</router-link>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<form class="d-flex ml-auto">
<input class="form-control me-2 d-flex" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success mx-1" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="d-flex ml-auto">
<input
class="form-control me-2 d-flex"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success mx-1" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</template>
<style>
@media (max-width: 1300px)
{.img-brand {
@media (max-width: 1300px) {
.img-brand {
transform: scale(0.7);
margin-left: -30px;
}
}
.img-brand
{
max-width: 380px !important;
display: block;
max-width: 100%;
transform: scale(0.9);
.img-brand {
max-width: 380px !important;
display: block;
max-width: 100%;
transform: scale(0.9);
}
.navbar{
background-color: rgba(47, 47, 47, 0.8) transparent;
.navbar {
background-color: rgba(0, 0, 0, 0.6);
}
/* @media (max-width: 991.98px) {
.fixed-top {
position: relative !important;
}
} */
</style>
<script>
export default {
data () {
return {
}
},
methods: {
isfixedtop: () => {
if (window.innerWidth < 991) { return false } else { return true }
}
}
}
</script>
src/components/thdfooter.vue
+ 3
− 3
View file @ 3ea72867
......@@ -4,9 +4,9 @@
<p class="text-center">
© 2020 |
<a>Technische Hochschule Deggendorf</a> |
<a href="/de/Impressum">Impressum</a> |
<a href="/de/Datenschutz">Datenschutz</a> |
<a href="/de/Barrierefreiheit">Barrierefreiheit Erklärung</a>
<a href="#">Impressum</a> |
<a href="#">Datenschutz</a> |
<a href="#">Barrierefreiheit Erklärung</a>
</p>
</div>
</footer>
......
src/views/About.vue
+ 0
− 3
View file @ 3ea72867
<template>
<div>
<img src="../assets/public_src_assets_THD.png" class="img-fluid w-100" alt="THD Campus" />
</div>
<h1>THD Mensa Information</h1>
<p>
here you find Information from mensa
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment