Added a button to go to the file tree

It doesnt actually do anything yet but I'll probably make that soon.
Also I think the icon for the button looks pretty good considering I
wrote the svg myself instead of using an svg editor lol.
This commit is contained in:
Puppet committed 2025-08-19 11:09:26 -07:00
1 parent 45c7ab53c4
commit 3097541dc8
3 files changed
+42 -2

No files matched your search

+9 -1
View File
@@ -1,6 +1,14 @@
@import "tailwindcss"; @import "tailwindcss";
.sidebar { .sidebar {
@apply bg-[rgb(24,24,36)] ml-[10px] mt-3 p-5 border border-[rgb(48,48,72)] rounded-lg; @apply bg-[rgb(24,24,36)] ml-[10px] mt-3 p-0 border border-[rgb(48,48,72)] rounded-lg;
@apply w-20 h-[calc(100vh_-_23px)]; @apply w-20 h-[calc(100vh_-_23px)];
@apply relative;
}
.sidebar button {
@apply w-15 h-15 bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)];
@apply border border-[rgb(72,72,96)] hover:border-[rgb(96,96,128)] p-0 mt-2 rounded-lg;
@apply transition-colors cursor-pointer;
@apply absolute left-1/2 -translate-x-1/2;
} }
+24
View File
@@ -0,0 +1,24 @@
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-15 h-15"
viewBox="0 0 24 24"
fill="currentColor"
>
<rect
width="10"
height="13"
x="8.5"
y="3.5"
fill="rgb(54, 54, 72)"
stroke='rgb(172, 172, 196)'
/>
<rect
width="10"
height="13"
x="5.5"
y="7.5"
fill="rgb(54, 54, 72)"
stroke='rgb(172, 172, 196)'
/>
</svg>

After

Width:  |  Height:  |  Size: 373 B

+9 -1
View File
@@ -2,6 +2,10 @@
import './Editor_globals.css' import './Editor_globals.css'
import Image from "next/image";
import file_list_icon from "./assets/file_list_icon.svg";
export default function Editor_Layout ({ export default function Editor_Layout ({
children children
}: { }: {
@@ -9,7 +13,11 @@ export default function Editor_Layout ({
}) { }) {
return ( return (
<> <>
<div className='sidebar'></div> <div className='sidebar'>
<button>
<Image src={file_list_icon} alt="File list icon" width={60} height={60} />
</button>
</div>
<main>{children}</main> <main>{children}</main>
</> </>