Commit 3ea72867 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

Update Navbar

parent 5149509b
<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>
-->
<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>
......@@ -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>
......
<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
......
Markdown is supported
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