summaryrefslogtreecommitdiff
path: root/src/components/Navigation.vue
diff options
context:
space:
mode:
authorgumi <git@gumi.ca>2019-07-24 22:35:39 -0400
committergumi <git@gumi.ca>2019-07-24 22:35:39 -0400
commit4968f37ef210694ede99eaecbae2042dc20e921f (patch)
tree6aaee2c13eca2fd23b80131cbc84ccdebf1b3425 /src/components/Navigation.vue
parentec4f56bc64d19ade61f9796b81a517180374d161 (diff)
downloadwebsite-4968f37ef210694ede99eaecbae2042dc20e921f.tar.gz
website-4968f37ef210694ede99eaecbae2042dc20e921f.tar.bz2
website-4968f37ef210694ede99eaecbae2042dc20e921f.tar.xz
website-4968f37ef210694ede99eaecbae2042dc20e921f.zip
add hamburger menu link for small viewports
Diffstat (limited to 'src/components/Navigation.vue')
-rw-r--r--src/components/Navigation.vue63
1 files changed, 45 insertions, 18 deletions
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index 0274f02..7527999 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -1,5 +1,6 @@
<template>
- <nav class="nav">
+ <nav class="nav" id="nav">
+ <a href="#nav" class="hamburger"></a>
<ul>
<li><router-link :class="{ 'custom-active': isHome }" :to="{ name: 'home' }">Home</router-link></li>
<li><router-link :to="{ name: 'registration' }">Create Account</router-link></li>
@@ -10,7 +11,6 @@
<li><a href="https://wiki.themanaworld.org/">Wiki</a></li>
<li><a href="https://forums.themanaworld.org/">Forums</a></li>
</ul>
- <!-- TODO: we want a server status component: https://api.themanaworld.org/api/tmwa/server -->
<div class="server">
<span>Server Status</span>
<ServerStatus class="status"/>
@@ -36,24 +36,16 @@
padding: 15px;
font-size: 14px;
- & span {
- text-align: center;
- display: block;
- padding: 5px;
- border-bottom: solid 1px #2f2e32;
- }
-
- & a, & a:visited {
- color: #2f2e32;
+ & .hamburger {
+ position: absolute;
+ top: 0.4vw;
+ right: 2vw;
+ font-size: 8vw;
text-decoration: none;
- display: block;
- border: solid 1px #CBA083;
- padding: 1ch;
+ color: gray(50);
- &:hover, &.router-link-exact-active, &.custom-active {
- background: rgba(255,255,255,0.4);
- border: solid 1px #2f2e32;
- font-weight: bold;
+ &::before {
+ content: "☰";
}
}
@@ -65,6 +57,27 @@
border: solid 1px #2f2e32;
list-style: none;
margin-bottom: 13px;
+
+ & span {
+ text-align: center;
+ display: block;
+ padding: 5px;
+ border-bottom: solid 1px #2f2e32;
+ }
+
+ & a, & a:visited {
+ color: #2f2e32;
+ text-decoration: none;
+ display: block;
+ border: solid 1px #CBA083;
+ padding: 1ch;
+
+ &:hover, &.router-link-exact-active, &.custom-active {
+ background: rgba(255,255,255,0.4);
+ border: solid 1px #2f2e32;
+ font-weight: bold;
+ }
+ }
}
& ul li {
@@ -107,6 +120,20 @@
@media (min-width: 1100px) {
.nav {
border-radius: 0 15px 15px 0;
+
+ & .hamburger {
+ display: none;
+ }
+ }
+}
+
+@media (min-width: 460px) {
+ .nav {
+ & .hamburger {
+ top: 1vw;
+ right: 2vw;
+ font-size: calc(1rem + 3vw);
+ }
}
}
</style>