@mundogamernetwork/shared-ui 1.16.5 → 1.16.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -60,9 +60,35 @@ const handleToggleOnline = () => {
|
|
|
60
60
|
<template>
|
|
61
61
|
<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
|
|
62
62
|
<div ref="wrapper" class="ui-config-user__content">
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
<!--
|
|
64
|
+
This MUST render a different root tag than MgLoginRegisterMenu's
|
|
65
|
+
own root (a <div>) — a plain :key difference is NOT enough here.
|
|
66
|
+
signedIn always starts false and flips true only after the async
|
|
67
|
+
/auth/user check resolves (SSR never has the session, so every
|
|
68
|
+
load — not just a race — renders guest first, then the real
|
|
69
|
+
state client-side). When both branches are <div>s, whatever
|
|
70
|
+
code path handles that guest→signed-in swap (traced to Vue's
|
|
71
|
+
hydration-mismatch recovery, not the plain runtime v-if/v-else
|
|
72
|
+
patch — a distinct :key on each branch demonstrably did NOT
|
|
73
|
+
stop it) reuses the existing DOM node instead of replacing it:
|
|
74
|
+
the node keeps MgLoginRegisterMenu's own class
|
|
75
|
+
("mg-login-register") and scope attribute while only its
|
|
76
|
+
children get patched to the signed-in markup. Result: the
|
|
77
|
+
signed-in content renders styled by the GUEST component's CSS
|
|
78
|
+
(340px guest width instead of 240px, and .username/
|
|
79
|
+
.btn-primary-outline/.status-toggle never match their real
|
|
80
|
+
".signed-in-menu" ancestor selector, so they fall through to
|
|
81
|
+
unstyled/inherited color instead of var(--active) — text goes
|
|
82
|
+
near-invisible on any host whose global default text color is
|
|
83
|
+
dark, e.g. jobs-frontend's Bootstrap default). A genuinely
|
|
84
|
+
different tag (section, not div) forces a real replace — this
|
|
85
|
+
was verified against a live reproduction, not just reasoned
|
|
86
|
+
about; do not "simplify" this back to <div> without re-testing
|
|
87
|
+
the actual guest→signed-in transition, not just a hard reload.
|
|
88
|
+
-->
|
|
89
|
+
<MgLoginRegisterMenu v-if="!signedIn" key="guest" :dropdown="false" />
|
|
90
|
+
|
|
91
|
+
<section v-else key="signed-in" class="signed-in-menu">
|
|
66
92
|
<div class="row info-row ps-0">
|
|
67
93
|
<div class="col-auto px-3">
|
|
68
94
|
<div v-if="!user?.avatar_url" class="no-avatar-wrapper">
|
|
@@ -130,7 +156,7 @@ const handleToggleOnline = () => {
|
|
|
130
156
|
{{ $t("account_menu.buttons.logout") }}
|
|
131
157
|
</button>
|
|
132
158
|
</div>
|
|
133
|
-
</
|
|
159
|
+
</section>
|
|
134
160
|
</div>
|
|
135
161
|
</div>
|
|
136
162
|
</template>
|