+ `1px solid ${t.vars.palette.background.level1}`,
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ right: 0,
+ zIndex: 100,
+ backgroundColor: mode === 'light' ? 'white' : 'black',
+ }}
+ >
+
+
+ ISUTUBE
+
+
+
+ tag.name) ?? []}
+ startDecorator={
+
+
+
+
+ );
+}
+
+const LogoLink = styled(Link)`
+ display: flex;
+ align-items: flex-end;
+ text-decoration: none;
+ svg {
+ margin-right: 0.2rem;
+ color: #ff0000;
+ }
+`;
diff --git a/frontend/src/components/layout/loginmodal.tsx b/frontend/src/components/layout/loginmodal.tsx
new file mode 100644
index 000000000..3ce341e48
--- /dev/null
+++ b/frontend/src/components/layout/loginmodal.tsx
@@ -0,0 +1,45 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import DialogContent from '@mui/joy/DialogContent';
+import DialogTitle from '@mui/joy/DialogTitle';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+export interface LoginModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+}
+export function LoginModal(props: LoginModalProps): React.ReactElement {
+ const location = useLocation();
+
+ switch (location.pathname) {
+ case '/account/login':
+ case '/account/signup':
+ // not show login modal in login page and signup page
+ return <>;
+ }
+
+ return (
+ <>
+
+
+
+ {mode === 'light' ? (
+
+
+
+
+
+
+
+ {userMe.data ? userMe.data.name : '未ログイン'}
+
+
+
+
+ {props.children}
+
+
+ {toast.content.message}
+
+
+ {toast.content.title}
+ 
+
+ {liveSteram.title}
+
+
+ {liveSteram.owner?.name}
+
+ {liveSteram.viewers_count}人視聴・{date}
+
+
+
+
+
+
+ user
+
+
+
+ チャンネル名
+
+
+
+ チャンネル登録者数1234人
+
+
+
+
+
+
+ -
+
+
+
+
+ 登録チャンネル
+
+ {Array(10)
+ .fill(0)
+ .map((_, i) => (
+
+
+
+
+ {liveSterams.data?.map((stream, index) => (
+
+
+ ))}
+
+
+
+ );
+}
+
+function SidebarButton(
+ props: Parameters
+
+ {liveStream.data === undefined ? (
+
+ {liveStream.data?.owner?.display_name}
+
+
+ )}
+
+ チャンネル登録者数****人
+
+
+ {/*
+
+
*/}
+
+