Add expanders

3 files changed, 13 insertions, 7 deletions

diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx
index 93cc286..b7da330 100644
--- a/extension/src/Folder.tsx
+++ b/extension/src/Folder.tsx
@@ -3,10 +3,10 @@ import Bookmark from "./Bookmark.tsx";
 
 function Folder (props: {data: BookmarkTreeNode}) {
     return (
-        <div className="folder">
-            <span>{props.data.title}</span>
+        <details open className="folder">
+            <summary>{props.data.title}</summary>
             <div>
-                {
+            {
                     props.data.children &&
                     props.data.children.map(child =>
                         child.children
@@ -15,7 +15,7 @@ function Folder (props: {data: BookmarkTreeNode}) {
                     )
                 }
             </div>
-        </div>
+        </details>
     )
 }
 
diff --git a/extension/src/index.css b/extension/src/index.css
index 301b98f..9b18c8a 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   background-color: #242424;
   color: white;
@@ -23,17 +27,18 @@ body {
   flex-wrap: wrap;
 }
 
-.folder > span {
+.folder > summary {
   font-weight: bold;
   font-size: 20px;
   margin: 5px;
+  user-select: none
 }
 
 /* Bookmark */
 .bookmark {
   display: flex;
   flex-direction: column;
-  width: 100px;
+  width: 125px;
   padding: 10px;
   margin: 5px;
 }
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
index 0aaf551..45019a5 100644
--- a/extension/src/main.tsx
+++ b/extension/src/main.tsx
@@ -4,7 +4,8 @@ import Folder from "./Folder.tsx";
 
 chrome.bookmarks.getTree(tree => {
     createRoot(document.getElementById('root')!).render(
-        <Folder data={tree[0]} />
+        // @ts-ignore
+        <Folder data={tree[0].children[0]} />
     )
 });