Revert "[front] - feat: toggle sidebar (#5211)"

This reverts commit 1ce657c.
dust-tt · May 30, 2024 · c2216a2 · c2216a2
1 parent bf530a4
commit c2216a2
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 65 deletions.
diff --git a/front/components/assistant/conversation/ConversationLayout.tsx b/front/components/assistant/conversation/ConversationLayout.tsx
@@ -79,6 +79,7 @@ export default function ConversationLayout({
         <AppLayout
           subscription={subscription}
           owner={owner}
+          isWideMode={!!conversation}
           pageTitle={
             conversation?.title
               ? `Dust - ${conversation?.title}`

diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -375,8 +375,8 @@ export function FixedAssistantInputBar({
   disableAutoFocus?: boolean;
 }) {
   return (
-    <div className="4xl:px-0 fixed bottom-0 z-20 w-full flex-initial">
-      <div className="max-h-screen max-w-4xl pb-0 sm:pb-8">
+    <div className="4xl:px-0 fixed bottom-0 left-0 right-0 z-20 flex-initial lg:left-80">
+      <div className="mx-auto max-h-screen max-w-4xl pb-0 sm:pb-8">
         <AssistantInputBar
           owner={owner}
           onSubmit={onSubmit}

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -559,6 +559,7 @@ export default function AssistantBuilder({
       <AppLayout
         subscription={subscription}
         hideSidebar
+        isWideMode
         owner={owner}
         gaTrackingId={gaTrackingId}
         topNavigationCurrent="assistants"

diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -1,11 +1,4 @@
-import {
-  Banner,
-  CollapseButton,
-  Item,
-  Logo,
-  Tab,
-  XMarkIcon,
-} from "@dust-tt/sparkle";
+import { Banner, Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle";
 import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
 import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon } from "@heroicons/react/20/solid";
@@ -14,14 +7,7 @@ import Link from "next/link";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import React, {
-  Fragment,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { Fragment, useContext, useEffect, useState } from "react";
 
 import { CONVERSATION_PARENT_SCROLL_DIV_ID } from "@app/components/assistant/conversation/lib";
 import type {
@@ -40,37 +26,6 @@ import { classNames } from "@app/lib/utils";
  */
 const SHOW_INCIDENT_BANNER = false;
 
-function ToggleSideBarButton({
-  isNavigationBarOpened,
-  toggleNavigationBarVisibility,
-}: {
-  isNavigationBarOpened: boolean;
-  toggleNavigationBarVisibility: (isOpened: boolean) => void;
-}) {
-  const buttonRef = useRef<HTMLDivElement>(null);
-  const [direction, setDirection] = useState<"left" | "right">("left");
-
-  const handleClick = useCallback(() => {
-    toggleNavigationBarVisibility(!isNavigationBarOpened);
-    setDirection((prevDirection) =>
-      prevDirection === "left" ? "right" : "left"
-    );
-  }, [isNavigationBarOpened, toggleNavigationBarVisibility]);
-
-  return (
-    <div
-      ref={buttonRef}
-      onClick={handleClick}
-      className={classNames(
-        "hidden lg:fixed lg:top-1/2 lg:flex lg:w-5",
-        isNavigationBarOpened ? "lg:left-80" : "lg:left-0"
-      )}
-    >
-      <CollapseButton direction={direction} />
-    </div>
-  );
-}
-
 function NavigationBar({
   owner,
   subscription,
@@ -236,6 +191,7 @@ export const appLayoutBack = async (
 export default function AppLayout({
   owner,
   subscription,
+  isWideMode = false,
   hideSidebar = false,
   topNavigationCurrent,
   subNavigation,
@@ -258,7 +214,6 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext);
-  const [isNavigationBarOpened, setNavigationBarOpened] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const router = useRouter();
   const user = useUser();
@@ -400,7 +355,7 @@ export default function AppLayout({
           </Transition.Root>
         )}
 
-        {!hideSidebar && isNavigationBarOpened && (
+        {!hideSidebar && (
           <div className="hidden lg:fixed lg:inset-y-0 lg:z-0 lg:flex lg:w-80 lg:flex-col">
             {loaded && (
               <NavigationBar
@@ -418,7 +373,7 @@ export default function AppLayout({
         <div
           className={classNames(
             "mt-0 h-full flex-1",
-            !hideSidebar ? (isNavigationBarOpened ? "lg:pl-80" : "lg:pl-0") : ""
+            !hideSidebar ? "lg:pl-80" : ""
           )}
         >
           <div
@@ -439,9 +394,8 @@ export default function AppLayout({
             className={classNames(
               "fixed left-0 right-0 top-0 z-30 flex flex-col pl-12 lg:pl-0",
               !hideSidebar
-                ? "border-b border-structure-300/30 bg-white/80 backdrop-blur"
+                ? "border-b border-structure-300/30 bg-white/80 backdrop-blur lg:left-80"
                 : "",
-              isNavigationBarOpened ? "lg:left-80" : "",
               titleChildren ? "fixed" : "lg:hidden"
             )}
           >
@@ -463,18 +417,16 @@ export default function AppLayout({
               titleChildren ? "" : "lg:pt-8"
             )}
           >
-            <div className="mx-auto h-full max-w-4xl">{loaded && children}</div>
+            <div
+              className={classNames(
+                "mx-auto h-full",
+                isWideMode ? "w-full" : "max-w-4xl px-6"
+              )}
+            >
+              {loaded && children}
+            </div>
           </main>
         </div>
-
-        <div>
-          <ToggleSideBarButton
-            isNavigationBarOpened={isNavigationBarOpened}
-            toggleNavigationBarVisibility={(isVisible) =>
-              setNavigationBarOpened(isVisible)
-            }
-          />
-        </div>
       </div>
       <>
         <Script

diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
@@ -242,7 +242,7 @@ export default function AssistantNew({
           onClose={() => setConversationHelperModal(null)}
         />
       )}
-      <div className="flex h-full items-center px-6 pb-20">
+      <div className="flex h-full items-center pb-20">
         <div className="flex text-sm font-normal text-element-800">
           <Page.Vertical gap="md" align="left">
             {/* FEATURED AGENTS */}