update,

2025-01-31 19:47:49 +08:00
parent 32bc49f19a
commit 893eaee67b
129 changed files with 71057 additions and 0 deletions
--- a/givefortune/task3-quote/src/Drawer_NewNavBar.js
+++ b/givefortune/task3-quote/src/Drawer_NewNavBar.js
@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import {
+  Drawer,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import MenuTwoToneIcon from "@mui/icons-material/MenuTwoTone";
+import { Link } from "react-router-dom";
+
+const navButton = [
+  { 登記待領動物: "https://forms.gle/HESZBGAgCoJqW2xp9" },
+  {
+    報失寵物:
+      "https://docs.google.com/forms/d/e/1FAIpQLScomQJmP_29GITVpcB5ipMJGoQhDMGBElZc-WtsRhrLRC2tbw/viewform?usp=sharing",
+  },
+];
+
+const pages = [
+  { 主頁: "Home" },
+  { 關於我們: "About_us" },
+  { 待領養動物: "Category_Page" },
+  { 領養須知: "Adoption_Info_Page" },
+];
+
+const Drawercomp = () => {
+  const [openDrawer, setopenDrawer] = useState(false);
+  return (
+    <React.Fragment>
+      <Drawer open={openDrawer} onClose={() => setopenDrawer(false)}>
+        <List sx={{ width: 130, margin: "5px" }}>
+          {pages.map((page, index) => (
+            <ListItemButton onClick={() => setopenDrawer(false)} key={index}>
+              <ListItemIcon>
+                <Link
+                  style={{ textDecoration: "none" }}
+                  key={Object.values(page)}
+                  to={`/${Object.values(page)}`}
+                >
+                  <ListItemText sx={{ color: "#A53F2B" }}>
+                    {Object.keys(page)}
+                  </ListItemText>
+                </Link>
+              </ListItemIcon>
+            </ListItemButton>
+          ))}
+          {navButton.map((navbtn, index) => (
+            <ListItemButton onClick={() => setopenDrawer(false)} key={index}>
+              <ListItemIcon>
+                <a
+                  href={`${Object.values(navbtn)}`}
+                  style={{ textDecoration: "none" }}
+                >
+                  <ListItemText sx={{ color: "#A53F2B" }}>
+                    {Object.keys(navbtn)}
+                  </ListItemText>
+                </a>
+              </ListItemIcon>
+            </ListItemButton>
+          ))}
+        </List>
+      </Drawer>
+      <IconButton
+        sx={{ color: "white", marginLeft: "auto" }}
+        onClick={() => setopenDrawer(!openDrawer)}
+      >
+        <MenuTwoToneIcon sx={{ color: "#A53F2B" }} />
+      </IconButton>
+    </React.Fragment>
+  );
+};
+
+export default Drawercomp;