footerを追加, 下部のpaddingを追加

Author: na-trium-144

app/(docs)/@chat/chat/[chatId]/chatArea.tsx

@@ -27,7 +27,7 @@ export function ChatAreaContainer(props: {
         "has-chat-1:shadow-md has-chat-1:bg-base-200",
         // navbar(z-40)よりは下、ChatListForSectionのdropdown(デフォルトでz-999だがz-30に変えている)よりも上
         "z-35",
-        "p-4",
+        "p-4 pb-16",
         "flex flex-col",
         "overflow-y-auto"
       )}

app/(docs)/@docs/[lang]/[pageId]/pageContent.tsx

@@ -146,7 +146,7 @@ export function PageContent(props: PageContentProps) {
   const [isFormVisible, setIsFormVisible] = useState(false);
 
   return (
-    <div className="flex-1 p-4 flex flex-col">
+    <div className="flex-1 p-4 pb-16 flex flex-col">
       <div
         className="max-w-full mx-auto grid"
         style={{

app/footer.tsx

@@ -0,0 +1,48 @@
+export function Footer() {
+  return (
+    <footer className="footer sm:footer-horizontal bg-neutral text-neutral-content p-10 z-30">
+      <aside>
+        <h6 className="flex gap-2 items-center">
+          <img src="/icon.svg" alt="my.code(); Logo" className="w-12 h-12" />
+          <span className="text-3xl font-semibold font-mono drop-shadow-sm">
+            my.code();
+          </span>
+        </h6>
+        <p className="text-lg">環境構築不要、その場で実践。</p>
+        <a
+          className="link link-hover"
+          href="https://github.com/ut-code/my-code"
+          target="_blank"
+        >
+          {/*<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->*/}
+          <svg
+            fill="currentColor"
+            className="inline-block w-4 h-4 mr-1"
+            viewBox="0 0 24 24"
+          >
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+          </svg>
+          ut-code / my-code
+        </a>
+        <p>Copyright © 2026 ut.code();</p>
+      </aside>
+      <nav>
+        <h6 className="footer-title normal-case">ut.code(); について</h6>
+        <a
+          className="link link-hover"
+          href="https://utcode.net/"
+          target="_blank"
+        >
+          公式ウェブサイト
+        </a>
+        <a
+          className="link link-hover"
+          href="https://twitter.com/utokyo_code"
+          target="_blank"
+        >
+          公式 𝕏 アカウント
+        </a>
+      </nav>
+    </footer>
+  );
+}

app/layout.tsx

@@ -13,6 +13,7 @@ import { AutoAnonymousLogin } from "./accountMenu";
 import { SidebarMdProvider } from "./sidebar";
 import { RuntimeProvider } from "@my-code/runtime/context";
 import { getPagesList } from "@/lib/docs";
+import { Footer } from "./footer";
 
 export const metadata: Metadata = {
   title: {
@@ -53,6 +54,7 @@ export default async function RootLayout({
             </div>
           </div>
         </SidebarMdProvider>
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 export default async function Home() {
   const pagesList = await getPagesList();
   return (
-    <div className="w-full p-4">
+    <div className="w-full p-4 pb-16 md:pb-20 lg:pb-24">
       <div className="max-w-docs mx-auto">
         <div
           className={clsx(

app/sidebar.tsx

@@ -1,7 +1,13 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { DynamicMarkdownSection, LangId, LanguageEntry, PagePath, PageSlug } from "@/lib/docs";
+import {
+  DynamicMarkdownSection,
+  LangId,
+  LanguageEntry,
+  PagePath,
+  PageSlug,
+} from "@/lib/docs";
 import { AccountMenu } from "./accountMenu";
 import { ThemeToggle } from "./themeToggle";
 import {
@@ -151,7 +157,10 @@ export function Sidebar({ pagesList }: { pagesList: LanguageEntry[] }) {
       </span>
 
       <ul
-        className="menu w-full h-max flex-nowrap grow-1 overflow-y-auto overflow-x-clip"
+        className={clsx(
+          "menu w-full h-max flex-nowrap grow-1 overflow-y-auto overflow-x-clip",
+          "pb-8 md:pb-12 lg:pb-16"
+        )}
         style={{
           scrollbarGutter: "stable",
           // DaisyUIはスクロールバーカラーを変更しているが、sidebarを開いた際にはさらに暗い色に変更してしまう