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> <template>
<div id="app"> <div id='app'>
<div id="nav"> <div id='nav'>
<navbar /> <navbar />
<img
src='./assets/Aktuelles_Hochschule_Deggendorf.jpg'
class='img-fluid w-100 h-25 header-img'
alt='THD Campus'
/>
</div> </div>
<router-view /> <router-view />
<thdfooter /> <thdfooter />
</div> </div>
</template> </template>
<style lang="scss"> <style lang='scss'>
// global imports // global imports
// import the Bootstrap scss files and the other scss attributs // import the Bootstrap scss files and the other scss attributs
@import "./assets/app.scss"; @import './assets/app.scss';
// global style // global style
...@@ -22,6 +27,11 @@ ...@@ -22,6 +27,11 @@
text-align: center; text-align: center;
color: $thdblue; color: $thdblue;
} }
@include media-breakpoint-down(md) {
.header-img {
display: none;
}
}
</style> </style>
<script> <script>
...@@ -45,7 +55,7 @@ export default { ...@@ -45,7 +55,7 @@ export default {
<!-- <!--
<template> <template>
<img alt="Vue logo" src="./assets/logo.png"> <img alt='Vue logo' src='./assets/logo.png'>
<HelloWorld msg="Welcome to Your Vue.js App"/> <HelloWorld msg='Welcome to Your Vue.js App'/>
</template> </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> <template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark "> <nav
<div class="container-fluid"> class="navbar navbar-expand-lg navbar-dark"
<a class="navbar-brand" href="/de"> :class="{ 'fixed-top': isfixedtop }"
<img src="../assets/logos/public_src_assets_THD.png" class="img-brand" alt="Responsive image"> >
</a> <div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/de">
<span class="navbar-toggler-icon"></span> <img
</button> src="../assets/logos/public_src_assets_THD.png"
<div class="collapse navbar-collapse" id="navbarSupportedContent"> class="img-brand"
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> alt="Responsive image"
<li class="nav-item"> />
<router-link to="/" class="nav-link active" aria-current="page">Home</router-link> <!--vue link instead of the anchor--> </a>
</li> <button
<li class="nav-item"> class="navbar-toggler"
<router-link to="/about" class="nav-link">About</router-link> type="button"
</li> data-bs-toggle="collapse"
<li class="nav-item dropdown"> data-bs-target="#navbarSupportedContent"
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> aria-controls="navbarSupportedContent"
Dropdown aria-expanded="false"
</a> aria-label="Toggle navigation"
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"> >
<li><a class="dropdown-item" href="#">Action</a></li> <span class="navbar-toggler-icon"></span>
<li><a class="dropdown-item" href="#">Another action</a></li> </button>
<li><hr class="dropdown-divider"></li> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<li><a class="dropdown-item" href="#">Something else here</a></li> <ul
</ul> class="navbar-nav nav-pills nav-fill nav-justified me-auto mb-2 mb-lg-0"
</li> role="tabpanel"
<li class="nav-item"> >
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> <li class="nav-item">
</li> <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> </ul>
<form class="d-flex ml-auto"> </li>
<input class="form-control me-2 d-flex" type="search" placeholder="Search" aria-label="Search"> <li class="nav-item">
<button class="btn btn-outline-success mx-1" type="submit">Search</button> <a
</form> class="nav-link disabled"
</div> href="#"
</div> tabindex="-1"
</nav> 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> </template>
<style> <style>
@media (max-width: 1300px) @media (max-width: 1300px) {
{.img-brand { .img-brand {
transform: scale(0.7); transform: scale(0.7);
margin-left: -30px; margin-left: -30px;
} }
} }
.img-brand .img-brand {
{ max-width: 380px !important;
max-width: 380px !important; display: block;
display: block; max-width: 100%;
max-width: 100%; transform: scale(0.9);
transform: scale(0.9);
} }
.navbar{ .navbar {
background-color: rgba(47, 47, 47, 0.8) transparent; background-color: rgba(0, 0, 0, 0.6);
} }
/* @media (max-width: 991.98px) {
.fixed-top {
position: relative !important;
}
} */
</style> </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 @@ ...@@ -4,9 +4,9 @@
<p class="text-center"> <p class="text-center">
© 2020 | © 2020 |
<a>Technische Hochschule Deggendorf</a> | <a>Technische Hochschule Deggendorf</a> |
<a href="/de/Impressum">Impressum</a> | <a href="#">Impressum</a> |
<a href="/de/Datenschutz">Datenschutz</a> | <a href="#">Datenschutz</a> |
<a href="/de/Barrierefreiheit">Barrierefreiheit Erklärung</a> <a href="#">Barrierefreiheit Erklärung</a>
</p> </p>
</div> </div>
</footer> </footer>
......
src/views/About.vue
+ 0
− 3
View file @ 3ea72867
<template> <template>
<div>
<img src="../assets/public_src_assets_THD.png" class="img-fluid w-100" alt="THD Campus" />
</div>
<h1>THD Mensa Information</h1> <h1>THD Mensa Information</h1>
<p> <p>
here you find Information from mensa 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