kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-11-15 02:50:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP main sidebar designs

Browse Source
This commit is contained in:
shatfield4 2024-02-26 16:24:50 -08:00
parent 6d18d79bb7
commit 0be503395a
5 changed files with 83 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/Footer/index.jsx
View File

@ -13,6 +13,7 @@ import {
LinkSimple, LinkSimple,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import SettingsButton from "../SettingsButton";
export const MAX_ICONS = 3; export const MAX_ICONS = 3;
export const ICON_COMPONENTS = { export const ICON_COMPONENTS = {
@ -49,6 +50,7 @@ export default function Footer() {
<a <a
href={paths.github()} href={paths.github()}
target="_blank" target="_blank"
rel="noreferrer"
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" 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 " /> <GithubLogo weight="fill" className="h-5 w-5 " />
@ -56,6 +58,7 @@ export default function Footer() {
<a <a
href={paths.docs()} href={paths.docs()}
target="_blank" target="_blank"
rel="noreferrer"
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" 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 " /> <BookOpen weight="fill" className="h-5 w-5 " />
@ -63,6 +66,7 @@ export default function Footer() {
<a <a
href={paths.discord()} href={paths.discord()}
target="_blank" target="_blank"
rel="noreferrer"
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" 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 <DiscordLogo
@ -70,6 +74,7 @@ export default function Footer() {
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200" className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
/> />
</a> </a>
<SettingsButton />
</div> </div>
</div> </div>
); );
@ -83,6 +88,7 @@ export default function Footer() {
key={index} key={index}
href={item.url} href={item.url}
target="_blank" target="_blank"
rel="noreferrer"
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" 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"
> >
{React.createElement(ICON_COMPONENTS[item.icon], { {React.createElement(ICON_COMPONENTS[item.icon], {
@ -91,6 +97,7 @@ export default function Footer() {
})} })}
</a> </a>
))} ))}
<SettingsButton />
</div> </div>
</div> </div>
); );

17
frontend/src/components/SettingsButton/index.jsx Normal file
View File

@ -0,0 +1,17 @@
import useUser from "@/hooks/useUser";
import paths from "@/utils/paths";
import { Wrench } from "@phosphor-icons/react";
export default function SettingsButton() {
const { user } = useUser();
return (
<a
href={
!!user?.role ? paths.settings.system() : paths.settings.appearance()
}
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"
>
<Wrench className="h-5 w-5" weight="fill" />
</a>
);
}

25
frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
View File

@ -90,33 +90,35 @@ export default function ActiveWorkspaces() {
href={isActive ? null : paths.workspace.chat(workspace.slug)} href={isActive ? null : paths.workspace.chat(workspace.slug)}
className={` className={`
transition-all duration-[200ms] transition-all duration-[200ms]
flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-lg text-slate-200 justify-start items-center flex flex-grow w-[75%] gap-x-2 py-[6px] px-[12px] rounded-[4px] text-slate-200 justify-start items-center
hover:bg-workspace-item-selected-gradient hover:bg-workspace-item-selected-gradient
${ ${
isActive isActive
? "border-2 bg-workspace-item-selected-gradient border-white" ? "bg-workspace-item-selected-gradient"
: "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50" : "border-[2px] border-outline"
}`} }`}
> >
<div className="flex flex-row justify-between w-full"> <div className="flex flex-row justify-between w-full">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<SquaresFour <SquaresFour
weight={isActive ? "fill" : "regular"} weight={isActive ? "fill" : "regular"}
className="h-5 w-5 flex-shrink-0" className="flex-shrink-0"
size={24}
/> />
<p <p
className={`text-white text-sm leading-loose font-medium whitespace-nowrap overflow-hidden ${ className={`text-white text-[14px] leading-loose font-bold whitespace-nowrap overflow-hidden ${
isActive ? "" : "text-opacity-80" isActive ? "" : "text-opacity-80"
}`} }`}
> >
{isActive || isHovered {isActive || isHovered
? truncate(workspace.name, 17) ? truncate(workspace.name, 15)
: truncate(workspace.name, 20)} : truncate(workspace.name, 20)}
</p> </p>
</div> </div>
{(isActive || isHovered || gearHover[workspace.id]) && {(isActive || isHovered || gearHover[workspace.id]) &&
user?.role !== "default" ? ( user?.role !== "default" ? (
<div className="flex items-center gap-x-2"> <div className="flex items-center">
<div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@ -139,6 +141,7 @@ export default function ActiveWorkspaces() {
className="h-[20px] w-[20px] transition-all duration-300" className="h-[20px] w-[20px] transition-all duration-300"
/> />
</button> </button>
</div>
<Link <Link
type="button" type="button"
@ -149,10 +152,14 @@ export default function ActiveWorkspaces() {
onMouseLeave={() => handleGearMouseLeave(workspace.id)} onMouseLeave={() => handleGearMouseLeave(workspace.id)}
className="rounded-md flex items-center justify-center text-white ml-auto" className="rounded-md flex items-center justify-center text-white ml-auto"
> >
<div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
<GearSix <GearSix
weight={gearHover[workspace.id] ? "fill" : "regular"} // weight={gearHover[workspace.id] ? "fill" : "regular"}
className="h-[20px] w-[20px] transition-all duration-300" className={`h-[20px] w-[20px] ${
gearHover[workspace.id] ? "" : ""
}`}
/> />
</div>
</Link> </Link>
</div> </div>
) : null} ) : null}

54
frontend/src/components/Sidebar/index.jsx
View File

@ -1,14 +1,14 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { Wrench, Plus, List } from "@phosphor-icons/react"; import { Plus, List } from "@phosphor-icons/react";
import NewWorkspaceModal, { import NewWorkspaceModal, {
useNewWorkspaceModal, useNewWorkspaceModal,
} from "../Modals/NewWorkspace"; } from "../Modals/NewWorkspace";
import ActiveWorkspaces from "./ActiveWorkspaces"; import ActiveWorkspaces from "./ActiveWorkspaces";
import paths from "@/utils/paths";
import { USER_BACKGROUND_COLOR } from "@/utils/constants"; import { USER_BACKGROUND_COLOR } from "@/utils/constants";
import useLogo from "@/hooks/useLogo"; import useLogo from "@/hooks/useLogo";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import Footer from "../Footer"; import Footer from "../Footer";
import SettingsButton from "../SettingsButton";
export default function Sidebar() { export default function Sidebar() {
const { user } = useUser(); const { user } = useUser();
@ -21,40 +21,30 @@ export default function Sidebar() {
} = useNewWorkspaceModal(); } = useNewWorkspaceModal();
return ( return (
<> <div>
<div <div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
ref={sidebarRef}
style={{ height: "calc(100% - 32px)" }}
className="transition-all duration-500 relative m-[16px] rounded-[26px] bg-sidebar border-4 border-accent min-w-[250px] p-[18px]"
>
<div className="flex flex-col h-full overflow-x-hidden">
{/* Header Information */}
<div className="flex items-center justify-between mb-4">
<div className="flex shrink-0 max-w-[65%] items-center justify-start">
<img <img
src={logo} src={logo}
alt="Logo" alt="Logo"
className="rounded max-h-[40px]" className="rounded max-h-[24px]"
style={{ objectFit: "contain" }} style={{ objectFit: "contain" }}
/> />
</div> </div>
{(!user || user?.role !== "default") && ( <div
<div className="flex gap-x-2 items-center text-slate-200"> ref={sidebarRef}
<SettingsButton /> style={{ height: "calc(100% - 76px)" }}
</div> className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
)} >
</div> <div className="flex flex-col h-full overflow-x-hidden">
<div className="flex-grow flex flex-col min-w-[235px]">
{/* Primary Body */}
<div className="flex-grow flex flex-col">
<div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll"> <div className="flex flex-col gap-y-2 pb-8 overflow-y-scroll no-scroll">
<div className="flex gap-x-2 items-center justify-between"> <div className="flex gap-x-2 items-center justify-between">
{(!user || user?.role !== "default") && ( {(!user || user?.role !== "default") && (
<button <button
onClick={showNewWsModal} onClick={showNewWsModal}
className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-4 mb-2 bg-white rounded-lg text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300" className="flex flex-grow w-[75%] h-[44px] gap-x-2 py-[5px] px-2.5 mb-2 bg-white rounded-[8px] text-sidebar justify-center items-center hover:bg-opacity-80 transition-all duration-300"
> >
<Plus className="h-5 w-5" /> <Plus size={18} weight="bold" />
<p className="text-sidebar text-sm font-semibold"> <p className="text-sidebar text-sm font-semibold">
New Workspace New Workspace
</p> </p>
@ -70,7 +60,7 @@ export default function Sidebar() {
</div> </div>
</div> </div>
{showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />} {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
</> </div>
); );
} }
@ -190,17 +180,3 @@ export function SidebarMobileHeader() {
</> </>
); );
} }
function SettingsButton() {
const { user } = useUser();
return (
<a
href={
!!user?.role ? paths.settings.system() : paths.settings.appearance()
}
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"
>
<Wrench className="h-4 w-4" weight="fill" />
</a>
);
}

3
frontend/tailwind.config.js
View File

@ -24,7 +24,8 @@ export default {
"sidebar-button": "#31353A", "sidebar-button": "#31353A",
sidebar: "#25272C", sidebar: "#25272C",
"historical-msg-system": "rgba(255, 255, 255, 0.05);", "historical-msg-system": "rgba(255, 255, 255, 0.05);",
"historical-msg-user": "#2C2F35" "historical-msg-user": "#2C2F35",
outline: "#4E5153"
}, },
backgroundImage: { backgroundImage: {
"preference-gradient": "preference-gradient":