Skip to content

Commit 1a00151

Browse files
author
Elizabeth Zhong
committed
added routing to sidebar
1 parent 87c234b commit 1a00151

File tree

14 files changed

+252
-116
lines changed

14 files changed

+252
-116
lines changed

‎.eslintrc.js

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎package.json

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/App.vue

Lines changed: 94 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,109 @@
22
<v-app id="main-app">
33
<!-- Navigation bar/app bar goes here -->
44
<v-content>
5-
<router-view></router-view>
5+
<div>
6+
<Sidebar :drawer="drawer" />
7+
<v-app-bar app dark>
8+
<v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
9+
<div class="flex-grow-1"></div>
10+
11+
<router-link to="/"
12+
><v-container
13+
class="fill-height"
14+
fluid
15+
style="max-height: 64px; max-width:100px"
16+
>
17+
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
18+
</v-container>
19+
</router-link>
20+
<div class="flex-grow-1"></div>
21+
<LoginForm align="right"/>
22+
</v-app-bar>
23+
24+
<router-view></router-view>
25+
<Footer/>
26+
</div>
627
</v-content>
728
</v-app>
829
</template>
930

1031
<script>
32+
import Footer from '@/components/Footer';
33+
import Sidebar from '@/components/Sidebar.vue';
34+
import LoginForm from '@/components/LoginForm';
1135
1236
export default {
1337
name: 'App',
14-
components: {},
15-
data: () => ({}),
38+
data: () => ({
39+
drawer: false,
40+
gridApiUri: 'https://gistcdn.githack.com/gawdn/464b5ed74404481f7296fb24f9f28243/raw/c9f63e5117a1406db9af5266c8cfd448161bbfec/test_grid.json',
41+
gridItems: [],
42+
listApiUri: 'https://gistcdn.githack.com/gawdn/464b5ed74404481f7296fb24f9f28243/raw/c9f63e5117a1406db9af5266c8cfd448161bbfec/test_grid.json',
43+
listItems: [],
44+
}),
45+
46+
components: {
47+
Footer,
48+
Sidebar,
49+
LoginForm
50+
},
51+
52+
mounted() {
53+
fetch(this.gridApiUri)
54+
.then(r => r.json())
55+
.then((responseJson) => {
56+
this.gridItems = responseJson;
57+
});
58+
},
59+
1660
};
1761
</script>
1862

19-
<style scoped>
63+
<style>
64+
@import url("https://fonts.googleapis.com/css?family=Quicksand&display=swap");
65+
* {
66+
margin: 0;
67+
padding: 0;
68+
}
69+
#showcase {
70+
background-image: url("https://backgroundcheckall.com/wp-content/uploads/2017/12/black-tech-background-12.jpg");
71+
background-size: cover;
72+
background-position: center;
73+
height: 100vh;
74+
display: flex;
75+
flex-direction: column;
76+
justify-content: center;
77+
align-items: center;
78+
text-align: center;
79+
padding: 0 20px;
80+
}
81+
#showcase img {
82+
max-width: 30%;
83+
max-height: 30vh;
84+
}
85+
#showcase h1 {
86+
font-size: 50px;
87+
line-height: 1.2;
88+
}
89+
#showcase p {
90+
font-size: 20px;
91+
}
92+
#showcase .button {
93+
font-family: "Quicksand", sans-serif;
94+
font-size: 18px;
95+
text-decoration: none;
96+
color: #fff;
97+
background: #3a76f8;
98+
padding: 10px 20px;
99+
border-radius: 10px;
100+
margin-top: 20px;
101+
width: 250px;
102+
}
103+
#showcase .button:hover {
104+
background: #3a76f8;
105+
color: #fff;
106+
}
107+
.content {
108+
padding: 2vw 15vw 5vw 15vw;
109+
}
20110
</style>

‎src/components/Sidebar.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -170,22 +170,22 @@ export default {
170170
{ title: 'Constitution', route: '/', icon: '' },
171171
],
172172
},
173-
{ title: 'Members', icon: 'mdi-account', route: '/', children: [
173+
{ title: 'Members', icon: 'mdi-account', route: '/members', children: [
174174
{ title: 'Our team', route: '/', icon: '' },
175175
{ title: 'Student Network', route: '/', icon: '' },
176176
] },
177-
{ title: 'Media', icon: 'mdi-camera', route: '/', children: [
177+
{ title: 'Media', icon: 'mdi-camera', route: '/media', children: [
178178
{ title: 'Videos', route: '/', icon: '' },
179179
{ title: 'Blog', route: '/', icon: '' },
180180
{ title: 'Podcast', route: '/', icon: '' },
181181
{ title: 'First Year Guide', route: '/', icon: '' },
182182
] },
183-
{ title: 'Merch', icon: 'mdi-shopping', route: '/', children: [] },
184-
{ title: 'Events', icon: 'mdi-calendar', route: '/about', children: [] },
185-
{ title: 'Resources', icon: 'mdi-library-books', route: '/', children: [] },
186-
{ title: 'Projects', icon: 'mdi-laptop', route: '/', children: [] },
183+
{ title: 'Merch', icon: 'mdi-shopping', route: '/merch', children: [] },
184+
{ title: 'Events', icon: 'mdi-calendar', route: '/events', children: [] },
185+
{ title: 'Resources', icon: 'mdi-library-books', route: '/resources', children: [] },
186+
{ title: 'Projects', icon: 'mdi-laptop', route: '/projects', children: [] },
187187
{ title: 'For Sponsors', icon: 'mdi-city', route: '/', children: [] },
188-
{ title: 'Contact', icon: 'mdi-contact-mail', route: '/', children: [] },
188+
{ title: 'Contact', icon: 'mdi-contact-mail', route: '/contact', children: [] },
189189
],
190190
search: { filter: null, text: '' },
191191
searchIcon: 'mdi-magnify',

‎src/router.js

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,42 @@ export default new Router({
1414
{
1515
path: '/about',
1616
name: 'about',
17-
// route level code-splitting
18-
// this generates a separate chunk (about.[hash].js) for this route
19-
// which is lazy-loaded when the route is visited.
2017
component: () => import('./views/About.vue'),
2118
},
19+
{
20+
path: '/contact',
21+
name: 'contact',
22+
component: () => import('./views/Contact.vue'),
23+
},
24+
{
25+
path: '/events',
26+
name: 'events',
27+
component: () => import('./views/Events.vue'),
28+
},
29+
{
30+
path: '/media',
31+
name: 'media',
32+
component: () => import('./views/Media.vue'),
33+
},
34+
{
35+
path: '/members',
36+
name: 'members',
37+
component: () => import('./views/Members.vue'),
38+
},
39+
{
40+
path: '/merch',
41+
name: 'merch',
42+
component: () => import('./views/Merch.vue'),
43+
},
44+
{
45+
path: '/projects',
46+
name: 'projects',
47+
component: () => import('./views/Projects.vue'),
48+
},
49+
{
50+
path: '/resources',
51+
name: 'resources',
52+
component: () => import('./views/Resources.vue'),
53+
},
2254
],
2355
});

‎src/views/About.vue

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,5 @@
11
<template>
22
<div>
3-
<Sidebar :drawer="drawer" />
4-
5-
6-
7-
8-
9-
<v-app-bar app dark>
10-
<v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
11-
<div class="flex-grow-1"></div>
12-
13-
<router-link to="/"
14-
><v-container
15-
class="fill-height"
16-
fluid
17-
style="max-height: 64px; max-width:100px"
18-
>
19-
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
20-
</v-container>
21-
</router-link>
22-
<div class="flex-grow-1"></div>
23-
<LoginForm align="right"/>
24-
</v-app-bar>
253

264
<div class="content">
275

@@ -41,7 +19,6 @@ We're as passionate about computing as you are; we provide technical events to t
4119
Most of all, we're here to help you settle in and have a great time at UNSW!
4220
</p>
4321
</div>
44-
<Footer/>
4522
</div>
4623
</template>
4724

@@ -126,6 +103,7 @@ export default {
126103
color: #fff;
127104
}
128105
106+
129107
.content {
130108
padding: 2vw 15vw 5vw 15vw;
131109
}

‎src/views/Contact.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<div class='content'>
4+
<p>This is a sample contact us page</p>
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
data: () => ({}),
12+
components: [],
13+
};
14+
</script>
15+
16+
<style scoped>
17+
</style>

‎src/views/Events.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class='content'>
3+
<p>This is a sample events page</p>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data: () => ({}),
10+
components: [],
11+
};
12+
</script>
13+
14+
<style scoped>
15+
</style>

‎src/views/Home.vue

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,6 @@
22
<template>
33
<div id="home">
44

5-
<Sidebar :drawer="drawer" />
6-
7-
8-
9-
10-
<!-- transparent + no logo until scroll point ??-->
11-
<v-app-bar app dark>
12-
<v-app-bar-nav-icon class="ma-2" @click.stop="drawer = !drawer"> </v-app-bar-nav-icon>
13-
<div class="flex-grow-1"></div>
14-
15-
<router-link to="/"
16-
><v-container
17-
class="fill-height"
18-
fluid
19-
style="max-height: 64px; max-width:100px"
20-
>
21-
<v-img class="ma-8" src="https://github.com/csesoc/csesoc.unsw.edu.au/blob/frontendCombined/src/assets/csesoclogobluewhite.png?raw=true" />
22-
</v-container>
23-
</router-link>
24-
<div class="flex-grow-1"></div>
25-
<LoginForm align="right"/>
26-
</v-app-bar>
27-
285

296
<!-- make header a seperate component! -->
307
<header id="showcase">
@@ -63,7 +40,6 @@
6340
<div class="square">
6441
<NavGrid id='content-start' :gridItems="gridItems"></NavGrid>
6542
</div>
66-
<Footer/>
6743
</div>
6844
</template>
6945

@@ -103,13 +79,15 @@ export default {
10379
.then((responseJson) => {
10480
this.gridItems = responseJson;
10581
this.items=responseJson;
106-
});
82+
}
83+
);
10784
108-
fetch(this.listApiUri)
109-
.then(r => r.json())
110-
.then((responseJson) => {
111-
this.listItems = responseJson;
112-
});
85+
fetch(this.listApiUri)
86+
.then(r => r.json())
87+
.then((responseJson) => {
88+
this.listItems = responseJson;
89+
}
90+
);
11391
},
11492
11593
};

‎src/views/Media.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div class="content">
3+
<p>This is a sample media page</p>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data: () => ({}),
10+
components: [],
11+
};
12+
</script>
13+
14+
<style scoped>
15+
</style>

0 commit comments

Comments
 (0)