fatchan
/
haproxy-panel-next
mirror of https://gitgud.io/fatchan/haproxy-panel-next.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sidebar and mobile menu with links, improved appearance and layout.

Browse Source
develop
Thomas Lynch 1 year ago
parent 216dd1f932
commit e782aa2ae2
8 changed files with 187 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      components/Layout.js
  2. 108
      components/MenuLinks.js
  3. 11
      package-lock.json
  4. 1
      package.json
  5. 11
      pages/_app.js
  6. 2
      pages/account.js
  7. 2
      pages/index.js
  8. 16
      pages/menu.js

54
components/Layout.js
Unescape View File

@ -1,31 +1,55 @@
import Head from 'next/head';
import Link from 'next/link';
import MenuLinks from './MenuLinks';
export default function Layout({ children }) {
return (
<>
<Head>
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1"/>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<div className="container col-lg-6">
<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-2">
<ul className="nav col-4 mb-2 mb-md-0">
<li><Link href="/"><a className="nav-link px-2 link-dark">Home</a></Link></li>
</ul>
<div className="col-8 text-end">
<Link href="/login"><a className="btn btn-outline-primary me-2">Login</a></Link>
<Link href="/register"><a className="btn btn-primary">Register</a></Link>
<div className="row h-100 p-0 m-0">
<div className="col-auto sidebar h-100 m-0 px-0">
<div className="d-flex flex-column flex-shrink-0 p-3 text-bg-dark h-100 overflow-auto" style={{ width: '280px' }}>
<MenuLinks />
</div>
</div>
<div className="col-1 flex-fill m-0 px-0 h-100 overflow-auto">
<div className="p-4 h-100 d-flex flex-column">
<Link href="/menu">
<a className="btn btn-primary mobile-btn mb-4">
Menu
</a>
</Link>
{/*
<header className="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between mb-2 me-5">
<ul className="nav col-4 mb-2 mb-md-0">
<li><Link href="/"><a className="nav-link px-2 link-dark">Home</a></Link></li>
</ul>
<div className="col-8 text-end">
<Link href="/login"><a className="btn btn-outline-primary me-2">Login</a></Link>
<Link href="/register"><a className="btn btn-primary">Register</a></Link>
</div>
</header>
*/}
<main>{children}</main>
<footer className="mt-auto pt-3">
<p className="text-center text-muted">
<a href="https://gitgud.io/fatchan/haproxy-protection/">Open Source Bot Protection</a> + <a href="https://gitgud.io/fatchan/haproxy-panel-next/">Control Panel</a>
</p>
</footer>
</div>
</header>
<main>{children}</main>
</div>
</div>
<footer className="py-3 mt-auto">
<p className="text-center text-muted">
<a href="https://gitgud.io/fatchan/haproxy-protection/">Open Source Bot Protection</a> + <a href="https://gitgud.io/fatchan/haproxy-panel-next/">Control Panel</a>
</p>
</footer>
</>
)
}

108
components/MenuLinks.js
Unescape View File

@ -0,0 +1,108 @@
import Image from 'next/image';
import Link from 'next/link';
import { withRouter } from 'next/router';
export default withRouter(function MenuLinks({ router }) {
return (<>
<Link href="/">
<a className="d-flex align-items-center mb-3 mb-md-0 text-white text-decoration-none">
<Image src="/favicon.ico" width="32" height="32" alt=" " />
<span className="mx-2 fs-4">BasedFlare</span>
</a>
</Link>
<hr />
<ul className="nav nav-pills flex-column mb-auto">
<li className="nav-item">
<Link href="/">
<a className={router.pathname === "/" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-house-door pe-none me-2" width="16" height="16" />
Home
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/account">
<a className={router.pathname === "/account" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-person-square pe-none me-2" width="16" height="16" />
Account
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/domains">
<a className={router.pathname === "/domains" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-card-list pe-none me-2" width="16" height="16" />
Domains
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/hosts">
<a className={router.pathname === "/map/[name]" && router.query.name === "hosts" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-card-checklist pe-none me-2" width="16" height="16" />
Active Domains
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/backends">
<a className={router.pathname === "/map/[name]" && router.query.name === "backends" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-hdd-network pe-none me-2" width="16" height="16" />
Backends
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/ddos">
<a className={router.pathname === "/map/[name]" && router.query.name === "ddos" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-shield-check pe-none me-2" width="16" height="16" />
Protection Rules
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/blocked">
<a className={router.pathname === "/map/[name]" && router.query.name === "blocked" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-person-slash pe-none me-2" width="16" height="16" />
IP Blacklist
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/whitelist">
<a className={router.pathname === "/map/[name]" && router.query.name === "whitelist" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-person-check pe-none me-2" width="16" height="16" />
IP Whitelist
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/map/maintenance">
<a className={router.pathname === "/map/[name]" && router.query.name === "maintenance" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-info-circle pe-none me-2" width="16" height="16" />
Maintenance Mode
</a>
</Link>
</li>
</ul>
<hr className="mt-auto" />
<ul className="nav nav-pills flex-column">
<li className="nav-item">
<Link href="/login">
<a className={router.pathname === "/login" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-door-open pe-none me-2" width="16" height="16" />
Login
</a>
</Link>
</li>
<li className="nav-item">
<Link href="/register">
<a className={router.pathname === "/register" ? "nav-link active" : "nav-link"} aria-current="page">
<i className="bi-person-plus pe-none me-2" width="16" height="16" />
Register
</a>
</Link>
</li>
</ul>
</>);
})

11
package-lock.json generated
Unescape View File

@ -13,6 +13,7 @@
"bcrypt": "^5.1.0",
"body-parser": "^1.20.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"connect-mongo": "^4.6.0",
"cookie-parser": "^1.4.6",
"csurf": "^1.11.0",
@ -2632,6 +2633,11 @@
"@popperjs/core": "^2.11.6"
}
},
"node_modules/bootstrap-icons": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz",
"integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw=="
},
"node_modules/bowser": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz",
@ -11946,6 +11952,11 @@
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"requires": {}
},
"bootstrap-icons": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz",
"integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw=="
},
"bowser": {
"version": "2.11.0",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz",

1
package.json
Unescape View File

@ -18,6 +18,7 @@
"bcrypt": "^5.1.0",
"body-parser": "^1.20.0",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"connect-mongo": "^4.6.0",
"cookie-parser": "^1.4.6",
"csurf": "^1.11.0",

11
pages/_app.js
Unescape View File

@ -1,7 +1,8 @@
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import NProgress from 'nprogress';
import Layout from '../components/Layout.js';
import "nprogress/nprogress.css";
import 'nprogress/nprogress.css';
export default function App({ Component, pageProps }) {
return (
@ -13,6 +14,14 @@ export default function App({ Component, pageProps }) {
.red { color: red; }
footer { margin-top: auto; }
.btn { font-weight: bold; }
.nav-item:not(:first-child) { margin-top: 10px; }
.nav-link { color: white; }
.nav-link:hover { color: #6aa6fd; }
.mobile-btn { display: none; }
@media (max-width: 800px) {
.sidebar { display: none; }
.mobile-btn { display: unset; }
}
@media (prefers-color-scheme: dark) {
:root { --bs-body-color: #fff; --bs-body-bg: #000000; }
.text-muted, a, a:visited, a:hover, .nav-link, .nav-link:hover { color:#fff!important; }

2
pages/account.js
Unescape View File

@ -165,7 +165,7 @@ const Account = (props) => {
Controls:
</h5>
<div className="list-group">
<div className="list-group col-sm-12 col-xl-8 mx-auto">
{innerData}

2
pages/index.js
Unescape View File

@ -7,7 +7,7 @@ const Index = () => (
<title>Homepage</title>
</Head>
<Link href="/account">Account Page</Link>
Welcome to BasedFlare.
</>
);

16
pages/menu.js
Unescape View File

@ -0,0 +1,16 @@
import Head from 'next/head';
import MenuLinks from '../components/MenuLinks';
const Menu = () => (
<>
<Head>
<title>Menu</title>
</Head>
<div className="bg-dark p-4">
<MenuLinks />
</div>
</>
);
export default Menu;
Write Preview
Loading…
Cancel
Save