Skip to content

Commit 73fb1b2

Browse files
zyxkadzyxkad
committed
node
1 parent 9c24947 commit 73fb1b2

File tree

6 files changed

+125
-89
lines changed

6 files changed

+125
-89
lines changed

‎src/App.vue

Lines changed: 88 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
2-
<div class="body" v-bind:style="{'height': appHeight + 'px'}">
3-
<div class="side-nav" v-bind:[navExpandedAttr]="''">
4-
<div class="logo" v-on:click="triggerNavExpand">
2+
<div class="body" :style="{'height': appHeight + 'px'}">
3+
<div class="side-nav" :class="navExpandedAni ?'-side-nav-expand' :'-side-nav-expand-reverse'" :[navExpandedAttr]="''">
4+
<div class="logo" v-on:click="toggleNavExpand">
55
<img alt="Vue logo" src="@/assets/logo.svg" width="100" height="100" />
66
</div>
77
<nav>
8-
<RouterLink to="/">
9-
<span class="nav-text">Index</span>
10-
</RouterLink>
11-
<RouterLink to="/about">
12-
<span class="nav-text">About</span>
13-
</RouterLink>
8+
<RouterLink to="/">Index</RouterLink>
9+
<div v-for="item in accounts">
10+
<span class='nav-account'>{{item.email}}</span>
11+
<RouterLink :to="`/${item.email}/`">All</RouterLink>
12+
<RouterLink v-for="box in item.boxes" :to="`/${item.email}/${box}`">{{box}}</RouterLink>
13+
</div>
1414
</nav>
1515
</div>
1616
<div class="content">
@@ -19,36 +19,33 @@
1919
</div>
2020
</template>
2121

22-
<script>
22+
<script setup>
23+
import { ref, computed } from 'vue'
2324
import { RouterLink, RouterView } from 'vue-router'
24-
export default {
25-
data(){
26-
return {
27-
navExpanded: true,
28-
}
29-
},
30-
computed: {
31-
appHeight: {
32-
get(){
33-
return window.innerHeight;
34-
}
35-
},
36-
navExpandedAttr: {
37-
get(){
38-
return this.navExpanded ?'expanded-nav' :null;
39-
}
40-
}
41-
},
42-
methods: {
43-
triggerNavExpand(){
44-
this.navExpanded = !this.navExpanded;
45-
}
46-
},
47-
components: {
48-
RouterLink,
49-
RouterView
25+
26+
const navExpanded = ref(true)
27+
const navExpandedAni = ref(true)
28+
29+
const accounts = ref([
30+
{'email': 'user@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash']},
31+
])
32+
33+
const appHeight = computed(()=>window.innerHeight)
34+
const navExpandedAttr = computed(()=>navExpanded.value ?'expanded-nav' :null)
35+
36+
var toggleNavExpanding = false;
37+
function toggleNavExpand(){
38+
if(toggleNavExpanding){
39+
return;
5040
}
41+
toggleNavExpanding = true;
42+
navExpandedAni.value = !navExpandedAni.value;
43+
setTimeout(()=>{
44+
navExpanded.value = navExpandedAni.value;
45+
toggleNavExpanding = false;
46+
}, 350);
5147
}
48+
5249
</script>
5350

5451
<style scoped>
@@ -58,27 +55,54 @@ export default {
5855
}
5956
6057
.side-nav {
61-
width: 3rem;
58+
width: 3.8rem;
6259
padding: 0.5rem 0;
6360
margin-right: 1rem;
64-
box-shadow: 1px;
6561
display: flex;
6662
flex-direction: column;
6763
align-items: flex-start;
64+
overflow: hidden;
65+
border-right: 1px solid var(--color-border);
6866
}
6967
7068
.side-nav[expanded-nav] {
71-
/*width: fit-content;*/
72-
width: 12rem;
73-
box-shadow: #000 0px 0px 20px 0px;
69+
width: 15rem;
70+
}
71+
72+
.-side-nav-expand {
73+
animation: -side-nav-expand 0.5s ease-out;
74+
}
75+
76+
.-side-nav-expand-reverse {
77+
animation: -side-nav-expand-reverse 0.4s;
78+
}
79+
80+
@keyframes -side-nav-expand {
81+
from {
82+
width: 3.8rem;
83+
}
84+
to {
85+
width: 15rem;
86+
}
7487
}
7588
76-
.logo {
89+
@keyframes -side-nav-expand-reverse {
90+
from {
91+
width: 15rem;
92+
}
93+
to {
94+
width: 3.8rem;
95+
}
96+
}
97+
98+
99+
.side-nav .logo {
77100
box-sizing: content-box;
78101
display: block;
79102
width: 2rem;
80103
height: 2rem;
81-
padding: 0.5rem 0.7rem 0.5rem 0.8rem;
104+
padding: 0.5rem 0.7rem 0.5rem calc(100% - 3rem);
105+
margin-right: 0.2rem;
82106
border: 1px solid var(--color-border);
83107
border-left: none;
84108
border-radius: 0 1.5rem 1.5rem 0;
@@ -97,30 +121,36 @@ export default {
97121
flex-direction: column;
98122
}
99123
124+
.nav-account {
125+
display: block;
126+
height: 1.7rem;
127+
padding: 0 0.6rem;
128+
font-size: 1rem;
129+
font-weight: 300;
130+
overflow-x: hidden;
131+
text-overflow: ellipsis;
132+
}
133+
100134
.side-nav nav a {
101135
display: block;
102136
height: 1.7rem;
103137
padding: 0 0.5rem;
104-
margin-left: 0.75rem;
138+
margin-left: 0.5rem;
105139
border-left: 1px solid var(--color-border);
106-
}
107-
108-
.side-nav nav .nav-text {
109-
font-size: 1.1rem;
110-
font-weight: 700;
111-
}
112-
113-
.side-nav:not([expanded-nav]) nav .nav-text {
114-
display: none;
140+
display: block;
141+
font-size: 1rem;
142+
font-weight: 450;
143+
overflow-x: hidden;
144+
text-overflow: ellipsis;
145+
text-decoration: none;
146+
color: var(--color-text);
147+
transition: 0.4s;
115148
}
116149
117150
.side-nav nav a.router-link-exact-active {
118151
padding-left: 0.7rem;
119-
}
120-
121-
.side-nav nav a.router-link-exact-active .nav-text {
122-
color: var(--color-text);
123-
font-weight: 900;
152+
color: hsla(160, 100%, 37%, 1);
153+
font-weight: 600;
124154
}
125155
126156
.side-nav nav a.router-link-exact-active:hover {

‎src/components/Index.vue

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@
99
</div>
1010
</template>
1111

12-
<script>
13-
export default {
14-
props: ['msg']
15-
}
12+
<script setup>
13+
defineProps(['msg'])
1614
</script>
1715

1816
<style scoped>

‎src/components/MailBox.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="mailbox">
3+
<h2>{{account}}</h2>
4+
<h3 v-if="!isentire">- {{box}}:</h3>
5+
<table></table>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
import { ref, computed } from 'vue'
11+
const props = defineProps(['account', 'box'])
12+
13+
const isentire = computed(()=>!props.box)
14+
15+
16+
</script>
17+
18+
<style scoped>
19+
20+
</style>

‎src/router/index.js

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,28 @@
11

2-
import { createRouter, createWebHistory } from 'vue-router'
2+
import { createRouter, createWebHashHistory } from 'vue-router'
33

4-
import IndexView from '../views/IndexView.vue'
4+
import Index from '@/components/Index.vue'
5+
import MailBox from '@/components/MailBox.vue'
56

67
const router = createRouter({
7-
history: createWebHistory(import.meta.env.BASE_URL),
8+
history: createWebHashHistory(),
89
routes: [
910
{
1011
path: '/',
1112
name: 'index',
12-
component: IndexView
13+
component: Index,
1314
},
1415
{
15-
path: '/about',
16-
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.
20-
component: () => import('../views/AboutView.vue')
16+
path: '/:account/',
17+
name: 'mailbox-all',
18+
component: MailBox,
19+
props: true,
20+
},
21+
{
22+
path: '/:account/:box',
23+
name: 'mailbox',
24+
component: MailBox,
25+
props: true,
2126
}
2227
]
2328
})

‎src/views/AboutView.vue

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

‎src/views/IndexView.vue

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

0 commit comments

Comments
 (0)