upgrade to bulma style

src/components/Navigations/SideNavigation.js

@@ -1,9 +1,6 @@
-// src/components/SideNavigation.js
-
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import "./SideNavigation.css";
-import {fetchWithCache} from "../../utils/fetchWithCache";
+import { fetchWithCache } from "../../utils/fetchWithCache";
 import PermissionGuard from "../PermissionGuard";
 import config from "../../config";
 
@@ -42,17 +39,24 @@ const SideNavigation = () => {
     function renderTree(node, basePath = "") {
         return (
             <ul>
-                <li>
-                    <PermissionGuard rolesRequired={["admin", "creator"]} >
-                        <Link to="/markdown/create">Create New Markdown</Link>
-                    </PermissionGuard>
-
-                </li>
+                <PermissionGuard rolesRequired={["admin", "creator"]}>
+                    <li>
+                        <Link
+                            to="/markdown/create"
+                            className="button is-primary is-small"
+                        >
+                            Create New Markdown
+                        </Link>
+                    </li>
+                </PermissionGuard>
                 {Object.entries(node).map(([key, value]) => {
                     if (value.markdown) {
                         return (
-                            <li key={value.markdown.id}>
-                                <Link to={`${config.BACKEND_HOST}/markdown/${value.markdown.id}`}>
+                            <li key={value.markdown.id} className="menu-list-item">
+                                <Link
+                                    to={`${config.BACKEND_HOST}/markdown/${value.markdown.id}`}
+                                    className="is-link"
+                                >
                                     {value.markdown.title}
                                 </Link>
                             </li>
@@ -60,7 +64,7 @@ const SideNavigation = () => {
                     }
                     return (
                         <li key={key}>
-                            <span>{key}</span>
+                            <span className="has-text-weight-bold">{key}</span>
                             {renderTree(value, `${basePath}/${key}`)}
                         </li>
                     );
@@ -70,10 +74,12 @@ const SideNavigation = () => {
     }
 
     return (
-        <nav className="side-navigation">
-        <h3>Markdown Directory</h3>
-            {tree ? renderTree(tree) : <p>Loading...</p>}
-        </nav>
+        <aside className="menu">
+            <p className="menu-label">Markdown Directory</p>
+            <ul className="menu-list">
+                {tree ? renderTree(tree) : <p>Loading...</p>}
+            </ul>
+        </aside>
     );
 };