ui: Sidebar stylistic improvements (#60)

* ui: Improve SideBar styling * style: Add lock indicator for Password protected pages
EnAccess · Mar 20, 2024 · e4b9109 · e4b9109
1 parent 16f4586
commit e4b9109
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/Website/ui/src/modules/Sidebar/SideBar.vue b/Website/ui/src/modules/Sidebar/SideBar.vue
@@ -33,28 +33,40 @@
                         <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"
                             class="no-bg"
                         >
-                            <md-list-item
-                                v-for="(sub, index) in menu.sub_menu_items"
-                                :key="index"
+                            <router-link
+                                v-for="sub in menu.sub_menu_items"
+                                :to="route(sub.url_slug)"
+                                :key="sub.url_slug"
+                                class="sub-menu"
                             >
-                                <router-link
-                                    :to="route(sub.url_slug)"
-                                    class="sub-menu"
-                                >
-                                    <md-list-item class="md-inset c-white">
-                                        <span class="md-list-item-text c-white">
-                                            {{
-                                                $tc('menu.subMenu.' + sub.name)
-                                            }}
-                                        </span>
-                                    </md-list-item>
-                                </router-link>
-                            </md-list-item>
+                                <md-list-item>
+                                    <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>
                     </md-list-item>
                 </component>
@@ -65,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,
@@ -209,19 +224,18 @@ export default {
 .exact-active {
     background: #6b6a6a !important;
     position: relative;
-    left: -15px;
-    width: calc(100% + 30px) !important;
+    width: calc(100%) !important;
+    border-right: 5px solid #9d302a;
 }
 
-/*  .md-list-item-text {
-      color: #f5e8e8 !important;
-
-  }*/
-
 .no-bg {
     background-color: transparent !important;
 }
 
+.md-icon.md-theme-default.md-icon-image svg {
+    fill: #f5e8e8 !important;
+}
+
 .c-white {
     color: #f5e8e8 !important;
 }
@@ -238,6 +252,10 @@ export default {
     height: 25px !important;
 }
 
+.md-icon.password-protected-lock-icon {
+    font-size: 16px !important;
+}
+
 .sub-menu {
     width: 100% !important;
 }

diff --git a/Website/ui/src/modules/Ticket/CategoryManagement.vue b/Website/ui/src/modules/Ticket/CategoryManagement.vue
@@ -240,10 +240,6 @@ export default {
 </script>
 
 <style lang="scss">
-.md-list-item-text {
-    display: contents !important;
-}
-
 .colored-box {
     width: 22px;
     height: 22px;