Merge branch 'dev'

Author: The-Infinitys

public/The-Infinite.svg

@@ -56,6 +56,7 @@ header a {
   font-style: italic;
   font-weight: 600;
   padding: 1em;
+  padding-left: 0;
   text-decoration: none;
 }
 

src/app/globals.css

@@ -3,8 +3,9 @@
 import { Chakra_Petch } from "next/font/google";
 import Link from "next/link";
 import Image from "next/image"; // Import Image component
+import TheInfiniteImage from "../../../public/The-Infinite.svg";
 import React, { useState } from "react";
-
+import { TheInfiniteX } from "./img";
 const chakraPetch = Chakra_Petch({
   variable: "--font-chakra-petch",
   subsets: ["latin"],
@@ -15,10 +16,17 @@ const menus_list = [
   {
     name: "Home",
     link: "/",
+    target: "_self",
   },
   {
     name: "Articles",
     link: "/article",
+    target: "_self",
+  },
+  {
+    img: TheInfiniteX,
+    link: "https://x.com",
+    target: "_blank",
   },
 ];
 
@@ -38,26 +46,34 @@ export default function Header() {
     // Added padding, flex layout for alignment
     <header className="p-4 flex justify-between items-center relative">
       {/* Title */}
-      <h1
-        className={`${chakraPetch.className} italic font-semibold text-3xl`} // Use Tailwind classes
+      <div
         style={{
-          fontStyle: "italic",
-          fontWeight: "600",
-          fontSize: "32px", // Use text-3xl or similar
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
         }}
       >
-        <Link
-          href="/"
-          onClick={handleLinkClick}
+        <Image src={TheInfiniteImage} alt="" width={30} height={30} />
+        <h1
+          className={`${chakraPetch.className} italic font-semibold text-3xl`} // Use Tailwind classes
           style={{
-            color: "var(--foreground)",
+            fontStyle: "italic",
+            fontWeight: "600",
+            fontSize: "32px", // Use text-3xl or similar
           }}
         >
-          {"The Infinity's"}
-          {/* Added Link here for consistency */}
-        </Link>
-      </h1>
-
+          <Link
+            href="/"
+            onClick={handleLinkClick}
+            style={{
+              color: "var(--foreground)",
+            }}
+          >
+            {"The Infinity's"}
+            {/* Added Link here for consistency */}
+          </Link>
+        </h1>
+      </div>
       {/* Hamburger Button - Hidden on md and larger screens */}
       <button
         onClick={toggleMenu}
@@ -81,32 +97,33 @@ export default function Header() {
         className={`
           ${
             isMenuOpen ? "opacity-100 max-h-screen" : "opacity-0 max-h-0"
-          } md:opacity-100 md:max-h-none /* Show/hide based on state and screen size */
-          transition-all duration-300 ease-in-out /* Smooth animation */
+          } md:opacity-100 md:max-h-none
+          transition-all duration-300 ease-in-out
           fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-100%
-          bg-[var(--primary)] md:bg-transparent /* Background for mobile */
-          z-20 /* Ensure menu is below header content but above main */
-          overflow-hidden /* Prevent content overflow during animation */
-          flex flex-col md:flex-row items-center justify-center md:justify-end /* Center items for mobile, right-align for desktop */
+          bg-[var(--primary)] md:bg-transparent
+          z-20 overflow-hidden
+          flex flex-col md:flex-row items-center justify-center md:justify-end
         `}
       >
         <ul
           className={`
-            flex flex-col md:flex-row md:space-x-6 /* Layout adjustments */
-            items-center /* Center items for better mobile view */
-            p-4 md:p-0 /* Padding for mobile */
+            flex flex-col md:flex-row md:space-x-6
+            items-center
+            p-4 md:p-0
           `}
         >
           {menus_list.map((menu, index) => (
             <li key={index}>
               <Link
                 href={menu.link}
                 onClick={handleLinkClick}
+                target={menu.target} // target属性を追加
                 className={`${chakraPetch.className} block py-2 md:py-0 hover:text-[var(--foreground)]`}
                 style={{
                   fontStyle: "italic",
                 }}
               >
+                {menu.img && menu.img}
                 {menu.name}
               </Link>
             </li>

src/app/layout/header.tsx

@@ -0,0 +1,48 @@
+export const TheInfiniteX = (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="251.54369"
+    height="89.94669"
+    viewBox="0,0,251.54369,89.94669"
+    fill="var(--foreground)"
+    stroke="none"
+    style={{
+      width: "auto",
+      height: "1em",
+    }}
+  >
+    <g transform="translate(-114.86424,-135.02666)">
+      <g strokeMiterlimit="10">
+        <path
+          d="M321.98668,219.12827v5.84509h-44.97334v-5.84509z"
+          strokeWidth="0"
+        />
+        <path
+          d="M205.22406,219.12827v5.84509h-44.97334v-5.84509z"
+          strokeWidth="0"
+        />
+        <path
+          d="M231.62877,186.88706l-35.63506,-51.8604h26.20781l23.99671,34.92281l30.04348,-34.92281h7.76462l-34.361,39.93932l34.361,50.00737h-26.20781l-22.72259,-33.06978l-28.44957,33.06978h-7.76418l32.76468,-38.08629zM242.26157,174.5235l-23.71287,-33.91756h-11.92601l29.05884,41.56549l3.48148,4.97961l22.35499,31.97723h11.926l-27.70095,-39.62325l-3.48148,-4.97961z"
+          strokeWidth="1"
+        />
+        <path
+          d="M348.39137,186.88706l-35.63505,-51.8604h26.20781l23.99671,34.92281l3.44709,5.01651l-14.56939,16.93759l-28.44956,33.06978h-7.76418l32.76468,-38.08629zM359.02417,174.5235l-23.71286,-33.91756h-11.926l29.05882,41.56549l6.58005,-7.64602z"
+          strokeWidth="1"
+        />
+        <path
+          d="M277.01334,140.87176v-5.84509h44.97334v5.84509z"
+          strokeWidth="0"
+        />
+        <path
+          d="M114.86614,186.88706l14.56946,-16.93759l30.04348,-34.92281h7.76462l-34.361,39.93932l34.361,50.00737h-26.20781l-22.72258,-33.06978l-3.44907,-5.01651zM122.4004,187.15104l22.35499,31.97723h11.926l-27.70095,-39.62325z"
+          strokeWidth="1"
+        />
+        <path
+          d="M160.25073,140.87176v-5.84509h44.97334v5.84509z"
+          strokeWidth="0"
+        />
+      </g>
+    </g>
+  </svg>
+);