diff options
| author | Zephyrrus <[email protected]> | 2020-06-29 17:01:38 +0300 |
|---|---|---|
| committer | Zephyrrus <[email protected]> | 2020-06-29 17:01:38 +0300 |
| commit | 0a50ef771eb870f18b0cd08f579dba1017d73858 (patch) | |
| tree | 5fb00f3b6517502e75a5237b107cc46928d0df92 | |
| parent | feat: add logout link if logged in (diff) | |
| download | host.fuwn.me-0a50ef771eb870f18b0cd08f579dba1017d73858.tar.xz host.fuwn.me-0a50ef771eb870f18b0cd08f579dba1017d73858.zip | |
fix: change navbar to buefy navbar for mobile support
| -rw-r--r-- | src/site/assets/styles/_colors.scss | 8 | ||||
| -rw-r--r-- | src/site/components/navbar/Navbar.vue | 45 |
2 files changed, 31 insertions, 22 deletions
diff --git a/src/site/assets/styles/_colors.scss b/src/site/assets/styles/_colors.scss index 6e40102..78d6f99 100644 --- a/src/site/assets/styles/_colors.scss +++ b/src/site/assets/styles/_colors.scss @@ -9,11 +9,19 @@ $background: #1e2430; $backgroundAccent: #20222b; $backgroundLight1: #f5f6f8; +// customize navbar +$navbar-background-color: $backgroundAccent; +$navbar-item-color: #f5f6f8; + + + // $defaultTextColor: #4a4a4a; $defaultTextColor: rgb(236, 239, 244); $textColor: #c7ccd8; $textColorHighlight: white; +$input-hover-color: $textColor; + $basePink: #ff015b; $basePinkHover: rgb(196, 4, 71); $baseBlue: #30A9ED; diff --git a/src/site/components/navbar/Navbar.vue b/src/site/components/navbar/Navbar.vue index 5499120..528ed93 100644 --- a/src/site/components/navbar/Navbar.vue +++ b/src/site/components/navbar/Navbar.vue @@ -1,66 +1,67 @@ <template> - <nav :class="{ isWhite }" - class="navbar is-transparent"> - <div class="navbar-brand"> - <a role="button" - class="navbar-burger burger" - aria-label="menu" - aria-expanded="false" - data-target="navbarBasicExample"> - <span aria-hidden="true" /> - <span aria-hidden="true" /> - <span aria-hidden="true" /> - </a> - </div> - <div class="navbar-menu"> - <div class="navbar-end"> + <b-navbar :class="{ isWhite }" + transparent> + <template slot="end"> + <b-navbar-item tag="div"> <router-link to="/" class="navbar-item no-active" exact> Home </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/" class="navbar-item no-active" exact> Docs </router-link> - <template v-if="loggedIn"> + </b-navbar-item> + <template v-if="loggedIn"> + <b-navbar-item tag="div"> <router-link to="/dashboard" class="navbar-item no-active" exact> Uploads </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/dashboard/albums" class="navbar-item no-active" exact> Albums </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <router-link to="/dashboard/account" class="navbar-item no-active" exact> Account </router-link> + </b-navbar-item> + <b-navbar-item tag="div"> <a class="navbar-item" @click="logOut"> Logout </a> - </template> - <template v-else> + </b-navbar-item> + </template> + <template v-else> + <b-navbar-item tag="div"> <router-link class="navbar-item" to="/login"> Login </router-link> - </template> - </div> - </div> - </nav> + </b-navbar-item> + </template> + </template> + </b-navbar> </template> <script> |