Fix toggle state, adjust icon styles

galaxyproject · May 21, 2024 · 25c0f04 · 25c0f04
1 parent bb78cd5
commit 25c0f04
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/client/src/components/Masthead/Masthead.vue b/client/src/components/Masthead/Masthead.vue
@@ -126,6 +126,12 @@ onMounted(() => {
                 @click="openUrl('/about')" />
             <QuotaMeter />
             <MastheadItem
+                v-if="isAnonymous"
+                id="user"
+                title="Log in or Register"
+                @click="openUrl('/login/start')" />
+            <MastheadItem
+                v-else
                 id="user"
                 title="Logout"
                 icon="fa-sign-out-alt"
@@ -166,15 +172,16 @@ onMounted(() => {
                 cursor: pointer;
                 text-decoration: none;
                 color: var(--masthead-text-color);
+                margin-right: 0.25rem;
                 &:hover {
                     color: var(--masthead-text-hover);
                 }
                 &.nav-icon {
-                    font-size: 1em;
+                    font-size: 1.2em;
                     .nav-note {
                         position: absolute;
-                        left: 1.4rem;
-                        top: 1.4rem;
+                        left: 1.6rem;
+                        top: 1.6rem;
                         font-size: 0.4rem;
                         font-weight: bold;
                     }

diff --git a/client/src/components/Masthead/MastheadItem.vue b/client/src/components/Masthead/MastheadItem.vue
@@ -44,7 +44,7 @@ const props = defineProps({
         v-b-tooltip.hover.bottom
         :href="withPrefix(url)"
         :target="target || '_parent'"
-        link-classes="nav-icon"
+        :link-classes="{ 'nav-icon': !!icon, 'toggle': toggle }"
         :title="tooltip"
         @click="$emit('click')">
         <template v-if="icon">