From f132ef06bb4964e824285cbea05c1a91d269f028 Mon Sep 17 00:00:00 2001
From: ruby10127130 <ruby10127130@gmail.com>
Date: Fri, 18 Oct 2024 16:13:57 +0800
Subject: [PATCH 1/2] feat(terms): add TermsMenu component and refactor layout
 to Flexbox

---
 components/Terms/Ipr.jsx           |   2 +
 components/Terms/Privacypolicy.jsx |   2 +
 components/Terms/Service.jsx       |   2 +
 components/Terms/Terms.styled.jsx  |   6 +-
 components/Terms/TermsMenu.jsx     | 107 +++++++++++++++++++++++++++++
 5 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 components/Terms/TermsMenu.jsx

diff --git a/components/Terms/Ipr.jsx b/components/Terms/Ipr.jsx
index 0421a68..a8dae75 100644
--- a/components/Terms/Ipr.jsx
+++ b/components/Terms/Ipr.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { TermsWrapper, PaperWrapper } from './Terms.styled';
+import TermsMenu from './TermsMenu';
 
 const Terms = () => {
   return (
     <TermsWrapper>
+      <TermsMenu />
       <PaperWrapper>
         <h2>島島阿學資源共享自主學習網站智慧財產權</h2>
         <p>
diff --git a/components/Terms/Privacypolicy.jsx b/components/Terms/Privacypolicy.jsx
index ab8df48..3a3a5c8 100644
--- a/components/Terms/Privacypolicy.jsx
+++ b/components/Terms/Privacypolicy.jsx
@@ -2,10 +2,12 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { Paper } from '@mui/material';
 import { TermsWrapper, PaperWrapper } from './Terms.styled';
+import TermsMenu from './TermsMenu';
 
 const Terms = () => {
   return (
     <TermsWrapper>
+      <TermsMenu />
       <PaperWrapper>
         <h2>島島阿學資源共享自主學習網站隱私權政策</h2>
         <p>
diff --git a/components/Terms/Service.jsx b/components/Terms/Service.jsx
index 303f908..99d4e41 100644
--- a/components/Terms/Service.jsx
+++ b/components/Terms/Service.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import { TermsWrapper, PaperWrapper } from './Terms.styled';
+import TermsMenu from './TermsMenu';
 
 const Terms = () => {
   return (
     <TermsWrapper>
+      <TermsMenu />
       <PaperWrapper>
         <h2>島島阿學資源共享自主學習網站使用者條款</h2>
         <p>
diff --git a/components/Terms/Terms.styled.jsx b/components/Terms/Terms.styled.jsx
index 62238ea..2dfc5f5 100644
--- a/components/Terms/Terms.styled.jsx
+++ b/components/Terms/Terms.styled.jsx
@@ -4,11 +4,15 @@ import { Paper } from '@mui/material';
 export const TermsWrapper = styled.section`
   padding-top: 40px;
   padding-bottom: 40px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
 `;
 
 export const PaperWrapper = styled(Paper)`
   width: min(90%, 800px);
-  margin: 0 auto;
   padding: 40px 20px;
 
   @media (max-width: 767px) {
diff --git a/components/Terms/TermsMenu.jsx b/components/Terms/TermsMenu.jsx
new file mode 100644
index 0000000..0b0254e
--- /dev/null
+++ b/components/Terms/TermsMenu.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+const TermsMenuWrapper = styled.nav`
+  position: sticky;
+  top: 138px;
+  left: 0;
+  padding: 40px 0;
+  margin-right: 1em;
+  background-color: #fff;
+  width: 200px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+
+  @media (max-width: 1040px) {
+    display: none;
+  }
+
+  h2 {
+    margin-bottom: 1em;
+    padding: 0 1em;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    margin-bottom: 10px;
+  }
+
+  a {
+    color: #16b9b3;
+    padding: 0 1em;
+
+    @media (hover: hover) {
+      &:hover {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+      }
+    }
+  }
+
+  .current {
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0em;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 0;
+      height: 0;
+      border-top: 0.5em solid transparent;
+      border-bottom: 0.5em solid transparent;
+      border-left: 0.5em solid #16b9b3;
+      border-right: 0.5em solid transparent;
+    }
+  }
+`;
+
+const TermsMenu = () => {
+  const router = useRouter();
+  const currentPath = router.pathname;
+
+  return (
+    <TermsMenuWrapper>
+      <h2>網站規約</h2>
+      <ul>
+        <li>
+          <Link
+            href="/terms/privacypolicy"
+            className={currentPath === '/terms/privacypolicy' ? 'current' : ''}
+          >
+            隱私權政策
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/terms/ipr"
+            className={currentPath === '/terms/ipr' ? 'current' : ''}
+          >
+            智慧財產權
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/terms/service"
+            className={currentPath === '/terms/service' ? 'current' : ''}
+          >
+            使用者條款
+          </Link>
+        </li>
+      </ul>
+    </TermsMenuWrapper>
+  );
+};
+
+export default TermsMenu;

From 5ee4991769d7a502ec3583538c0cb4a1ce04e097 Mon Sep 17 00:00:00 2001
From: ruby10127130 <ruby10127130@gmail.com>
Date: Fri, 18 Oct 2024 16:15:46 +0800
Subject: [PATCH 2/2] feat: remove unused mui

---
 components/Terms/Privacypolicy.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/Terms/Privacypolicy.jsx b/components/Terms/Privacypolicy.jsx
index 3a3a5c8..0148a4e 100644
--- a/components/Terms/Privacypolicy.jsx
+++ b/components/Terms/Privacypolicy.jsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { Paper } from '@mui/material';
 import { TermsWrapper, PaperWrapper } from './Terms.styled';
 import TermsMenu from './TermsMenu';