diff --git a/frontend/src/components/SettingsSidebar/index.jsx b/frontend/src/components/SettingsSidebar/index.jsx
index 5fe81363c8442240fec6498717008654eb70c531..13c4abeabe9ed04f26e4a9bd3f2e3a819013c4c5 100644
--- a/frontend/src/components/SettingsSidebar/index.jsx
+++ b/frontend/src/components/SettingsSidebar/index.jsx
@@ -25,11 +25,104 @@ import {
} from "@phosphor-icons/react";
import useUser from "@/hooks/useUser";
import { USER_BACKGROUND_COLOR } from "@/utils/constants";
+import { isMobile } from "react-device-detect";
export default function SettingsSidebar() {
const { logo } = useLogo();
- const sidebarRef = useRef(null);
const { user } = useUser();
+ const sidebarRef = useRef(null);
+ const [showSidebar, setShowSidebar] = useState(false);
+ const [showBgOverlay, setShowBgOverlay] = useState(false);
+
+ useEffect(() => {
+ function handleBg() {
+ if (showSidebar) {
+ setTimeout(() => {
+ setShowBgOverlay(true);
+ }, 300);
+ } else {
+ setShowBgOverlay(false);
+ }
+ }
+ handleBg();
+ }, [showSidebar]);
+
+ if (isMobile) {
+ return (
+ <>
+ <div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16">
+ <button
+ onClick={() => setShowSidebar(true)}
+ className="rounded-md p-2 flex items-center justify-center text-slate-200"
+ >
+ <List className="h-6 w-6" />
+ </button>
+ <div className="flex items-center justify-center flex-grow">
+ <img
+ src={logo}
+ alt="Logo"
+ className="block mx-auto h-6 w-auto"
+ style={{ maxHeight: "40px", objectFit: "contain" }}
+ />
+ </div>
+ <div className="w-12"></div>
+ </div>
+ <div
+ style={{
+ transform: showSidebar ? `translateX(0vw)` : `translateX(-100vw)`,
+ }}
+ className={`z-99 fixed top-0 left-0 transition-all duration-500 w-[100vw] h-[100vh]`}
+ >
+ <div
+ className={`${
+ showBgOverlay
+ ? "transition-all opacity-1"
+ : "transition-none opacity-0"
+ } duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
+ onClick={() => setShowSidebar(false)}
+ />
+ <div
+ ref={sidebarRef}
+ className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
+ >
+ <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
+ {/* Header Information */}
+ <div className="flex w-full items-center justify-between gap-x-4">
+ <div className="flex shrink-1 w-fit items-center justify-start">
+ <img
+ src={logo}
+ alt="Logo"
+ className="rounded w-full max-h-[40px]"
+ style={{ objectFit: "contain" }}
+ />
+ </div>
+ <div className="flex gap-x-2 items-center text-slate-500 shrink-0">
+ <a
+ href={paths.home()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+ >
+ <House className="h-4 w-4" />
+ </a>
+ </div>
+ </div>
+
+ {/* Primary Body */}
+ <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
+ <div className="h-auto md:sidebar-items md:dark:sidebar-items">
+ <div className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll">
+ <SidebarOptions user={user} />
+ </div>
+ </div>
+ <div>
+ <Footer />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+ }
return (
<>
@@ -62,162 +155,15 @@ export default function SettingsSidebar() {
Settings
</div>
{/* Primary Body */}
- <div className="h-[100%] flex flex-col w-full justify-between pt-4 overflow-y-hidden">
+ <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden">
<div className="h-auto sidebar-items">
- <div className="flex flex-col gap-y-2 h-[100%] pb-8 overflow-y-scroll no-scroll">
- <Option
- href={paths.settings.system()}
- btnText="System Preferences"
- icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.invites()}
- btnText="Invitation"
- icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.users()}
- btnText="Users"
- icon={<Users className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.workspaces()}
- btnText="Workspaces"
- icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.chats()}
- btnText="Workspace Chat"
- icon={<ChatCenteredText className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.appearance()}
- btnText="Appearance"
- icon={<Eye className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.apiKeys()}
- btnText="API Keys"
- icon={<Key className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.llmPreference()}
- btnText="LLM Preference"
- icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.embeddingPreference()}
- btnText="Embedding Preference"
- icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.vectorDatabase()}
- btnText="Vector Database"
- icon={<Database className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.dataConnectors.list()}
- btnText="Data Connectors"
- icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.embedSetup()}
- childLinks={[paths.settings.embedChats()]}
- btnText="Embedded Chat"
- icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- subOptions={
- <>
- <Option
- href={paths.settings.embedChats()}
- btnText="Embedded Chat History"
- icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- </>
- }
- />
- <Option
- href={paths.settings.security()}
- btnText="Security"
- icon={<Lock className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.logs()}
- btnText="Events Logs"
- icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
+ {/* Options */}
+ <div className="flex flex-col gap-y-2 h-full pb-8 overflow-y-scroll no-scroll">
+ <SidebarOptions user={user} />
</div>
</div>
<div>
- {/* Footer */}
- <div className="flex justify-center mt-2">
- <div className="flex space-x-4">
- <a
- href={paths.github()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <GithubLogo weight="fill" className="h-5 w-5 " />
- </a>
- <a
- href={paths.docs()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <BookOpen weight="fill" className="h-5 w-5 " />
- </a>
- <a
- href={paths.discord()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <DiscordLogo
- weight="fill"
- className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
- />
- </a>
- {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
- <DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
- </button> */}
- </div>
- </div>
+ <Footer />
</div>
</div>
</div>
@@ -226,254 +172,38 @@ export default function SettingsSidebar() {
);
}
-export function SidebarMobileHeader() {
- const { logo } = useLogo();
- const { user } = useUser();
- const sidebarRef = useRef(null);
- const [showSidebar, setShowSidebar] = useState(false);
- const [showBgOverlay, setShowBgOverlay] = useState(false);
-
- useEffect(() => {
- function handleBg() {
- if (showSidebar) {
- setTimeout(() => {
- setShowBgOverlay(true);
- }, 300);
- } else {
- setShowBgOverlay(false);
- }
- }
- handleBg();
- }, [showSidebar]);
-
+const Footer = () => {
return (
- <>
- <div className="fixed top-0 left-0 right-0 z-10 flex justify-between items-center px-4 py-2 bg-sidebar text-slate-200 shadow-lg h-16">
- <button
- onClick={() => setShowSidebar(true)}
- className="rounded-md p-2 flex items-center justify-center text-slate-200"
+ <div className="flex justify-center mt-2">
+ <div className="flex space-x-4">
+ <a
+ href={paths.github()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
- <List className="h-6 w-6" />
- </button>
- <div className="flex items-center justify-center flex-grow">
- <img
- src={logo}
- alt="Logo"
- className="block mx-auto h-6 w-auto"
- style={{ maxHeight: "40px", objectFit: "contain" }}
- />
- </div>
- <div className="w-12"></div>
- </div>
- <div
- style={{
- transform: showSidebar ? `translateX(0vw)` : `translateX(-100vw)`,
- }}
- className={`z-99 fixed top-0 left-0 transition-all duration-500 w-[100vw] h-[100vh]`}
- >
- <div
- className={`${
- showBgOverlay
- ? "transition-all opacity-1"
- : "transition-none opacity-0"
- } duration-500 fixed top-0 left-0 ${USER_BACKGROUND_COLOR} bg-opacity-75 w-screen h-screen`}
- onClick={() => setShowSidebar(false)}
- />
- <div
- ref={sidebarRef}
- className="h-[100vh] fixed top-0 left-0 rounded-r-[26px] bg-sidebar w-[80%] p-[18px] "
+ <GithubLogo weight="fill" className="h-5 w-5 " />
+ </a>
+ <a
+ href={paths.docs()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
>
- <div className="w-full h-full flex flex-col overflow-x-hidden items-between">
- {/* Header Information */}
- <div className="flex w-full items-center justify-between gap-x-4">
- <div className="flex shrink-1 w-fit items-center justify-start">
- <img
- src={logo}
- alt="Logo"
- className="rounded w-full max-h-[40px]"
- style={{ objectFit: "contain" }}
- />
- </div>
- <div className="flex gap-x-2 items-center text-slate-500 shrink-0">
- <a
- href={paths.home()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <House className="h-4 w-4" />
- </a>
- </div>
- </div>
-
- {/* Primary Body */}
- <div className="h-full flex flex-col w-full justify-between pt-4 overflow-y-hidden ">
- <div className="h-auto md:sidebar-items md:dark:sidebar-items">
- <div
- style={{ height: "calc(100vw-3rem)" }}
- className=" flex flex-col gap-y-4 pb-8 overflow-y-scroll no-scroll"
- >
- <Option
- href={paths.settings.system()}
- btnText="System Preferences"
- icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.invites()}
- btnText="Invitation"
- icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.users()}
- btnText="Users"
- icon={<Users className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.workspaces()}
- btnText="Workspaces"
- icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
- user={user}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.chats()}
- btnText="Workspace Chat"
- icon={
- <ChatCenteredText className="h-5 w-5 flex-shrink-0" />
- }
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.appearance()}
- btnText="Appearance"
- icon={<Eye className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.apiKeys()}
- btnText="API Keys"
- icon={<Key className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.llmPreference()}
- btnText="LLM Preference"
- icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.embeddingPreference()}
- btnText="Embedding Preference"
- icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.vectorDatabase()}
- btnText="Vector Database"
- icon={<Database className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- <Option
- href={paths.settings.dataConnectors.list()}
- btnText="Data Connectors"
- icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.embedSetup()}
- childLinks={[paths.settings.embedChats()]}
- btnText="Embedded Chat"
- icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- subOptions={
- <>
- <Option
- href={paths.settings.embedChats()}
- btnText="Embedded Chat History"
- icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- </>
- }
- />
- <Option
- href={paths.settings.security()}
- btnText="Security"
- icon={<Lock className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin", "manager"]}
- />
- <Option
- href={paths.settings.logs()}
- btnText="Events Logs"
- icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
- user={user}
- flex={true}
- allowedRole={["admin"]}
- />
- </div>
- </div>
- <div>
- {/* Footer */}
- <div className="flex justify-center mt-2">
- <div className="flex space-x-4">
- <a
- href={paths.github()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <GithubLogo weight="fill" className="h-5 w-5 " />
- </a>
- <a
- href={paths.docs()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <BookOpen weight="fill" className="h-5 w-5 " />
- </a>
- <a
- href={paths.discord()}
- className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
- >
- <DiscordLogo
- weight="fill"
- className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
- />
- </a>
- {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
- <DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
- </button> */}
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <BookOpen weight="fill" className="h-5 w-5 " />
+ </a>
+ <a
+ href={paths.discord()}
+ className="transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
+ >
+ <DiscordLogo
+ weight="fill"
+ className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
+ />
+ </a>
+ {/* <button className="invisible transition-all duration-300 p-2 rounded-full text-white bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border">
+ <DotsThree className="h-5 w-5 group-hover:stroke-slate-200" />
+ </button> */}
</div>
- </>
+ </div>
);
-}
+};
const Option = ({
btnText,
@@ -484,7 +214,10 @@ const Option = ({
user = null,
allowedRole = [],
subOptions = null,
+ hidden = false,
}) => {
+ if (hidden) return null;
+
const hasActiveChild = childLinks.includes(window.location.pathname);
const isActive = window.location.pathname === href;
@@ -493,6 +226,7 @@ const Option = ({
// Option is dual-mode, but user exists, we need to check permissions
if (flex && !!user && !allowedRole.includes(user?.role)) return null;
+
return (
<>
<div className="flex gap-x-2 items-center justify-between text-white">
@@ -526,3 +260,130 @@ const Option = ({
</>
);
};
+
+const SidebarOptions = ({ user = null }) => (
+ <>
+ <Option
+ href={paths.settings.system()}
+ btnText="System Preferences"
+ icon={<SquaresFour className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.invites()}
+ btnText="Invitation"
+ icon={<EnvelopeSimple className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.users()}
+ btnText="Users"
+ icon={<Users className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.workspaces()}
+ btnText="Workspaces"
+ icon={<BookOpen className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.chats()}
+ btnText="Workspace Chat"
+ icon={<ChatCenteredText className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.appearance()}
+ btnText="Appearance"
+ icon={<Eye className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.apiKeys()}
+ btnText="API Keys"
+ icon={<Key className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ <Option
+ href={paths.settings.llmPreference()}
+ btnText="LLM Preference"
+ icon={<ChatText className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ <Option
+ href={paths.settings.embeddingPreference()}
+ btnText="Embedding Preference"
+ icon={<FileCode className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ <Option
+ href={paths.settings.vectorDatabase()}
+ btnText="Vector Database"
+ icon={<Database className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ <Option
+ href={paths.settings.dataConnectors.list()}
+ btnText="Data Connectors"
+ icon={<Plugs className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin", "manager"]}
+ />
+ <Option
+ href={paths.settings.embedSetup()}
+ childLinks={[paths.settings.embedChats()]}
+ btnText="Embedded Chat"
+ icon={<CodeBlock className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ subOptions={
+ <>
+ <Option
+ href={paths.settings.embedChats()}
+ btnText="Embedded Chat History"
+ icon={<Barcode className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ </>
+ }
+ />
+ <Option
+ href={paths.settings.security()}
+ btnText="Security"
+ icon={<Lock className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin", "manager"]}
+ hidden={user?.role}
+ />
+ <Option
+ href={paths.settings.logs()}
+ btnText="Event Logs"
+ icon={<Notepad className="h-5 w-5 flex-shrink-0" />}
+ user={user}
+ flex={true}
+ allowedRole={["admin"]}
+ />
+ </>
+);
diff --git a/frontend/src/pages/Admin/Invitations/index.jsx b/frontend/src/pages/Admin/Invitations/index.jsx
index 94b07f33009b57e9dade9a4631f2e7922c74c10c..a4a99e93be4c77025295eb49233c10645a48928c 100644
--- a/frontend/src/pages/Admin/Invitations/index.jsx
+++ b/frontend/src/pages/Admin/Invitations/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -15,12 +15,11 @@ export default function AdminInvites() {
const { isOpen, openModal, closeModal } = useModal();
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/Admin/Logging/index.jsx b/frontend/src/pages/Admin/Logging/index.jsx
index 0219b54a391cce6cd90bc82199e5fe28764ed38f..246cf211016152119035f059158ec545cbf6a8ad 100644
--- a/frontend/src/pages/Admin/Logging/index.jsx
+++ b/frontend/src/pages/Admin/Logging/index.jsx
@@ -1,4 +1,4 @@
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import useQuery from "@/hooks/useQuery";
import System from "@/models/system";
import { useEffect, useState } from "react";
@@ -27,12 +27,11 @@ export default function AdminLogs() {
};
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/Admin/System/index.jsx b/frontend/src/pages/Admin/System/index.jsx
index c4c1b9ebdde857fa406bfa06815faa73ccacc01e..909408865397f18ae7cae9910020a4ec6fd028f5 100644
--- a/frontend/src/pages/Admin/System/index.jsx
+++ b/frontend/src/pages/Admin/System/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import Admin from "@/models/admin";
import showToast from "@/utils/toast";
@@ -40,12 +40,11 @@ export default function AdminSystem() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<form
onSubmit={handleSubmit}
onChange={() => setHasChanges(true)}
diff --git a/frontend/src/pages/Admin/Users/index.jsx b/frontend/src/pages/Admin/Users/index.jsx
index 7c969948310cfb7361b7584d37145d142659d5c5..a5c6ba9c5cc3aadacc9aaaa5ae391bb65ae36f16 100644
--- a/frontend/src/pages/Admin/Users/index.jsx
+++ b/frontend/src/pages/Admin/Users/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -15,12 +15,11 @@ export default function AdminUsers() {
const { isOpen, openModal, closeModal } = useModal();
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/Admin/Workspaces/index.jsx b/frontend/src/pages/Admin/Workspaces/index.jsx
index 8ca7410b0decb665e281f46d0d3bbbece58b5153..62a28094bb40506e689eda5552e2c8f9d466b7fa 100644
--- a/frontend/src/pages/Admin/Workspaces/index.jsx
+++ b/frontend/src/pages/Admin/Workspaces/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -15,12 +15,11 @@ export default function AdminWorkspaces() {
const { isOpen, openModal, closeModal } = useModal();
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
index bf4ac51ef783e5a56b770356719a8b67504a6280..9ba3335f56d89d7880c6349be53f4f1e84e41bcf 100644
--- a/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
+++ b/frontend/src/pages/GeneralSettings/ApiKeys/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -17,12 +17,11 @@ export default function AdminApiKeys() {
const { isOpen, openModal, closeModal } = useModal();
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 7a992e916f70f365ec7e9b4d86a0cc38b1bf81c8..a2a9ec001046113a07b92af424f99b3352337b7c 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
-import Admin from "@/models/admin";
import AnythingLLM from "@/media/logo/anything-llm.png";
import useLogo from "@/hooks/useLogo";
import System from "@/models/system";
@@ -114,12 +113,11 @@ export default function Appearance() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 336aadccea3a304494d8097eeef15b94b2489950..f705d18c948b6222096ae84efc707d1fefc9381a 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useRef, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -63,12 +63,11 @@ export default function WorkspaceChats() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
index fdcc8cb574641a16f0f81a6a7b12966dad4c8679..1385cdb1ed52e25c422a1f0628fde905a6d6f85e 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Github/index.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import { DATA_CONNECTORS } from "@/components/DataConnectorOption";
import System from "@/models/system";
@@ -64,12 +64,11 @@ export default function GithubConnectorSetup() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
index 5252e3fd20e1cc11ca757dc75b1e557c2bb139b9..021eeaf98cd26011f916840405a971a1ed7ba52e 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/Connectors/Youtube/index.jsx
@@ -1,5 +1,5 @@
import React, { useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import { DATA_CONNECTORS } from "@/components/DataConnectorOption";
import System from "@/models/system";
@@ -45,12 +45,11 @@ export default function YouTubeTranscriptConnectorSetup() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="flex w-full gap-x-4 items-center pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx b/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
index 50f4298ed48b33b1f546b75246a39fedec906021..e3bfa642a595eff005c005ba866680b9c52f9989 100644
--- a/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
+++ b/frontend/src/pages/GeneralSettings/DataConnectors/index.jsx
@@ -1,17 +1,16 @@
import React from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import DataConnectorOption from "@/components/DataConnectorOption";
export default function DataConnectors() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
index 6b84b3fde48e7c0add32ffc3d295581adf81d48e..23c5bf189e54bbdc28abc8b739e0dad43b713d75 100644
--- a/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedChats/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -11,12 +11,11 @@ export default function EmbedChats() {
// TODO [FEAT]: Add export of embed chats
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
index ccd12b7f137dd43c0e5d0b37bbde40cd6db28c65..4257b029f8e8a98d5f8e62cced5712d2c050816c 100644
--- a/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import * as Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@@ -14,12 +14,11 @@ export default function EmbedConfigs() {
const { isOpen, openModal, closeModal } = useModal();
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
<div className="items-center flex gap-x-4">
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index c6c62fef7b099afacadf60fcc16d47852a341c0b..c4900cf64c7eb6a32b3ebcdd886e26ffeaa7a90b 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import System from "@/models/system";
import showToast from "@/utils/toast";
@@ -126,7 +126,7 @@ export default function GeneralEmbeddingPreference() {
onConfirm={handleSaveSettings}
/>
</ModalWrapper>
- {!isMobile && <Sidebar />}
+ <Sidebar />
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@@ -141,7 +141,6 @@ export default function GeneralEmbeddingPreference() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<form
id="embedding-form"
onSubmit={handleSubmit}
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index ac9ab71f8b92894b407689f18ab9f34ce476bf5a..45ad5fd70ad958809ac00d67fbe421051bf28986 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import System from "@/models/system";
import showToast from "@/utils/toast";
@@ -165,7 +165,7 @@ export default function GeneralLLMPreference() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@@ -180,7 +180,6 @@ export default function GeneralLLMPreference() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<form onSubmit={handleSubmit} className="flex w-full">
<div className="flex flex-col w-full px-1 md:px-20 md:py-12 py-16">
<div className="w-full flex flex-col gap-y-1 pb-6 border-white border-b-2 border-opacity-10">
diff --git a/frontend/src/pages/GeneralSettings/Security/index.jsx b/frontend/src/pages/GeneralSettings/Security/index.jsx
index 4c4cfc0a7d5509848e2c78fb81f1ba3af92f133d..e09315d16eef61d25e9542cf15ff6d0539f126a8 100644
--- a/frontend/src/pages/GeneralSettings/Security/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Security/index.jsx
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import showToast from "@/utils/toast";
import System from "@/models/system";
@@ -10,12 +10,11 @@ import PreLoader from "@/components/Preloader";
export default function GeneralSecurity() {
return (
<div className="w-screen h-screen overflow-hidden bg-sidebar flex">
- {!isMobile && <Sidebar />}
+ <Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<MultiUserMode />
<PasswordProtection />
</div>
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index dd43fda5703a57845cee5fe2d0be7c7745cc9832..32de0709d3e8a0025811a83cfe004391d3a1e12b 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
-import Sidebar, { SidebarMobileHeader } from "@/components/SettingsSidebar";
+import Sidebar from "@/components/SettingsSidebar";
import { isMobile } from "react-device-detect";
import System from "@/models/system";
import showToast from "@/utils/toast";
@@ -161,7 +161,7 @@ export default function GeneralVectorDatabase() {
onConfirm={handleSaveSettings}
/>
</ModalWrapper>
- {!isMobile && <Sidebar />}
+ <Sidebar />
{loading ? (
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
@@ -176,7 +176,6 @@ export default function GeneralVectorDatabase() {
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="transition-all duration-500 relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[26px] bg-main-gradient w-full h-full overflow-y-scroll border-4 border-accent"
>
- {isMobile && <SidebarMobileHeader />}
<form
id="vectordb-form"
onSubmit={handleSubmit}