chore: デザインの修正

app/components/Drawer/Drawer.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { LanguageButton } from '../LanguageButton/LanguageButton';
 import styles from './drawer.module.css';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
 
 export interface DrawerProps {
   links: Record<'label' | 'to', string>[];
@@ -26,20 +27,29 @@ export const Drawer = ({
 }: DrawerProps) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
+
+  const location = useLocation();
+  const isHome = location.pathname === '/';
 
   useEffect(() => {
     document.documentElement.style.overflow = open ? 'hidden' : '';
   }, [open]);
 
   return (
     <div>
-      <div {...props} onClick={() => setOpen(true)} className={[open ? styles.hidden : '', styles.trigger].join(" ")}>
+      <div 
+        {...props} 
+        onClick={() => setOpen(true)} 
+        className={[open ? styles.hidden : '', styles.trigger, isHome ? styles.isHome : styles.isOther].join(" ")}
+      >
         {children}
       </div>
       <div className={[styles.drawer, open ? styles['drawer-opened']: ''].join(" ")}>
         <div className={styles['button-container']}>
           <FontAwesomeIcon icon={faXmark} className={`${styles.close}`} onClick={() => setOpen(false)}/>
-          <LanguageButton className={styles.lang}/>
+          {
+            isHome && <LanguageButton className={styles.lang}/>
+          }
         </div>
         <div className={styles['link-container']}>
           <h2>{t("header.links")}</h2>

app/components/Drawer/drawer.module.css

@@ -21,6 +21,14 @@
   opacity: 0;
 }
 
+.isHome {
+  color: var(--accent-color);
+}
+
+.isOther {
+  color: var(--grey-text-color);
+}
+
 .button-container {
   width: auto;
   height: max-content;

app/components/Header/Header.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';
 
 const meta = {
-  title: 'Example/Header',
+  title: 'Common/Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],

app/components/Header/Header.tsx

@@ -2,7 +2,7 @@
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router';
 import { useIsMobile } from '~/hooks/useIsMobile';
 import { Drawer } from '../Drawer/Drawer';
 import { HeaderLink } from '../HeaderLink/HeaderLink';
@@ -42,6 +42,9 @@ export const Header = () => {
   const ignoreScroll = useRef<boolean>(false);
   const ignoreTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const location = useLocation();
+  const isHome = location.pathname === '/';
+
   const navigate = useNavigate();
 
   const handleScroll = useCallback(() => {
@@ -129,7 +132,9 @@ export const Header = () => {
                 to={header.to}/>
             ))
           }
-          <LanguageButton className={styles['language-button']}/>
+          {
+            isHome && <LanguageButton className={styles['language-button']}/>
+          }
         </header>
         )
       }

app/components/Header/header.module.css

@@ -36,5 +36,4 @@ header {
 .bars {
   font-size: 42px;
   transition: opacity 0.5s ease, transform 0.5s ease;
-  color: var(--accent-color);
 }

app/components/LinkedButton/LinkedButton.tsx

@@ -2,13 +2,17 @@ import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useTranslation } from "react-i18next";
 import './LinkedButton.css';
+import type { ReactNode } from "react";
 
 export interface LinkedButtonProps {
     url: string;
     label: TemplateLabel | string;
     backgroundColor?: string;
     color?: string;
     style?: "default" | "outlined";
+    children?: ReactNode;
+    buttonLocation?: "left" | "right";
+    isNewTab?: boolean;
 }
 
 export type TemplateLabel = 'detail' | 'list';
@@ -24,11 +28,16 @@ export const LinkedButton = ({
     backgroundColor = "var(--primery-color)",
     color = "var(--accent-color)",
     style = "default",
+    children,
+    buttonLocation,
+    isNewTab = true,
     ...props
 }: LinkedButtonProps) => {
     const { t } = useTranslation();
     const displayLabel = label in templateLabel ? t(templateLabel[label as TemplateLabel]) : label
 
+    const targetProps = isNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+
     const linkStyle = {
         backgroundColor: style === "default" ? backgroundColor : "transparent",
         color: backgroundColor,
@@ -46,9 +55,14 @@ export const LinkedButton = ({
     };
 
     return (
-        <a href={url} className="Button-link" style={linkStyle} target="_blank" rel="noopener noreferrer" {...props}>
+        <a href={url} className="Button-link" style={linkStyle} {...targetProps} {...props}>
+            {
+                (buttonLocation === "left" && children) ?? <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
+            }
             <span className="Button-label" style={wordStyle}>{displayLabel}</span>
-            <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
+            {
+                ((buttonLocation ?? "right") === "right" && children) ?? <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
+            }
         </a>
     );
 }

app/routes/blog/$id.module.scss

@@ -7,34 +7,147 @@
   justify-content: center;
   background-color: #F5F5F5;
 
-  .article {
-    padding-top: 64px;
-    width: 100%;
-    max-width: 1200px;
-  }
-
   .side {
     padding-top: 200px;
     width: 20%;
+
+    &.mobile {
+      border-radius: 4px;
+      margin-top: 64px;
+      padding-top: 20px;
+      width: 100%;
+
+      .h1-table {
+        color: #616161;
+      }
+      .h2-table {
+        color: #8a8a8a;
+
+        & > li {
+          padding-left: 24px;
+          border-left: solid 1px #8a8a8a;
+        }
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          height: 50%;
+          width: 12px;
+          border-bottom: solid 1px #8a8a8a;
+        }
+
+        &:not(:has(+ .h2-table)) {
+
+          &::before {
+            border-left: solid 1px #8a8a8a;
+          }
+
+          & li {
+            border-left: none;
+          }
+        }
+      }
+    }
+
+    ul {
+      top: 200px;
+      list-style: none;
+      position: sticky;
+
+      a {
+        position: relative;
+
+        li {
+          margin: 0;
+          padding-top: 4px;
+          padding-bottom: 4px;
+          font-size: 16px;
+        }
+      }
+    }
   }
-
-  ul {
-    top: 200px;
-    list-style: none;
-    position: sticky;
-  }
-
-  li {
-    font-size: 16px;
-  }
-
+
   .h1-table {
     color: #616161;
   }
   .h2-table {
     color: #8a8a8a;
-    li {
+
+    & > li {
       padding-left: 24px;
+      border-left: solid 1px #8a8a8a;
+    }
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      height: 50%;
+      width: 12px;
+      border-bottom: solid 1px #8a8a8a;
+    }
+
+    &:not(:has(+ .h2-table)) {
+
+      &::before {
+        border-left: solid 1px #8a8a8a;
+      }
+
+      & li {
+        border-left: none;
+      }
+    }
+  }
+
+  .article {
+    padding-top: 64px;
+    width: 100%;
+    max-width: 1200px;
+
+    h1 {
+      color: var(--main-text-color);
+      font-weight: 900;
+      font-size: 52px;
+    }
+
+    h2 {
+      color: var(--main-text-color);
+      font-weight: 700;
+      font-size: 32px;
+    }
+
+    h3 {
+      color: var(--main-text-color);
+      font-weight: 600;
+      font-size: 24px;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      padding-left: 8px;
+      padding-bottom: 4px;
+      margin-bottom: 24px;
+      margin-top: 24px;
+      position: relative;
+      color: var(--main-text-color);
+      text-box-edge: cap alphabetic;
+    }
+
+    h1::before, h2::before {
+      content: "";
+      position: absolute;
+      display: block;
+      left: -24px;
+      width: 12px;
+      height: 100%;
+      background-color: var(--primery-color);
+    }
+
+    p {
+      color: var(--main-text-color);
+      letter-spacing: 2px;
+      font-size: 20px;
+      margin: 20px 0;
     }
   }
 
@@ -47,6 +160,13 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+
+    .backButton {
+      width: 100%;
+      display: flex;
+      justify-content: start;
+      margin-bottom: 24px;
+    }
   }
 
   .header-img {
@@ -56,51 +176,6 @@
     border-radius: 12px;
     box-shadow: 0 10px 10px #20202011;
   }
-
-  h1 {
-    color: var(--main-text-color);
-    font-weight: 900;
-    font-size: 52px;
-  }
-
-  h2 {
-    color: var(--main-text-color);
-    font-weight: 700;
-    font-size: 32px;
-  }
-
-  h3 {
-    color: var(--main-text-color);
-    font-weight: 600;
-    font-size: 24px;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    padding-left: 8px;
-    padding-bottom: 4px;
-    margin-bottom: 24px;
-    margin-top: 24px;
-    position: relative;
-    color: var(--main-text-color);
-    text-box-edge: cap alphabetic;
-  }
-
-  h1::before, h2::before {
-    content: "";
-    position: absolute;
-    display: block;
-    left: -24px;
-    width: 12px;
-    height: 100%;
-    background-color: var(--primery-color);
-  }
-
-  p {
-    color: var(--main-text-color);
-    letter-spacing: 2px;
-    font-size: 20px;
-    margin: 20px 0;
-  }
 }
 
 @media screen and (max-width: 700px) {