scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-08-28 05:25:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

sidebar update

Browse source
This commit is contained in:
Yash 2024-04-02 01:49:09 +00:00
parent 4ca2acd7b1
commit 4e12c91acc
3 changed files with 67 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/app/globals.css
View file

@ -31,7 +31,7 @@ body {
}
[vaul-drawer-wrapper] {
@apply bg-rgray-1;
@apply bg-rgray-2;
}
@layer utilities {

42
apps/web/src/assets/Memories.tsx Normal file
View file

@ -0,0 +1,42 @@
export const MemoryIcon: React.FC<React.SVGAttributes<SVGElement>> = (
props,
) => (
<svg
width="89"
height="53"
viewBox="0 0 89 53"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<rect
x="0.40697"
y="8.52821"
width="43.0286"
height="43.0286"
rx="5.5"
transform="rotate(-12 0.40697 8.52821)"
fill="var(--gray-4)"
stroke="var(--gray-8)"
/>
<rect
x="20.8257"
y="9.19775"
width="43"
height="43"
rx="5.5"
fill="var(--gray-4)"
stroke="var(--gray-8)"
/>
<rect
x="47.6965"
y="-0.612372"
width="43.0286"
height="43.0286"
rx="5.5"
transform="rotate(15 47.6965 -0.612372)"
fill="var(--gray-4)"
stroke="var(--gray-8)"
/>
</svg>
);

48
apps/web/src/components/Sidebar/index.tsx
View file

@ -2,6 +2,8 @@
import { StoredContent } from "@/server/db/schema";
import { AddNewPagePopover, PageItem } from "./PagesItem";
import { CategoryItem } from "./CategoryItem";
import { MemoryIcon } from "../../assets/Memories";
import { Trash2, User2 } from "lucide-react";
export default async function Sidebar() {
const pages: StoredContent[] = [
@ -28,30 +30,28 @@ export default async function Sidebar() {
];
return (
<aside className="bg-rgray-3 flex h-screen w-[25%] flex-col items-start py-5 font-light">
<div className="flex items-center justify-center gap-1 px-5 text-xl font-normal">
<img src="/brain.png" alt="logo" className="h-10 w-10" />
SuperMemory
</div>
<div className="flex h-1/3 w-full flex-col items-start justify-center p-2">
<h1 className="mb-1 flex w-full items-center justify-center px-3 font-normal">
Pages
<AddNewPagePopover />
</h1>
{pages.map((item) => (
<PageItem key={item.id} item={item} />
))}
</div>
<div className="flex h-1/2 w-full flex-col items-start p-2">
<h1 className="mb-1 flex w-full items-center justify-center px-3 font-normal">
Categories
<AddNewPagePopover />
</h1>
{pages.map((item) => (
<CategoryItem key={item.id} item={item} />
))}
</div>
<button>y</button>
<aside className="bg-rgray-2 border-rgray-6 flex h-screen w-max flex-col items-center border-r px-3 py-5 font-light">
<button
// data-state-on="true"
className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center rounded-md px-4 py-3 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
>
<MemoryIcon className="h-14 w-14" />
<span className="">Memories</span>
</button>
<button
// data-state-on="true"
className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 mt-auto flex w-full flex-col items-center justify-center gap-1 rounded-md p-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
>
<Trash2 strokeWidth={1.3} className="h-8 w-8" />
<span className="">Trash</span>
</button>
<button
// data-state-on="true"
className="on:opacity-100 on:bg-rgray-3 dark:on:bg-rgray-1 focus-visible:ring-rgray-7 flex w-full flex-col items-center justify-center gap-1 rounded-md p-3 px-4 py-4 opacity-50 ring-2 ring-transparent transition hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
>
<User2 strokeWidth={1.3} className="h-8 w-8" />
<span className="">Profile</span>
</button>
</aside>
);
}