source: ReserveNGo-frontend/src/App.vue@ 5b32153

Last change on this file since 5b32153 was 590f667, checked in by Ljubomir Ilievski <ilievski.ljubomir@…>, 3 months ago

Added Initial frontend

  • Property mode set to 100644
File size: 1.6 KB
Line 
1<script setup>
2//import { RouterLink, RouterView } from 'vue-router'
3import NavBar from './components/Project/Nav_bar_new.vue'
4import Footer_ from '@/components/Project/Footer_.vue'
5
6</script>
7
8<template>
9<!-- <header>
10 <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
11
12 <div class="wrapper">
13 <HelloWorld msg="You did it!" />
14
15 <nav>
16 <RouterLink to="/">Home</RouterLink>
17 <RouterLink to="/about">About</RouterLink>
18 </nav>
19 </div>
20 </header>
21
22 <RouterView />-->
23
24 <NavBar></NavBar>
25 <router-view/>
26
27
28
29 <Footer_></Footer_>
30
31<!-- <Locale_listing_container></Locale_listing_container>
32 <Locale_listing_container></Locale_listing_container>
33 <Locale_listing_container></Locale_listing_container>-->
34
35
36</template>
37
38<style scoped>
39/*header {
40 line-height: 1.5;
41 max-height: 100vh;
42}
43
44.logo {
45 display: block;
46 margin: 0 auto 2rem;
47}
48
49nav {
50 width: 100%;
51 font-size: 12px;
52 text-align: center;
53 margin-top: 2rem;
54}
55
56nav a.router-link-exact-active {
57 color: var(--color-text);
58}
59
60nav a.router-link-exact-active:hover {
61 background-color: transparent;
62}
63
64nav a {
65 display: inline-block;
66 padding: 0 1rem;
67 border-left: 1px solid var(--color-border);
68}
69
70nav a:first-of-type {
71 border: 0;
72}
73
74@media (min-width: 1024px) {
75 header {
76 display: flex;
77 place-items: center;
78 padding-right: calc(var(--section-gap) / 2);
79 }
80
81 .logo {
82 margin: 0 2rem 0 0;
83 }
84
85 header .wrapper {
86 display: flex;
87 place-items: flex-start;
88 flex-wrap: wrap;
89 }
90
91 nav {
92 text-align: left;
93 margin-left: -1rem;
94 font-size: 1rem;
95
96 padding: 1rem 0;
97 margin-top: 1rem;
98 }
99}*/
100</style>
Note: See TracBrowser for help on using the repository browser.