Hide username and alert popover when loading

floriandejonckheere · Dec 10, 2023 · cb6d2b9 · cb6d2b9
1 parent 52cae60
commit cb6d2b9
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/layouts/navigation.tsx b/src/layouts/navigation.tsx
@@ -37,22 +37,24 @@ export default function Navigation(): ReactElement {
             className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
           >
             <div className="flex flex-col gap-10 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
-              <EnergyAlertsPopover />
               {isSuccess && (
-                <Link
-                  to="/settings"
-                  className="flex items-center justify-between gap-4 font-medium text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-100"
-                >
-                  <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-800 font-semibold text-white leading-none dark:bg-slate-200 dark:text-gray-800">
-                    {data.username.charAt(0).toUpperCase()}
-                  </span>
-                  <div className="flex flex-col">
-                    <span>{data.username}</span>
-                    <span className="text-gray-400 dark:text-slate-500">
-                      {data.email}
+                <>
+                  <EnergyAlertsPopover />
+                  <Link
+                    to="/settings"
+                    className="flex items-center justify-between gap-4 font-medium text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-100"
+                  >
+                    <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-800 font-semibold text-white leading-none dark:bg-slate-200 dark:text-gray-800">
+                      {data.username.charAt(0).toUpperCase()}
                     </span>
-                  </div>
-                </Link>
+                    <div className="flex flex-col">
+                      <span>{data.username}</span>
+                      <span className="text-gray-400 dark:text-slate-500">
+                        {data.email}
+                      </span>
+                    </div>
+                  </Link>
+                </>
               )}
               <DarkModeToggle />
               <a