diff --git a/src/Menu/page.tsx b/src/Menu/page.tsx index da199af..d5e629f 100644 --- a/src/Menu/page.tsx +++ b/src/Menu/page.tsx @@ -1,3 +1,4 @@ +import Header from "@/common/components/Header"; import UserListItemCard from "@/common/components/UserListItemCard"; import UserProfileAvatar from "@/common/components/UserProfileAvatar"; import { css } from "@emotion/react"; @@ -17,6 +18,11 @@ import { Link } from "react-router"; export default function MenuPage() { return ( <> +
{version} menu @@ -70,5 +76,5 @@ export default function MenuPage() { const UserListContainer = styled.div({ width: "100vw", - padding: "10px", + padding: "1rem", }); diff --git a/src/common/components/Header.tsx b/src/common/components/Header.tsx new file mode 100644 index 0000000..bea895b --- /dev/null +++ b/src/common/components/Header.tsx @@ -0,0 +1,64 @@ +import type { ReactElement } from "react"; +import styled from "@emotion/styled"; +import { Z_INDEX } from "../constants/zIndex"; + +interface HeaderProps { + left?: ReactElement | string; + center: ReactElement | string; + right?: ReactElement | string; +} + +function Header({ left, center, right }: HeaderProps) { + return ( + + {left} + + {center} + + {right} + + ); +} + +export default Header; + +const HeaderWrapper = styled.header({ + position: "sticky", + zIndex: Z_INDEX.HEADER, + top: 0, + + display: "flex", + + width: "100%", + height: "4.8rem", + + backgroundColor: "white", +}); + +const LeftElement = styled.div({ + display: "flex", + alignItems: "center", + + position: "absolute", + left: "1.5rem", + + height: "100%", +}); + +const CenterElement = styled.div({ + display: "flex", + alignItems: "center", + + margin: "0 auto", + height: "100%", +}); + +const RightElement = styled.div({ + display: "flex", + alignItems: "center", + + position: "absolute", + right: "1.5rem", + + height: "100%", +}); diff --git a/src/common/constants/zIndex.ts b/src/common/constants/zIndex.ts new file mode 100644 index 0000000..48a5f01 --- /dev/null +++ b/src/common/constants/zIndex.ts @@ -0,0 +1,5 @@ +export const Z_INDEX = { + MODAL: 1000, + DROPDOWN: 100, + HEADER: 10, +} as const;