mirror of
https://github.com/Mintplex-Labs/anything-llm.git
synced 2024-11-14 18:40:11 +01:00
WIP main sidebar designs
This commit is contained in:
shatfield4
parent
6d18d79bb7
commit
0be503395a
@ -13,6 +13,7 @@ import {
|
||||
LinkSimple,
|
||||
} from "@phosphor-icons/react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import SettingsButton from "../SettingsButton";
|
||||
|
||||
export const MAX_ICONS = 3;
|
||||
export const ICON_COMPONENTS = {
|
||||
@ -49,6 +50,7 @@ export default function Footer() {
|
||||
<a
|
||||
href={paths.github()}
|
||||
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"
|
||||
>
|
||||
<GithubLogo weight="fill" className="h-5 w-5 " />
|
||||
@ -56,6 +58,7 @@ export default function Footer() {
|
||||
<a
|
||||
href={paths.docs()}
|
||||
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"
|
||||
>
|
||||
<BookOpen weight="fill" className="h-5 w-5 " />
|
||||
@ -63,6 +66,7 @@ export default function Footer() {
|
||||
<a
|
||||
href={paths.discord()}
|
||||
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"
|
||||
>
|
||||
<DiscordLogo
|
||||
@ -70,6 +74,7 @@ export default function Footer() {
|
||||
className="h-5 w-5 stroke-slate-200 group-hover:stroke-slate-200"
|
||||
/>
|
||||
</a>
|
||||
<SettingsButton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -83,6 +88,7 @@ export default function Footer() {
|
||||
key={index}
|
||||
href={item.url}
|
||||
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"
|
||||
>
|
||||
{React.createElement(ICON_COMPONENTS[item.icon], {
|
||||
@ -91,6 +97,7 @@ export default function Footer() {
|
||||
})}
|
||||
</a>
|
||||
))}
|
||||
<SettingsButton />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
17
frontend/src/components/SettingsButton/index.jsx
Normal file
17
frontend/src/components/SettingsButton/index.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -90,55 +90,58 @@ export default function ActiveWorkspaces() {
|
||||
href={isActive ? null : paths.workspace.chat(workspace.slug)}
|
||||
className={`
|
||||
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
|
||||
hover:bg-workspace-item-selected-gradient
|
||||
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
|
||||
${
|
||||
isActive
|
||||
? "border-2 bg-workspace-item-selected-gradient border-white"
|
||||
: "border bg-workspace-item-gradient bg-opacity-60 border-transparent hover:border-slate-100 hover:border-opacity-50"
|
||||
? "bg-workspace-item-selected-gradient"
|
||||
: "border-[2px] border-outline"
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-row justify-between w-full">
|
||||
<div className="flex items-center space-x-2">
|
||||
<SquaresFour
|
||||
weight={isActive ? "fill" : "regular"}
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
className="flex-shrink-0"
|
||||
size={24}
|
||||
/>
|
||||
<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 || isHovered
|
||||
? truncate(workspace.name, 17)
|
||||
? truncate(workspace.name, 15)
|
||||
: truncate(workspace.name, 20)}
|
||||
</p>
|
||||
</div>
|
||||
{(isActive || isHovered || gearHover[workspace.id]) &&
|
||||
user?.role !== "default" ? (
|
||||
<div className="flex items-center gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedWs(workspace);
|
||||
showModal();
|
||||
}}
|
||||
onMouseEnter={() =>
|
||||
handleUploadMouseEnter(workspace.id)
|
||||
}
|
||||
onMouseLeave={() =>
|
||||
handleUploadMouseLeave(workspace.id)
|
||||
}
|
||||
className="rounded-md flex items-center justify-center text-white ml-auto"
|
||||
>
|
||||
<UploadSimple
|
||||
weight={
|
||||
uploadHover[workspace.id] ? "fill" : "regular"
|
||||
<div className="flex items-center">
|
||||
<div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setSelectedWs(workspace);
|
||||
showModal();
|
||||
}}
|
||||
onMouseEnter={() =>
|
||||
handleUploadMouseEnter(workspace.id)
|
||||
}
|
||||
className="h-[20px] w-[20px] transition-all duration-300"
|
||||
/>
|
||||
</button>
|
||||
onMouseLeave={() =>
|
||||
handleUploadMouseLeave(workspace.id)
|
||||
}
|
||||
className="rounded-md flex items-center justify-center text-white ml-auto"
|
||||
>
|
||||
<UploadSimple
|
||||
weight={
|
||||
uploadHover[workspace.id] ? "fill" : "regular"
|
||||
}
|
||||
className="h-[20px] w-[20px] transition-all duration-300"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
type="button"
|
||||
@ -149,10 +152,14 @@ export default function ActiveWorkspaces() {
|
||||
onMouseLeave={() => handleGearMouseLeave(workspace.id)}
|
||||
className="rounded-md flex items-center justify-center text-white ml-auto"
|
||||
>
|
||||
<GearSix
|
||||
weight={gearHover[workspace.id] ? "fill" : "regular"}
|
||||
className="h-[20px] w-[20px] transition-all duration-300"
|
||||
/>
|
||||
<div className="flex hover:bg-[#646768] p-[2px] rounded-[4px]">
|
||||
<GearSix
|
||||
// weight={gearHover[workspace.id] ? "fill" : "regular"}
|
||||
className={`h-[20px] w-[20px] ${
|
||||
gearHover[workspace.id] ? "" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Wrench, Plus, List } from "@phosphor-icons/react";
|
||||
import { Plus, List } from "@phosphor-icons/react";
|
||||
import NewWorkspaceModal, {
|
||||
useNewWorkspaceModal,
|
||||
} from "../Modals/NewWorkspace";
|
||||
import ActiveWorkspaces from "./ActiveWorkspaces";
|
||||
import paths from "@/utils/paths";
|
||||
import { USER_BACKGROUND_COLOR } from "@/utils/constants";
|
||||
import useLogo from "@/hooks/useLogo";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import Footer from "../Footer";
|
||||
import SettingsButton from "../SettingsButton";
|
||||
|
||||
export default function Sidebar() {
|
||||
const { user } = useUser();
|
||||
@ -21,40 +21,30 @@ export default function Sidebar() {
|
||||
} = useNewWorkspaceModal();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="flex shrink-0 max-w-[55%] items-center justify-start mx-[38px] my-[18px]">
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="rounded max-h-[24px]"
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
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]"
|
||||
style={{ height: "calc(100% - 76px)" }}
|
||||
className="transition-all duration-500 relative m-[16px] rounded-[16px] bg-sidebar border-2 border-outline min-w-[250px] p-[10px]"
|
||||
>
|
||||
<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
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
className="rounded max-h-[40px]"
|
||||
style={{ objectFit: "contain" }}
|
||||
/>
|
||||
</div>
|
||||
{(!user || user?.role !== "default") && (
|
||||
<div className="flex gap-x-2 items-center text-slate-200">
|
||||
<SettingsButton />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Primary Body */}
|
||||
<div className="flex-grow flex flex-col">
|
||||
<div className="flex-grow flex flex-col min-w-[235px]">
|
||||
<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">
|
||||
{(!user || user?.role !== "default") && (
|
||||
<button
|
||||
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">
|
||||
New Workspace
|
||||
</p>
|
||||
@ -70,7 +60,7 @@ export default function Sidebar() {
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -24,7 +24,8 @@ export default {
|
||||
"sidebar-button": "#31353A",
|
||||
sidebar: "#25272C",
|
||||
"historical-msg-system": "rgba(255, 255, 255, 0.05);",
|
||||
"historical-msg-user": "#2C2F35"
|
||||
"historical-msg-user": "#2C2F35",
|
||||
outline: "#4E5153"
|
||||
},
|
||||
backgroundImage: {
|
||||
"preference-gradient":
|
||||
|
||||
Loading…
Reference in New Issue
Block a user