From 41a9dc36031b95dae0d6b42bb8712f5bd210b548 Mon Sep 17 00:00:00 2001
From: Ramesh Kumar Chandra
 <31303617+rameshkumarchandra@users.noreply.github.com>
Date: Mon, 12 Feb 2024 19:11:56 +0530
Subject: [PATCH] fix: pages table of content drop down close on click and app
 sidebar expansion by default on big screens (#3629)

---
 .../src/ui/components/content-browser.tsx          | 14 ++++++++++----
 .../src/ui/components/summary-popover.tsx          |  7 +++----
 web/layouts/app-layout/sidebar.tsx                 |  5 ++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx
index 18a50a5a8..97231ea96 100644
--- a/packages/editor/document-editor/src/ui/components/content-browser.tsx
+++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx
@@ -6,10 +6,16 @@ import { scrollSummary } from "src/utils/editor-summary-utils";
 interface ContentBrowserProps {
   editor: Editor;
   markings: IMarking[];
+  setSidePeekVisible?: (sidePeekState: boolean) => void;
 }
 
 export const ContentBrowser = (props: ContentBrowserProps) => {
-  const { editor, markings } = props;
+  const { editor, markings, setSidePeekVisible } = props;
+
+  const handleOnClick = (marking: IMarking) => {
+    scrollSummary(editor, marking);
+    if (setSidePeekVisible) setSidePeekVisible(false);
+  }
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
@@ -18,11 +24,11 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
         {markings.length !== 0 ? (
           markings.map((marking) =>
             marking.level === 1 ? (
-              <HeadingComp onClick={() => scrollSummary(editor, marking)} heading={marking.text} />
+              <HeadingComp onClick={() => handleOnClick(marking)} heading={marking.text} />
             ) : marking.level === 2 ? (
-              <SubheadingComp onClick={() => scrollSummary(editor, marking)} subHeading={marking.text} />
+              <SubheadingComp onClick={() => handleOnClick(marking)} subHeading={marking.text} />
             ) : (
-              <HeadingThreeComp heading={marking.text} onClick={() => scrollSummary(editor, marking)} />
+              <HeadingThreeComp heading={marking.text} onClick={() => handleOnClick(marking)} />
             )
           )
         ) : (
diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
index 12903bb3d..6ad7cad83 100644
--- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx
+++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx
@@ -33,9 +33,8 @@ export const SummaryPopover: React.FC<Props> = (props) => {
       <button
         type="button"
         ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${
-          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
-        }`}
+        className={`grid h-7 w-7 place-items-center rounded ${sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+          }`}
         onClick={() => setSidePeekVisible(!sidePeekVisible)}
       >
         <List className="h-4 w-4" />
@@ -48,7 +47,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
             style={summaryPopoverStyles.popper}
             {...summaryPopoverAttributes.popper}
           >
-            <ContentBrowser editor={editor} markings={markings} />
+            <ContentBrowser setSidePeekVisible={setSidePeekVisible} editor={editor} markings={markings} />
           </div>
         )}
       </div>
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index e211e7884..0ccbf2606 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -12,7 +12,7 @@ import { ProjectSidebarList } from "components/project";
 import { useApplication } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 
-export interface IAppSidebar {}
+export interface IAppSidebar { }
 
 export const AppSidebar: FC<IAppSidebar> = observer(() => {
   // store hooks
@@ -32,6 +32,9 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
       if (window.innerWidth <= 768) {
         themStore.toggleSidebar(true);
       }
+      if (window.innerWidth > 768) {
+        themStore.toggleSidebar(false);
+      }
     };
     handleResize();
     window.addEventListener("resize", handleResize);