upgrade to bulma style

src/components/Navigations/MainNavigation.css

@@ -5,22 +5,53 @@
     padding: 1rem;
 }
 
-.main-navigation ul {
+.main-navigation .navbar {
-    display: flex;
+    background-color: #333 !important;
-    list-style: none;
-    margin: 0;
-    padding: 0;
 }
 
-.main-navigation ul li {
+.main-navigation .navbar-item {
-    margin-right: 1rem;
+    color: white !important;
+    font-weight: bold;
 }
 
-.main-navigation ul li a {
+.main-navigation .navbar-item:hover {
+    background-color: #444 !important;
+    color: #f5f5f5 !important;
+}
+
+.main-navigation .button {
+    margin-left: 0.5rem;
+}
+
+.main-navigation .button.is-primary {
+    background-color: #007BFF;
+    border-color: #0056b3;
+}
+
+.main-navigation .button.is-primary:hover {
+    background-color: #0056b3;
+    border-color: #003f7f;
+}
+
+.main-navigation .button.is-danger {
+    background-color: #e3342f;
+    border-color: #a21c1c;
+}
+
+.main-navigation .button.is-danger:hover {
+    background-color: #a21c1c;
+    border-color: #6c0e0e;
+}
+
+.main-navigation .navbar-burger {
     color: white;
-    text-decoration: none;
 }
 
-.main-navigation ul li a:hover {
+.main-navigation .navbar-burger:hover {
-    text-decoration: underline;
+    background-color: #444;
+}
+
+.main-navigation .navbar-item:not(:last-child) {
+    border-right: 1px solid #555;
+    padding-right: 1rem;
 }

src/components/Navigations/MainNavigation.js

@@ -1,42 +1,77 @@
-//src/components/MainNavigation.js
+import React, { useContext } from "react";
-
-import React, {useContext} from "react";
 import { Link } from "react-router-dom";
-import "./MainNavigation.css";
+import { AuthContext } from "../../AuthProvider";
-import {AuthContext} from "../../AuthProvider";
+import "bulma/css/bulma.min.css";
 
 const MainNavigation = () => {
     const { user, login, logout } = useContext(AuthContext);
+
     return (
-        <nav className="main-navigation">
+        <nav className="navbar is-dark" role="navigation" aria-label="main navigation">
-            <ul>
+            <div className="navbar-brand">
-                <li>
+                <Link className="navbar-item" to="/">
-                    <Link to="/">Home</Link>
+                    Home
-                </li>
+                </Link>
-                { user && user.profile ? (
+                <a
-                    <div>
+                    role="button"
-                        <h1>{user.profile.name}</h1>
+                    className="navbar-burger"
-                        <button onClick={logout}>logout</button>
+                    aria-label="menu"
-                    </div>
+                    aria-expanded="false"
-                ) : (
+                    data-target="navbarBasicExample"
-                    <li>
+                    onClick={(e) => {
-                        <button onClick={login}>Login</button>
+                        e.currentTarget.classList.toggle("is-active");
-                    </li>
+                        document
-                )
+                            .getElementById("navbarBasicExample")
+                            .classList.toggle("is-active");
+                    }}
+                >
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
 
-                }
+            <div id="navbarBasicExample" className="navbar-menu">
-
+                <div className="navbar-start">
-                <li>
+                    <a
-                <a href="https://mail.hangman-lab.top" target="_blank" rel="noopener noreferrer">
+                        href="https://mail.hangman-lab.top"
+                        className="navbar-item"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
                         MailBox
                     </a>
-                </li>
+                    <a
-                <li>
+                        href="https://git.hangman-lab.top"
-                    <a href="https://git.hangman-lab.top" target="_blank" rel="noopener noreferrer">
+                        className="navbar-item"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
                         Git
                     </a>
-                </li>
+                </div>
-            </ul>
+
+                <div className="navbar-end">
+                    {user && user.profile ? (
+                        <div className="navbar-item">
+                            <div className="buttons">
+                                <span className="button is-primary is-light">
+                                    {user.profile.name}
+                                </span>
+                                <button className="button is-danger" onClick={logout}>
+                                    Logout
+                                </button>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="navbar-item">
+                            <button className="button is-primary" onClick={login}>
+                                Login
+                            </button>
+                        </div>
+                    )}
+                </div>
+            </div>
         </nav>
     );
 };

src/components/Navigations/SideNavigation.css

@@ -1,29 +1,60 @@
-/*src/components/SideNavigation.css*/
+/* src/components/SideNavigation.css */
 .side-navigation {
     width: 250px;
-    background-color: #f4f4f4;
+    background-color: #ffffff;
     padding: 1rem;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid #dbdbdb;
+    height: 100%;
+    overflow-y: auto;
+    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 }
 
 .side-navigation h3 {
-    margin-top: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: #4a4a4a;
+    margin-bottom: 0.75rem;
+    border-bottom: 1px solid #dbdbdb;
+    padding-bottom: 0.5rem;
 }
 
 .side-navigation ul {
     list-style: none;
     padding: 0;
+    margin: 0;
 }
 
 .side-navigation ul li {
     margin-bottom: 0.5rem;
+    transition: background-color 0.3s ease, padding-left 0.3s ease;
+}
+
+.side-navigation ul li:hover {
+    background-color: #f5f5f5;
+    padding-left: 10px;
 }
 
 .side-navigation ul li a {
     text-decoration: none;
-    color: #333;
+    color: #3273dc;
+    font-weight: 500;
+    display: inline-block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    transition: color 0.3s ease, background-color 0.3s ease;
 }
 
 .side-navigation ul li a:hover {
-    text-decoration: underline;
+    text-decoration: none;
+    color: #ffffff;
+    background-color: #3273dc;
+}
+
+.side-navigation ul li span {
+    font-weight: 700;
+    color: #363636;
+    margin-bottom: 0.5rem;
+    display: inline-block;
+    padding: 0.5rem 0.75rem;
 }

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"]}>
-                    <PermissionGuard rolesRequired={["admin", "creator"]} >
+                    <li>
-                        <Link to="/markdown/create">Create New Markdown</Link>
+                        <Link
-                    </PermissionGuard>
+                            to="/markdown/create"
-
+                            className="button is-primary is-small"
-                </li>
+                        >
+                            Create New Markdown
+                        </Link>
+                    </li>
+                </PermissionGuard>
                 {Object.entries(node).map(([key, value]) => {
                     if (value.markdown) {
                         return (
-                            <li key={value.markdown.id}>
+                            <li key={value.markdown.id} className="menu-list-item">
-                                <Link to={`${config.BACKEND_HOST}/markdown/${value.markdown.id}`}>
+                                <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">
+        <aside className="menu">
-        <h3>Markdown Directory</h3>
+            <p className="menu-label">Markdown Directory</p>
-            {tree ? renderTree(tree) : <p>Loading...</p>}
+            <ul className="menu-list">
-        </nav>
+                {tree ? renderTree(tree) : <p>Loading...</p>}
+            </ul>
+        </aside>
     );
 };