style: Add lock indicator for Password protected pages

EnAccess · Mar 15, 2024 · d43bd11 · d43bd11
1 parent 2e3ea6a
commit d43bd11
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/Website/ui/src/modules/Sidebar/SideBar.vue b/Website/ui/src/modules/Sidebar/SideBar.vue
@@ -33,6 +33,13 @@
                         <span class="md-list-item-text c-white">
                             {{ translateItem(menu.name) }}
                         </span>
+                        <md-icon
+                            v-if="protectedPages.includes(menu.url_slug)"
+                            class="c-white password-protected-lock-icon"
+                        >
+                            lock
+                        </md-icon>
+
                         <md-list
                             slot="md-expand"
                             v-if="menu.sub_menu_items.length !== 0"
@@ -48,6 +55,16 @@
                                     <span class="md-list-item-text c-white">
                                         {{ $tc('menu.subMenu.' + sub.name) }}
                                     </span>
+                                    <md-icon
+                                        v-if="
+                                            protectedPages.includes(
+                                                sub.url_slug,
+                                            )
+                                        "
+                                        class="c-white password-protected-lock-icon"
+                                    >
+                                        lock
+                                    </md-icon>
                                 </md-list-item>
                             </router-link>
                         </md-list>
@@ -60,9 +77,12 @@
 <script>
 import { translateItem } from '@/Helpers/TranslateItem'
 import { EventBus } from '@/shared/eventbus'
+import PasswordProtection from '@/shared/PasswordProtection'
 
 export default {
     name: 'SideBar',
+    mixins: [PasswordProtection],
+
     data() {
         return {
             show_extender: false,
@@ -232,6 +252,10 @@ export default {
     height: 25px !important;
 }
 
+.md-icon.password-protected-lock-icon {
+    font-size: 16px !important;
+}
+
 .sub-menu {
     width: 100% !important;
 }