bottomのレイアウトを変更

Author: KaichiManabe

web/app/chat/layout.tsx

@@ -13,7 +13,7 @@ export default function ChatPageLayout({
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
-      <BottomBar activeTab="2_chat" />
+      <BottomBar activeTab="3_chat" />
     </NavigateByAuthState>
   );
 }

web/app/friends/layout.tsx

@@ -1,18 +1,19 @@
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function FriendsPageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="フレンド/Friends" />
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
       <BottomBar activeTab="1_friends" />
-    </>
+    </NavigateByAuthState>
   );
 }

web/app/home/layout.tsx

@@ -1,18 +1,19 @@
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function HomePageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="ホーム/Home" />
       <div className="relative top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
       <BottomBar activeTab="0_home" />
-    </>
+    </NavigateByAuthState>
   );
 }

web/app/search/layout.tsx

@@ -1,18 +1,19 @@
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function HomePageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="検索/Search" />
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
-      <BottomBar activeTab="4_search" />
-    </>
+      <BottomBar activeTab="2_search" />
+    </NavigateByAuthState>
   );
 }

web/app/settings/layout.tsx

@@ -12,7 +12,7 @@ export default function SettingsPageLayout({
       <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
       </div>
-      <BottomBar activeTab="3_settings" />
+      <BottomBar activeTab="4_settings" />
     </>
   );
 }

web/components/BottomBar.tsx

@@ -6,7 +6,7 @@ import { MdSettings } from "react-icons/md";
 import { MdSearch } from "react-icons/md";
 
 type Props = {
-  activeTab: "0_home" | "1_friends" | "2_chat" | "3_settings" | "4_search";
+  activeTab: "0_home" | "1_friends" | "2_search" | "3_chat" | "4_settings";
 };
 
 function BottomBarCell({
@@ -23,7 +23,9 @@ function BottomBarCell({
   return (
     <Link
       href={href}
-      className={`focus:bg-gray-300 ${isActive ? "active text-primary" : "text-secondary"}`}
+      className={`focus:bg-gray-300 ${
+        isActive ? "active text-primary" : "text-secondary"
+      }`}
     >
       {iconComponent}
       <span
@@ -51,24 +53,24 @@ export default function BottomBar(props: Props) {
         isActive={activeTab === "1_friends"}
         iconComponent={<MdPeople className="text-2xl" />}
       />
+      <BottomBarCell
+        label="Search"
+        href="/search"
+        isActive={activeTab === "2_search"}
+        iconComponent={<MdSearch className="text-2xl" />}
+      />
       <BottomBarCell
         label="Chat"
         href="/chat"
-        isActive={activeTab === "2_chat"}
+        isActive={activeTab === "3_chat"}
         iconComponent={<MdChat className="text-2xl" />}
       />
       <BottomBarCell
         label="Settings"
         href="/settings"
-        isActive={activeTab === "3_settings"}
+        isActive={activeTab === "4_settings"}
         iconComponent={<MdSettings className="text-2xl" />}
       />
-      <BottomBarCell
-        label="Search"
-        href="/search"
-        isActive={activeTab === "4_search"}
-        iconComponent={<MdSearch className="text-2xl" />}
-      />
     </div>
   );
 }