NavMenu.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div>
  3. <nav class="navbar navbar-expand navbar-light navbar-laravel shadow-none border-bottom sticky-top py-1">
  4. <div class="container">
  5. <a class="navbar-brand d-flex align-items-center" href="/" title="Logo">
  6. <img src="/img/pixelfed-icon-color.svg" height="30px" class="px-2" loading="eager">
  7. <span class="font-weight-bold mb-0 d-none d-sm-block" style="font-size:20px;">{{ config.site.name }}</span>
  8. </a>
  9. <div v-if="loaded && loggedIn" class="collapse navbar-collapse">
  10. <ul class="navbar-nav d-none d-md-block mx-auto">
  11. <form class="form-inline search-bar" method="get" action="/i/results">
  12. <input class="form-control form-control-sm" name="q" placeholder="Search ..." aria-label="search" autocomplete="off" required style="line-height: 0.6;width:200px">
  13. </form>
  14. </ul>
  15. <div class="ml-auto">
  16. <ul class="navbar-nav">
  17. <div class="d-none d-md-block">
  18. <li class="nav-item px-md-2">
  19. <a class="nav-link font-weight-bold text-muted" href="/discover" title="Discover" data-toggle="tooltip" data-placement="bottom">
  20. <i class="far fa-compass fa-lg"></i>
  21. </a>
  22. </li>
  23. </div>
  24. <div class="d-none d-md-block">
  25. <li class="nav-item px-md-2">
  26. <a class="nav-link font-weight-bold text-muted" href="/account/activity" title="Notifications" data-toggle="tooltip" data-placement="bottom">
  27. <span class="fa-layers fa-fw">
  28. <i class="far fa-bell fa-lg"></i>
  29. <span class="fa-layers-counter mr-n2 mt-n1" style="background:Tomato"></span>
  30. </span>
  31. </a>
  32. </li>
  33. </div>
  34. <li class="nav-item dropdown ml-2">
  35. <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="User Menu" data-placement="bottom">
  36. <i class="far fa-user fa-lg text-muted"></i>
  37. </a>
  38. <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
  39. <div class="dropdown-item font-weight-bold cursor-pointer" onclick="App.util.compose.post()">
  40. <span class="fas fa-plus-square pr-2 text-lighter"></span>
  41. New Post
  42. </div>
  43. <div class="dropdown-divider"></div>
  44. <a class="dropdown-item font-weight-bold" href="/">
  45. <span class="fas fa-home pr-2 text-lighter"></span>
  46. Home
  47. </a>
  48. <a class="dropdown-item font-weight-bold" href="/timeline/public">
  49. <span class="fas fa-stream pr-2 text-lighter"></span>
  50. Local
  51. </a>
  52. <div class="dropdown-divider"></div>
  53. <a class="dropdown-item font-weight-bold" href="/i/me">
  54. <span class="far fa-user pr-2 text-lighter"></span>
  55. My Profile
  56. </a>
  57. <a class="d-block d-md-none dropdown-item font-weight-bold" href="/discover">
  58. <span class="far fa-compass pr-2 text-lighter"></span>
  59. Discover
  60. </a>
  61. <a class="dropdown-item font-weight-bold" href="/notifications">
  62. <span class="far fa-bell pr-2 text-lighter"></span>
  63. Notifications
  64. </a>
  65. <a class="dropdown-item font-weight-bold" href="/settings/home">
  66. <span class="fas fa-cog pr-2 text-lighter"></span>
  67. Settings
  68. </a>
  69. <div v-if="curUser.is_admin">
  70. <div class="dropdown-divider"></div>
  71. <a class="dropdown-item font-weight-bold" href="/i/admin/dashboard">
  72. <span class="fas fa-shield-alt fa-sm pr-2 text-lighter"></span>
  73. Admin
  74. </a>
  75. </div>
  76. <div class="dropdown-divider"></div>
  77. <a class="dropdown-item font-weight-bold" href="/logout" @click="logout">
  78. <span class="fas fa-sign-out-alt pr-2"></span>
  79. Logout
  80. </a>
  81. </div>
  82. </li>
  83. </ul>
  84. </div>
  85. </div>
  86. <div v-if="loaded && !loggedIn" class="collapse navbar-collapse">
  87. <ul class="navbar-nav ml-auto">
  88. <li>
  89. <a class="nav-link font-weight-bold text-primary" href="/login" title="Login">
  90. Login
  91. </a>
  92. </li>
  93. <li v-if="config.open_registration">
  94. <a class="nav-link font-weight-bold" href="/register" title="Register">
  95. Register
  96. </a>
  97. </li>
  98. </ul>
  99. </div>
  100. </div>
  101. </nav>
  102. </div>
  103. </template>
  104. <style type="text/css" scoped>
  105. .fa-layers-counter, .fa-layers-text {
  106. display: inline-block;
  107. position: absolute;
  108. text-align: center;
  109. }
  110. .fa-layers .far {
  111. bottom: 0;
  112. left: 0;
  113. margin: auto;
  114. position: absolute;
  115. right: 0;
  116. top: 0;
  117. }
  118. .fa-fw {
  119. text-align: center;
  120. width: 1.25em;
  121. }
  122. .fa-layers {
  123. display: inline-block;
  124. height: 1em;
  125. position: relative;
  126. text-align: center;
  127. vertical-align: -.125em;
  128. width: 1em;
  129. }
  130. .fa-layers-counter {
  131. background-color: #ff253a;
  132. border-radius: 1em;
  133. -webkit-box-sizing: border-box;
  134. box-sizing: border-box;
  135. color: #fff;
  136. height: 1.5em;
  137. line-height: 1;
  138. max-width: 5em;
  139. min-width: 1.5em;
  140. overflow: hidden;
  141. padding: .25em;
  142. right: 0;
  143. text-overflow: ellipsis;
  144. top: 0;
  145. -webkit-transform: scale(.25);
  146. transform: scale(.25);
  147. -webkit-transform-origin: top right;
  148. transform-origin: top right;
  149. }
  150. </style>
  151. <script type="text/javascript">
  152. export default {
  153. data() {
  154. return {
  155. config: window.App.config,
  156. curUser: {},
  157. loggedIn: false,
  158. loaded: false
  159. }
  160. },
  161. mounted() {
  162. this.timeout();
  163. },
  164. methods: {
  165. logout() {
  166. axios.post('/logout')
  167. .then(res => {
  168. window.location.href = '/';
  169. });
  170. },
  171. timeout() {
  172. let self = this;
  173. setTimeout(function() {
  174. self.curUser = window._sharedData.curUser;
  175. self.loggedIn = self.curUser.hasOwnProperty('username');
  176. self.loaded = true;
  177. }, 1000);
  178. }
  179. }
  180. }
  181. </script>