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
<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

193 KiB

<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
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment