サイドメニューとレイアウト仮実装

next.config.js

@@ -7,6 +7,11 @@ const nextConfig = {
     });
     return config;
   },
+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },
   reactStrictMode: true,
   swcMinify: true,
 };

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.5",
     "next": "^13.4.18",
     "react": "^18.2.0",

src/app/(menu)/layout.tsx

@@ -8,6 +8,11 @@ const Layout = styled('div')`
   grid-template-columns: 1fr 2fr;
   min-height: 100vh;
 
+  ${({ theme }) => theme.breakpoints.down('desktop')} {
+    // モバイル
+    grid-template-columns: 1fr 9fr;
+  }
+
   ${({ theme }) => theme.breakpoints.down('tablet')} {
     // モバイル
     grid-template-columns: 1fr;

src/app/(menu)/messages/page.tsx

@@ -0,0 +1,3 @@
+export default function Messages() {
+  return <main style={{ height: '2000px' }}>Messages</main>;
+}

src/app/(menu)/notifications/page.tsx

@@ -0,0 +1,3 @@
+export default function Notifications() {
+  return <main style={{ height: '2000px' }}>Notifications</main>;
+}

src/app/(menu)/search/page.tsx

@@ -0,0 +1,3 @@
+export default function Search() {
+  return <main style={{ height: '2000px' }}>Search</main>;
+}

src/components/menu/MenuItem.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+// TODO 小さい時とでっかいときで表示が替わる
+// TODO アイコンとラベルとリンク
+// TODO 横幅はマックスにしたい
+
+import Link from 'next/link';
+import { HTMLAttributeAnchorTarget, ReactNode } from 'react';
+import { styled } from '@mui/material';
+import { usePathname } from 'next/navigation';
+
+const StyledButton = styled('div')`
+  padding: 8px 11px;
+  font-size: 20px;
+  color: black;
+  gap: 10px;
+  font-weight: 500;
+
+  width: 100%;
+  display: inline-flex;
+  justify-content: left;
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  line-height: 1.75;
+  align-items: center;
+  border-radius: 10px;
+
+  &:hover,
+  &:focus {
+    background-color: rgba(15, 20, 25, 0.04);
+  }
+
+  &.active {
+    font-weight: 700;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('desktop')} {
+    border-radius: 50%;
+  }
+`;
+
+const Label = styled('span')`
+  ${({ theme }) => theme.breakpoints.down('desktop')} {
+    display: none;
+  }
+`;
+
+type Props = {
+  href: string;
+  target?: HTMLAttributeAnchorTarget | undefined;
+  icon: ReactNode;
+  label?: string;
+};
+
+const MenuItem = ({ href, target, icon, label }: Props) => {
+  const pathname = usePathname();
+  return (
+    <Link href={href} target={target} passHref>
+      <StyledButton className={href == pathname ? 'active' : undefined}>
+        {icon}
+        <Label>{label}</Label>
+      </StyledButton>
+    </Link>
+  );
+};
+
+export default MenuItem;

src/components/menu/SideMenu.tsx

@@ -1,6 +1,19 @@
 'use client';
 
 import { styled } from '@mui/material';
+import MenuItem from '@/components/menu/MenuItem';
+import { Home, Mail, Notifications, Search } from '@mui/icons-material';
+
+const Root = styled('div')`
+  // Desktop
+  padding: 0 8px;
+  margin-left: auto;
+  width: 275px;
+
+  ${({ theme }) => theme.breakpoints.down('desktop')} {
+    width: 72px;
+  }
+`;
 
 const StyledMenu = styled('nav')`
   // TODO デスクトップは左、大きい(メニューラベルが表示)
@@ -10,30 +23,35 @@ const StyledMenu = styled('nav')`
   display: flex;
   position: fixed;
   flex-direction: column;
+  width: 259px;
 
   ${({ theme }) => theme.breakpoints.down('desktop')} {
     // ラップトップ
+    width: 56px;
   }
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     // タブレット
   }
   ${({ theme }) => theme.breakpoints.down('tablet')} {
     // モバイル
-    flex-direction: row;
-    bottom: 0;
+    display: none;
   }
 `;
 
 const SideMenu = () => {
   return (
-    <div>
+    <Root>
       <StyledMenu>
-        <div>ホーム</div>
-        <div>検索</div>
-        <div>通知</div>
-        <div>DM</div>
+        <MenuItem href={'/home'} icon={<Home />} label={'ホーム'} />
+        <MenuItem href={'/search'} icon={<Search />} label={'検索'} />
+        <MenuItem
+          href={'/notifications'}
+          icon={<Notifications />}
+          label={'通知'}
+        />
+        <MenuItem href={'/messages'} icon={<Mail />} label={'メッセージ'} />
       </StyledMenu>
-    </div>
+    </Root>
   );
 };
 export default SideMenu;

src/swr/README.md

@@ -1,2 +1,8 @@
 # @/swr
 SWRを使用したデータフェッチ関数置き場
+
+## @/swr/client
+クライアントサイド(`'use client';`)で呼び出す用
+
+## @/swr/server
+サーバーサイドで呼び出す用

src/swr/client/auth.ts

@@ -0,0 +1,17 @@
+export const useAuth = () => {
+  /**
+   * アクセストークン
+   * リフレッシュトークン
+   * 自分の情報
+   */
+
+  /**
+   * 想定される状態
+   * - 未ログイン
+   * - ログイン済み(JWT未発行 or 期限切れ)
+   * - ログイン済み(JWT有効)
+   * - 未ログイン(認証切れ)
+   */
+
+  return;
+};