Mercurial > gemma

comparison client/src/components/Sidebar.vue @ 117:5e95c62a7e74

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Move component. Re-add Css. Move components to separate folders. Re-adding login css to appropriate component (=undoing ae6535d44563) according to vue style.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 26 Jun 2018 17:26:34 +0200
parents
children 992e17912405
comparison
equal deleted inserted replaced
116:dad6cf39691e 117:5e95c62a7e74
1 <template>
2 <div class="sidebar">
3 <nav class="nav flex-column">
4 <a class="nav-link active" href="#">Active</a>
5 <a class="nav-link" href="#">Link</a>
6 <a class="nav-link" href="#">Link</a>
7 <a class="nav-link disabled" href="#">Disabled</a>
8 </nav>
9 </div>
10 </template>
11
12 <script>
13 export default {
14 name: "sidebar",
15 computed: {
16 sidebarStyle() {
17 return {
18 sidebarcollapsed: this.collapsed,
19 sidebarextended: this.collapsed
20 };
21 }
22 },
23 data() {
24 return {
25 collapsed: false
26 };
27 }
28 };
29 </script>
30
31 <style lang="scss">
32 @import "../assets/application.scss";
33
34 $sidebar-full-width: 150px;
35
36 $sidebar-collapsed-width: 80px;
37
38 .sidebar {
39 padding-top: $large-offset;
40 }
41
42 .sidebarcollapsed {
43 width: $sidebar-collapsed-width;
44 }
45
46 .sidebarextended {
47 width: $sidebar-full-width;
48 }
49 </style>