Feature: Add records section link to fixed menu

Author: fecapark

components/FlexableNav/FlexableNav.styled.ts

@@ -165,6 +165,7 @@ export const ContentContainer = styled.div`
     font-weight: 600;
 
     opacity: 0;
+    transform: translate3d(0, 30px, 0);
     animation: ${getContentFadeKeyframe("30px")} 0.4s cubic-bezier(0.2, 0, 0, 1)
       forwards 0.35s;
   }
@@ -176,6 +177,7 @@ export const ContentContainer = styled.div`
     color: #d2d2d2;
 
     opacity: 0;
+    transform: translate3d(0, 16px, 0);
     animation: ${getContentFadeKeyframe("16px")} 0.4s cubic-bezier(0.2, 0, 0, 1)
       forwards 0.45s;
   }

components/Menu/FixedMenu/FixedMenu.styled.ts

@@ -164,6 +164,9 @@ const FadeContentKeyframe = keyframes`
     opacity: 1;
   }
 `;
+
 export const FadeContentAnimationCSS = css`
   animation: ${FadeContentKeyframe} 0.5s cubic-bezier(0.2, 0, 0, 1) forwards;
 `;
+
+export const SectionLinkItemContainer = styled(SectionItemContainer)``;

components/Menu/FixedMenu/FixedMenu.tsx

@@ -1,4 +1,5 @@
 import {
+  MdAllInbox,
   MdDesktopWindows,
   MdKeyboardArrowLeft,
   MdNotifications,
@@ -23,6 +24,7 @@ import {
   Container,
   MainMenuBar,
   SectionItemContainer,
+  SectionLinkItemContainer,
   SliderContainer,
 } from "./FixedMenu.styled";
 import {
@@ -39,6 +41,7 @@ import TimeSectionContent from "./contents/Time";
 import { useQuery } from "@tanstack/react-query";
 import { getOptionFromDB, OPTION_DB_KEY } from "../../../hooks/useIDB";
 import { useOptionSetEffect } from "../menu.util";
+import Link from "next/link";
 
 function Slider({ children, onClose }: ISliderProps) {
   const sliderRef = useRef<HTMLDivElement>(null);
@@ -47,9 +50,6 @@ function Slider({ children, onClose }: ISliderProps) {
   const [isSliderActive, setIsSliderActive] = useRecoilState(ISA);
   const [isHideTimer] = useMediaMatch(Theme.mediaQueries.hideTimerMaxWidth);
 
-  const { data: optionData } = useQuery([OPTION_DB_KEY], getOptionFromDB);
-  useOptionSetEffect;
-
   const closeSlider = () => {
     setIsSliderActive(false);
   };
@@ -126,6 +126,20 @@ function SectionItem({
   );
 }
 
+function SectionLinkItem({ icon, text, href }: IOpenLinkItemProps) {
+  return (
+    <Link
+      href={href}
+      style={{ textDecoration: "none", WebkitTapHighlightColor: "transparent" }}
+    >
+      <SectionLinkItemContainer active={false}>
+        <div className="icon-wrapper">{icon}</div>
+        <span className="item-text">{text}</span>
+      </SectionLinkItemContainer>
+    </Link>
+  );
+}
+
 function OpenLinkItem({ icon, text, href }: IOpenLinkItemProps) {
   return (
     <SectionItemContainer active={false}>
@@ -163,6 +177,14 @@ export default function FixedMenu() {
       </Slider>
       <MainMenuBar>
         <div className="section">
+          <SectionLinkItem
+            href="/records"
+            icon={<MdAllInbox />}
+            text="Records"
+          />
+
+          <div style={{ height: "24px" }}></div>
+
           <SectionItem
             defaultIcon={<IoMdTime />}
             text={language === "kor" ? "시간" : "Time"}
@@ -189,6 +211,8 @@ export default function FixedMenu() {
             selected={section === "notification"}
             onClick={() => setSection("notification")}
           ></SectionItem>
+
+          <div style={{ height: "24px" }}></div>
         </div>
         <div className="section">
           <OpenLinkItem

components/Record/RecordLogs/RecordLogs.styled.ts

@@ -40,7 +40,7 @@ export const NoLogContainer = styled.div`
   color: #626262;
 
   opacity: 0;
-  transform: translate3d(0, calc(-14px * 4), 0);
+  transform: translate3d(0, calc(-14px * 4 + 30px), 0);
   animation: ${NoLogContainerFadeKeyframe} 0.4s cubic-bezier(0.2, 0, 0, 1) 0.65s
     forwards;
 
@@ -84,6 +84,7 @@ export const CardBox = styled.div<{ borderColor: string }>`
   gap: 48px;
 
   opacity: 0;
+  transform: translate3d(0, 30px, 0);
   animation: ${CardContainerFadeKeyframe} 0.4s cubic-bezier(0.2, 0, 0, 1) 0.65s
     forwards;
 

next.config.js

@@ -11,5 +11,5 @@ const nextConfig = {
   basePath: isDevServer ? "/absproxy/3000" : "",
 };
 
-module.exports = withPWA(nextConfig);
-// module.exports = nextConfig;
+// module.exports = withPWA(nextConfig);
+module.exports = nextConfig;