Fix dropdown weirdness with view transitions, add view transitions

withstudiocms · Dec 1, 2024 · d148c72 · d148c72
1 parent 0ed4ebd
commit d148c72
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 35 deletions.
diff --git a/packages/studiocms_dashboard/src/components/DashboardPageHeader.astro b/packages/studiocms_dashboard/src/components/DashboardPageHeader.astro
@@ -10,21 +10,21 @@ const t = useTranslations(lang, '@studiocms/dashboard:index');
 ---
 
 <header class="page-header">
-    <div class="page-title-container">
-      <h1 class="page-title">{t("welcome-title")}, <UserName server:defer><Fragment slot='fallback' set:text='User' /></UserName></h1>
-    </div>
-    <div class="page-actions-container">
-        <Button color='primary' variant='flat' as="a" href={'https://chat.studiocms.dev'} target='_blank' rel='noreferrer,noopener'>
-          <Fragment set:html={DiscordLogo} slot='start-content' />
-          {t("title-button:discord")}
-        </Button>
-        <Button color='success' variant='flat'>
-          <Icon name='chat-bubble-oval-left-ellipsis' width={24} height={24} />
-          {t("title-button:feedback")}
-        </Button>
-    </div>
-  </header>
-  <style>
+  <div class="page-title-container">
+    <h1 class="page-title">{t("welcome-title")}, <UserName server:defer><Fragment slot='fallback' set:text='User' /></UserName></h1>
+  </div>
+  <div class="page-actions-container">
+    <Button color='primary' variant='flat' as="a" href={'https://chat.studiocms.dev'} target='_blank' rel='noreferrer,noopener'>
+      <Fragment set:html={DiscordLogo} slot='start-content' />
+      {t("title-button:discord")}
+    </Button>
+    <Button color='success' variant='flat'>
+      <Icon name='chat-bubble-oval-left-ellipsis' width={24} height={24} />
+      {t("title-button:feedback")}
+    </Button>
+  </div>
+</header>
+<style>
   .page-header {
     display: flex;
     flex-direction: row;
@@ -53,4 +53,4 @@ const t = useTranslations(lang, '@studiocms/dashboard:index');
     align-items: center;
     gap: 1rem;
   }
-  </style>
+</style>
diff --git a/packages/studiocms_dashboard/src/components/Layout.astro b/packages/studiocms_dashboard/src/components/Layout.astro
@@ -1,5 +1,6 @@
 ---
-import Config from 'virtual:studiocms/config';
+import { ViewTransitions } from 'astro:transitions';
+// import Config from 'virtual:studiocms/config';
 import { Button } from '@studiocms/ui/components';
 import Icon from '@studiocms/ui/utils/Icon.astro';
 import { BaseHead } from '../components';
@@ -9,11 +10,11 @@ import '@studiocms/ui/css/global.css';
 import '@fontsource-variable/onest/index.css';
 import '../styles/layout.css';
 
-const {
-	dashboardConfig: {
-		developerConfig: { viewTransitionAPI },
-	},
-} = Config;
+// const {
+// 	dashboardConfig: {
+// 		developerConfig: { viewTransitionAPI },
+// 	},
+// } = Config;
 
 type Props = {
 	title: string;
@@ -29,16 +30,17 @@ const { title, description } = Astro.props;
 <html lang="en" data-theme={'dark'}>
   <head>
     <BaseHead title={title} description={description} />
-    {viewTransitionAPI && (
+    <ViewTransitions />
+    <!-- {viewTransitionAPI && (
       <style>
         @view-transition {
           navigation: auto; /* enabled! */
         }
       </style>
-    )}
+    )} -->
   </head>
   <body>
-    <SingleSidebar />
+    <SingleSidebar transition:persist transition:persist-props />
     <main class="p-6 pt-10">
       <Button variant="outlined" color="primary" class="nav-toggle" id={'nav-toggle'}>
         <Icon name="bars-3" height={24} width={24} />

diff --git a/packages/studiocms_dashboard/src/components/SingleSidebar.astro b/packages/studiocms_dashboard/src/components/SingleSidebar.astro
@@ -11,7 +11,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:sidebar');
 const tPath = useTranslatedPath(lang);
 ---
 
-<Sidebar class='sidebar'>
+<Sidebar class='sidebar' transition:persist transition:persist-props>
   <div class="sidebar-links-container">
     <div class="sidebar-header">
       <StudioCMSLogo class={'sidebar-logo'} />
@@ -26,7 +26,7 @@ const tPath = useTranslatedPath(lang);
         {t("content-management-label")}
       </SidebarLink>
     </div>
-    <Admin server:defer>
+    <Admin server:defer transition:persist transition:persist-props>
       <span slot="fallback">Loading</span>
     </Admin>
   </div>
@@ -38,9 +38,10 @@ const tPath = useTranslatedPath(lang);
       { label: t("user-dropdown:logout"), value: 'log-out', icon: "arrow-left-start-on-rectangle" },
     ]}
     offset={8}
+    transition:persist transition:persist-props
   >
     <div class="user-dropdown-trigger-container">
-      <UserAccount server:defer>
+      <UserAccount server:defer transition:persist transition:persist-props>
         <User slot="fallback" name={"Visitor"} description={'Unknown'} />
       </UserAccount>
     </div>
@@ -50,9 +51,24 @@ const tPath = useTranslatedPath(lang);
   import { SingleSidebarHelper } from "@studiocms/ui/components";
   import { DropdownHelper } from "@studiocms/ui/components";
 
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     new SingleSidebarHelper('nav-toggle');
     new DropdownHelper('sidebar-user-dropdown', true);
+
+    const sidebar = document.querySelector<HTMLElement>('.sidebar');
+
+    if (!sidebar) return;
+
+    const sidebarLinks = sidebar.querySelectorAll<HTMLAnchorElement>('a');
+
+    for (const link of sidebarLinks) {
+      link.classList.remove('active');
+
+      console.log(window.location.pathname, new URL(link.href).pathname);
+      if (window.location.pathname === new URL(link.href).pathname) {
+        link.classList.add('active');
+      }
+    }
   });
 </script>
 <style>

diff --git a/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro b/packages/studiocms_ui/src/components/Dropdown/Dropdown.astro
@@ -28,11 +28,12 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
   data-align={align}
   id={`${id}-container`}
   data-trigger={triggerOn}
+  transition:persist transition:persist-props
 >
   <div class="dropdown-toggle" id={`${id}-toggle-btn`}>
     <slot />
   </div>
-  <ul class="dropdown" class:list={[align]} role="listbox" id={`${id}-dropdown`}>
+  <ul class="dropdown above" class:list={[align]} role="listbox" id={`${id}-dropdown`} transition:persist transition:persist-props>
     {options.map(({ value, disabled, color, label, icon }) => (
       <li
         class="dropdown-option"
@@ -69,7 +70,6 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     border-radius: .5rem;
     background-color: hsl(var(--background-step-2));
     overflow: hidden;
-    top: calc(100% + .25rem);
     left: 0;
     z-index: 90;
     min-width: 200px;
@@ -78,8 +78,7 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     height: 0;
     border: none;
     pointer-events: none;
-
-    animation: pop-down .15s ease forwards;
+    user-select: none;
 
     box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
   }
@@ -93,6 +92,7 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     100% {
       scale: 1;
       opacity: 1;
+      user-select: all;
     }
   }
 
@@ -106,6 +106,7 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
       bottom: auto;
       border: 1px solid hsl(var(--border));
       opacity: 1;
+      user-select: all;
     }
 
     99.9999% {
@@ -124,10 +125,15 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
       height: 0;
       border: none;
       pointer-events: none;
+      user-select: none;
     }
   }
 
-  .dropdown.active {
+  .dropdown.initialized {
+    animation: pop-down .15s ease forwards;
+  }
+
+  .dropdown.initialized.active {
     display: flex;
     border: 1px solid hsl(var(--border));
     height: auto;
@@ -136,7 +142,7 @@ const { options, disabled = false, align = 'center', id, triggerOn = 'left', off
     animation: pop-up .15s ease forwards;
   }
 
-  .dropdown.below {
+  .dropdown.initialized.below {
     top: calc(100% + .25rem + var(--offset)) !important;
     bottom: auto;
 

diff --git a/packages/studiocms_ui/src/components/Dropdown/dropdown.ts b/packages/studiocms_ui/src/components/Dropdown/dropdown.ts
@@ -39,6 +39,9 @@ class DropdownHelper {
 		if (fullWidth) this.fullWidth = true;
 
 		window.addEventListener('scroll', this.hide);
+		document.addEventListener('astro:before-preparation', () => {
+			this.dropdown.classList.remove('initialized');
+		});
 
 		this.hideOnClickOutside(this.container);
 
@@ -130,6 +133,10 @@ class DropdownHelper {
 			}
 		}
 
+		if (!this.dropdown.classList.contains('initialized')) {
+			this.dropdown.classList.add('initialized');
+		}
+
 		if (
 			CustomRect.top >= 0 &&
 			CustomRect.left >= 0 &&