From 502eb3993e7e0c9db05e72c5436defdb4d2bc2b9 Mon Sep 17 00:00:00 2001
From: zjrwtx <3038880699@qq.com>
Date: Thu, 26 Sep 2024 00:34:00 +0800
Subject: [PATCH] test the image navbar
---
src/components/Navbar copy.css | 89 +++++++++++++++++++++++++++
src/components/Navbar copy.tsx | 62 +++++++++++++++++++
src/components/Navbar.css | 107 +++++++++++++++++++++++++++++++++
src/components/Navbar.tsx | 73 +++++++++++++---------
4 files changed, 302 insertions(+), 29 deletions(-)
create mode 100644 src/components/Navbar copy.css
create mode 100644 src/components/Navbar copy.tsx
diff --git a/src/components/Navbar copy.css b/src/components/Navbar copy.css
new file mode 100644
index 0000000..f8689bf
--- /dev/null
+++ b/src/components/Navbar copy.css
@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap');
+.nav-icon {
+ margin-right: 8px;
+ font-size: 1em;
+ vertical-align: middle;
+}
+
+
+.apple-navbar {
+ /* background-color: rgba(255, 255, 255, 0.8); */
+ background-color: rgba(245, 245, 220,0.8);
+ backdrop-filter: saturate(180%) blur(20px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 0;
+ display: flex;
+ justify-content: center;
+}
+
+.apple-brand {
+ padding: 0 20px;
+ margin-right: auto;
+}
+
+.apple-logo {
+ height: 68px;
+ width: auto;
+}
+
+.apple-nav {
+ font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin-right: auto;
+}
+
+.apple-nav .nav-link,
+.apple-nav .dropdown-toggle {
+ display: flex;
+ align-items: center;
+ color: #000;
+ font-size: 20px;
+ font-weight: 300;
+ padding: 12px 20px;
+ transition: opacity 0.2s ease;
+}
+
+
+.apple-nav .nav-link:hover,
+.apple-nav .dropdown-toggle:hover {
+ opacity: 0.65;
+}
+
+.apple-nav .dropdown-menu {
+ background-color: rgba(255, 255, 255, 0.8);
+ backdrop-filter: saturate(180%) blur(20px);
+ border: none;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.apple-nav .dropdown-item {
+ color: #000;
+ font-size: 18px;
+ font-weight: 300;
+ padding: 10px 20px;
+}
+
+.apple-nav .dropdown-item:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.apple-toggler {
+ border: none;
+ padding: 0 20px;
+}
+
+.apple-toggler:focus {
+ box-shadow: none;
+}
+
+@media (max-width: 991px) {
+ .apple-navbar {
+ padding: 10px 0;
+ justify-content: flex-start;
+ }
+
+ .apple-nav .nav-link,
+ .apple-nav .dropdown-toggle {
+ padding: 10px 20px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Navbar copy.tsx b/src/components/Navbar copy.tsx
new file mode 100644
index 0000000..42716c3
--- /dev/null
+++ b/src/components/Navbar copy.tsx
@@ -0,0 +1,62 @@
+
+import Nav from "react-bootstrap/Nav";
+import BootstrapNavbar from "react-bootstrap/Navbar";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import { Link } from "react-router-dom";
+import Pages from "../pages.ts";
+import { Container } from "react-bootstrap";
+import "./Navbar.css"; // æ·»åŠ è¿™è¡Œæ¥å¼•å…¥è‡ªå®šä¹‰ CSS 文件的1
+
+export function Navbar() {
+ const pages = Pages.map((item, pageIndex) => {
+ if ("folder" in item && item.folder) {
+ const folderItems = item.folder.map((subpage, subpageIndex) => {
+ if (subpage.path) {
+ return (
+ <NavDropdown.Item
+ key={`subpage-${pageIndex}-${subpageIndex}`}
+ as={Link}
+ to={subpage.path}
+ className="custom-dropdown-menu"
+ >
+ {subpage.name}
+ </NavDropdown.Item>
+ );
+ }
+ });
+ return (
+ <NavDropdown
+ key={`page-${pageIndex}`}
+ title={item.name}
+ id="basic-nav-dropdown"
+ className="custom-dropdown-menu"
+ >
+ {folderItems}
+ </NavDropdown>
+ );
+ } else if ("path" in item && item.path) {
+ return (
+ <Nav.Link
+ key={`page-${pageIndex}`} as={Link} to={item.path}
+ className="custom-dropdown-menu"
+ >
+ {item.name}
+ </Nav.Link>
+ );
+ }
+ });
+
+ return (
+ <BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
+ <Container fluid>
+ <BootstrapNavbar.Brand as={Link} to="/" className="apple-brand">
+ <img src="https://static.igem.wiki/teams/5378/lesser-panda/logo.webp" className="apple-logo" alt="Logo" />
+ </BootstrapNavbar.Brand>
+ <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" className="apple-toggler" />
+ <BootstrapNavbar.Collapse id="basic-navbar-nav">
+ <Nav className="ms-auto apple-nav">{pages}</Nav>
+ </BootstrapNavbar.Collapse>
+ </Container>
+ </BootstrapNavbar>
+ );
+}
\ No newline at end of file
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 298cc49..cb48fae 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -86,4 +86,111 @@
.apple-nav .dropdown-toggle {
padding: 10px 20px;
}
+}@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500&display=swap');
+
+.apple-navbar {
+ background-color: rgba(245, 245, 220, 0.8);
+ backdrop-filter: saturate(180%) blur(20px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 0;
+ display: flex;
+ justify-content: center;
+}
+
+.apple-brand {
+ padding: 0 20px;
+ margin-right: auto;
+}
+
+.apple-logo {
+ height: 68px;
+ width: auto;
+}
+
+.apple-nav {
+ font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin-right: auto;
+}
+
+.nav-item {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ text-align: center;
+}
+
+.nav-icon {
+ width: 24px;
+ height: 24px;
+ margin-bottom: 4px;
+}
+
+.nav-text {
+ font-size: 12px;
+ font-weight: 300;
+}
+
+.apple-nav .nav-link,
+.apple-nav .dropdown-toggle {
+ color: #000;
+ padding: 12px 20px;
+ transition: opacity 0.2s ease;
+}
+
+.apple-nav .nav-link:hover,
+.apple-nav .dropdown-toggle:hover {
+ opacity: 0.65;
+}
+
+.apple-nav .dropdown-menu {
+ background-color: rgba(255, 255, 255, 0.8);
+ backdrop-filter: saturate(180%) blur(20px);
+ border: none;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.apple-nav .dropdown-item {
+ color: #000;
+ font-size: 14px;
+ font-weight: 300;
+ padding: 10px 20px;
+}
+
+.apple-nav .dropdown-item:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.apple-toggler {
+ border: none;
+ padding: 0 20px;
+}
+
+.apple-toggler:focus {
+ box-shadow: none;
+}
+
+@media (max-width: 991px) {
+ .apple-navbar {
+ padding: 10px 0;
+ justify-content: flex-start;
+ }
+
+ .apple-nav .nav-link,
+ .apple-nav .dropdown-toggle {
+ padding: 10px 20px;
+ }
+
+ .nav-item {
+ flex-direction: row;
+ }
+
+ .nav-icon {
+ margin-right: 8px;
+ margin-bottom: 0;
+ }
+
+ .nav-text {
+ font-size: 16px;
+ }
}
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 42716c3..a3c0e06 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,50 +1,65 @@
-
+import React from 'react';
import Nav from "react-bootstrap/Nav";
import BootstrapNavbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import { Link } from "react-router-dom";
-import Pages from "../pages.ts";
+import Pages from "../pages";
import { Container } from "react-bootstrap";
-import "./Navbar.css"; // æ·»åŠ è¿™è¡Œæ¥å¼•å…¥è‡ªå®šä¹‰ CSS 文件的1
+import "./Navbar.css";
export function Navbar() {
- const pages = Pages.map((item, pageIndex) => {
- if ("folder" in item && item.folder) {
- const folderItems = item.folder.map((subpage, subpageIndex) => {
- if (subpage.path) {
- return (
- <NavDropdown.Item
- key={`subpage-${pageIndex}-${subpageIndex}`}
- as={Link}
- to={subpage.path}
- className="custom-dropdown-menu"
- >
- {subpage.name}
- </NavDropdown.Item>
- );
- }
- });
+ const renderNavItem = (item: any, pageIndex: number, isSubItem: boolean = false) => {
+ if (item.folder) {
+ const folderItems = item.folder.map((subpage: any, subpageIndex: number) =>
+ renderNavItem(subpage, subpageIndex, true)
+ );
return (
<NavDropdown
key={`page-${pageIndex}`}
- title={item.name}
- id="basic-nav-dropdown"
- className="custom-dropdown-menu"
+ title={
+ <span className="nav-item">
+ <img src={`/icons/${item.name.toLowerCase()}.png`} alt={item.name} className="nav-icon" />
+ <span className="nav-text">{item.name}</span>
+ </span>
+ }
+ id={`dropdown-${item.name.toLowerCase()}`}
+ className="custom-dropdown"
>
{folderItems}
</NavDropdown>
);
- } else if ("path" in item && item.path) {
- return (
- <Nav.Link
- key={`page-${pageIndex}`} as={Link} to={item.path}
- className="custom-dropdown-menu"
+ } else if (item.path) {
+ const content = (
+ <span className="nav-item">
+ <img src={`/icons/${item.name.toLowerCase()}.png`} alt={item.name} className="nav-icon" />
+ <span className="nav-text">{item.name}</span>
+ </span>
+ );
+
+ return isSubItem ? (
+ <NavDropdown.Item
+ key={`subpage-${pageIndex}`}
+ as={Link}
+ to={item.path}
+ className="custom-dropdown-item"
>
- {item.name}
+ {content}
+ </NavDropdown.Item>
+ ) : (
+ <Nav.Link
+ key={`page-${pageIndex}`}
+ as={Link}
+ to={item.path}
+ className="custom-nav-link"
+ >
+ {content}
</Nav.Link>
);
}
- });
+ return null;
+ };
+
+ const pages = Pages.map((item, index) => renderNavItem(item, index));
return (
<BootstrapNavbar expand="lg" className="apple-navbar" fixed="top">
--
GitLab