diff options
Diffstat (limited to 'src/components/nav_panel/nav_panel.vue')
| -rw-r--r-- | src/components/nav_panel/nav_panel.vue | 162 |
1 files changed, 67 insertions, 95 deletions
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 9322e233..11260818 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -1,7 +1,27 @@ <template> <div class="NavPanel"> <div class="panel panel-default"> - <ul> + <div + v-if="!forceExpand" + class="panel-heading nav-panel-heading" + > + <NavigationPins :limit="6" /> + <div class="spacer" /> + <button + class="button-unstyled" + @click="toggleCollapse" + > + <FAIcon + class="timelines-chevron" + fixed-width + :icon="collapsed ? 'chevron-down' : 'chevron-up'" + /> + </button> + </div> + <ul + v-if="!collapsed || forceExpand" + class="panel-body" + > <li v-if="currentUser || !privateMode"> <button class="button-unstyled menu-item" @@ -22,114 +42,66 @@ v-show="showTimelines" class="timelines-background" > - <TimelineMenuContent class="timelines" /> + <ul class="timelines"> + <NavigationEntry + v-for="item in timelinesItems" + :key="item.name" + :show-pin="editMode" + :item="item" + /> + </ul> </div> </li> - <li v-if="currentUser && listsNavigation"> + <li v-if="currentUser"> <button class="button-unstyled menu-item" @click="toggleLists" > + <FAIcon + fixed-width + class="fa-scale-110" + icon="list" + />{{ $t("nav.lists") }} + <FAIcon + class="timelines-chevron" + fixed-width + :icon="showLists ? 'chevron-up' : 'chevron-down'" + /> <router-link :to="{ name: 'lists' }" @click.stop > <FAIcon + class="timelines-chevron" fixed-width - class="fa-scale-110" - icon="list" - />{{ $t("nav.lists") }} + icon="wrench" + /> </router-link> - <FAIcon - class="timelines-chevron" - fixed-width - :icon="showLists ? 'chevron-up' : 'chevron-down'" - /> </button> <div v-show="showLists" class="timelines-background" > - <ListsMenuContent class="timelines" /> + <ListsMenuContent + :show-pin="editMode || forceEditMode" + class="timelines" + /> </div> </li> - <li v-if="currentUser && !listsNavigation"> - <router-link - :to="{ name: 'lists' }" - @click.stop - > - <button - class="button-unstyled menu-item" - @click="toggleLists" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="list" - />{{ $t("nav.lists") }} - </button> - </router-link> - </li> - <li v-if="currentUser"> - <router-link - class="menu-item" - :to="{ name: 'interactions', params: { username: currentUser.screen_name } }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="bell" - />{{ $t("nav.interactions") }} - </router-link> - </li> - <li v-if="currentUser && pleromaChatMessagesAvailable"> - <router-link - class="menu-item" - :to="{ name: 'chats', params: { username: currentUser.screen_name } }" - > - <div - v-if="unreadChatCount" - class="badge badge-notification" - > - {{ unreadChatCount }} - </div> - <FAIcon - fixed-width - class="fa-scale-110" - icon="comments" - />{{ $t("nav.chats") }} - </router-link> - </li> - <li v-if="currentUser && currentUser.locked"> - <router-link - class="menu-item" - :to="{ name: 'friend-requests' }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="user-plus" - />{{ $t("nav.friend_requests") }} - <span - v-if="followRequestCount > 0" - class="badge badge-notification" - > - {{ followRequestCount }} - </span> - </router-link> - </li> - <li> - <router-link - class="menu-item" - :to="{ name: 'about' }" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="info-circle" - />{{ $t("nav.about") }} - </router-link> - </li> + <NavigationEntry + v-for="item in rootItems" + :key="item.name" + :show-pin="editMode || forceEditMode" + :item="item" + /> + <div + v-if="!forceEditMode && currentUser" + class="panel-footer" + > + <Checkbox v-model="editMode"> + {{ $t('nav.edit_pinned') }} + </Checkbox> + </div> </ul> </div> </div> @@ -220,6 +192,7 @@ .timelines-chevron { margin-left: 0.8em; + margin-right: 0.8em; font-size: 1.1em; } @@ -237,14 +210,13 @@ background-color: var(--bg, $fallback--bg); } - .fa-scale-110 { - margin-right: 0.8em; + .nav-panel-heading { + // breaks without a unit + --panel-heading-height-padding: 0em; } - .badge { - position: absolute; - right: 0.6rem; - top: 1.25em; + .fa-scale-110 { + margin-right: 0.8em; } } </style> |