Compare commits
1 Commits
8bae53d026
...
788fd2f37a
| Author | SHA1 | Date | |
|---|---|---|---|
| 788fd2f37a |
@@ -5,22 +5,53 @@
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.main-navigation ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.main-navigation .navbar {
|
||||
background-color: #333 !important;
|
||||
}
|
||||
|
||||
.main-navigation ul li {
|
||||
margin-right: 1rem;
|
||||
.main-navigation .navbar-item {
|
||||
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 {
|
||||
text-decoration: underline;
|
||||
.main-navigation .navbar-burger:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.main-navigation .navbar-item:not(:last-child) {
|
||||
border-right: 1px solid #555;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@@ -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">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Home</Link>
|
||||
</li>
|
||||
{ user && user.profile ? (
|
||||
<div>
|
||||
<h1>{user.profile.name}</h1>
|
||||
<button onClick={logout}>logout</button>
|
||||
</div>
|
||||
) : (
|
||||
<li>
|
||||
<button onClick={login}>Login</button>
|
||||
</li>
|
||||
)
|
||||
<nav className="navbar is-dark" role="navigation" aria-label="main navigation">
|
||||
<div className="navbar-brand">
|
||||
<Link className="navbar-item" to="/">
|
||||
Home
|
||||
</Link>
|
||||
<a
|
||||
role="button"
|
||||
className="navbar-burger"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
data-target="navbarBasicExample"
|
||||
onClick={(e) => {
|
||||
e.currentTarget.classList.toggle("is-active");
|
||||
document
|
||||
.getElementById("navbarBasicExample")
|
||||
.classList.toggle("is-active");
|
||||
}}
|
||||
>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
<li>
|
||||
<a href="https://mail.hangman-lab.top" target="_blank" rel="noopener noreferrer">
|
||||
<div id="navbarBasicExample" className="navbar-menu">
|
||||
<div className="navbar-start">
|
||||
<a
|
||||
href="https://mail.hangman-lab.top"
|
||||
className="navbar-item"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
MailBox
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.hangman-lab.top" target="_blank" rel="noopener noreferrer">
|
||||
<a
|
||||
href="https://git.hangman-lab.top"
|
||||
className="navbar-item"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Git
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user