Ghink/omm-front
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

fix side-nav

Browse Source
This commit is contained in:
zyxkad 2022-08-23 15:08:22 -06:00
parent e72b1540a5
commit 87ac7062b8
No known key found for this signature in database
GPG Key ID: 75D46E883711CD87
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -3,8 +3,8 @@
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build --base=/W/", "build": "vite build",
"preview": "vite preview --port 4173" "preview": "vite preview --port 13280"
}, },
"dependencies": { "dependencies": {
"vue": "^3.2.37", "vue": "^3.2.37",

26
src/App.vue
View File

@ -29,7 +29,12 @@ const navExpanded = ref(!isMobile)
const navExpandedAni = ref(!isMobile) const navExpandedAni = ref(!isMobile)
const accounts = ref([ const accounts = ref([
{'email': 'user@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash']}, {'email': 'user1@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash']},
{'email': 'user2@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash']},
{'email': 'user3@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash', 'Tag1']},
{'email': 'user4@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash', 'Tag1', 'Tag2']},
{'email': 'user5@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash', 'Tag3']},
{'email': 'user6@example.com', 'boxes': ['Inbox', 'Sent', 'Junk', 'Trash', 'Tag4']},
]) ])
const appHeight = computed(()=>window.innerHeight) const appHeight = computed(()=>window.innerHeight)
@ -45,7 +50,7 @@ function toggleNavExpand(){
setTimeout(()=>{ setTimeout(()=>{
navExpanded.value = navExpandedAni.value; navExpanded.value = navExpandedAni.value;
toggleNavExpanding = false; toggleNavExpanding = false;
}, 350); }, 400);
} }
</script> </script>
@ -80,21 +85,13 @@ function toggleNavExpand(){
} }
@keyframes -side-nav-expand { @keyframes -side-nav-expand {
from { from { width: 3.8rem; }
width: 3.8rem; to { width: 15rem; }
}
to {
width: 15rem;
}
} }
@keyframes -side-nav-expand-reverse { @keyframes -side-nav-expand-reverse {
from { from { width: 15rem; }
width: 15rem; to { width: 3.8rem; }
}
to {
width: 3.8rem;
}
} }
@ -121,6 +118,7 @@ function toggleNavExpand(){
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto;
} }
.nav-account { .nav-account {