Merge pull request #10690 from growilabs/fix/176797-cannot-create-sidebar-page-from-custom-sidebar

fix: Cannot create `/Sidebar` page from custom sidebar

apps/app/playwright/50-sidebar/access-to-sidebar.spec.ts

@@ -29,9 +29,12 @@ test.describe('Access to sidebar', () => {
   test('Successfully access to custom sidebar', async ({ page }) => {
     await page.getByTestId('grw-sidebar-nav-primary-custom-sidebar').click();
     await expect(page.getByTestId('grw-sidebar-contents')).toBeVisible();
-    await expect(
-      page.locator('.grw-sidebar-content-header > h3').locator('a'),
-    ).toBeVisible();
+
+    // Check if edit_note icon is visible within the button
+    const editNoteIcon = page
+      .locator('.grw-custom-sidebar-content button .material-symbols-outlined')
+      .filter({ hasText: 'edit_note' });
+    await expect(editNoteIcon).toBeVisible();
   });
 
   test('Successfully access to GROWI Docs page', async ({ page }) => {

apps/app/src/client/components/Sidebar/Custom/CustomSidebar.tsx

@@ -19,20 +19,23 @@ const CustomSidebarContent = dynamic(
 export const CustomSidebar = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const { mutate, isLoading } = useSWRxPageByPath('/Sidebar');
+  const { data, mutate, isLoading } = useSWRxPageByPath('/Sidebar');
 
   return (
     <div className="pt-4 pb-3 px-3">
       <div className="grw-sidebar-content-header d-flex">
         <h3 className="fs-6 fw-bold mb-0">
           {t('Custom Sidebar')}
-          {!isLoading && (
-            <Link href="/Sidebar#edit" className="h6 ms-2">
-              <span className="material-symbols-outlined">edit</span>
-            </Link>
-          )}
+          <Link
+            href="/Sidebar#edit"
+            className={`h6 ms-2 ${!isLoading && data != null ? 'visible' : 'invisible'}`}
+          >
+            <span className="material-symbols-outlined">edit</span>
+          </Link>
         </h3>
-        {!isLoading && <SidebarHeaderReloadButton onClick={() => mutate()} />}
+        <span className={`ms-auto ${isLoading ? 'invisible' : ''}`}>
+          <SidebarHeaderReloadButton onClick={() => mutate()} />
+        </span>
       </div>
 
       <Suspense fallback={<DefaultContentSkeleton />}>