improvements

src/apis/refresh-token.ts

@@ -8,7 +8,7 @@ export interface RefreshTokenResult {
 
 export const REFRESH_TOKEN_URL = `${
 	import.meta.env.VITE_SERVER_BASE_URL
-}/auth/refresh-token`
+}/auth/refresh`
 
 export default async function refreshToken(): Promise<RefreshTokenResult> {
 	const {data} = await client.post(REFRESH_TOKEN_URL)

src/route-widgets/AliasRoute/CreateRandomAliasButton.tsx

@@ -1,8 +1,18 @@
-import {ReactElement} from "react"
+import {ReactElement, useState} from "react"
+import {MdArrowDropDown} from "react-icons/md"
 import {BsArrowClockwise} from "react-icons/bs"
+import {FaPen} from "react-icons/fa"
 import {AxiosError} from "axios"
 
-import {Button} from "@mui/material"
+import {
+	Button,
+	ButtonGroup,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	MenuItem,
+	MenuList,
+} from "@mui/material"
 import {useMutation} from "@tanstack/react-query"
 
 import {CreateAliasData, createAlias} from "~/apis"
@@ -22,17 +32,44 @@ export default function CreateRandomAliasButton({
 		},
 	)
 
+	const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null)
+	const open = Boolean(anchorElement)
+
 	return (
-		<Button
+		<>
-			disabled={isLoading}
+			<ButtonGroup>
-			startIcon={<BsArrowClockwise />}
+				<Button
-			onClick={() =>
+					disabled={isLoading}
-				mutate({
+					startIcon={<BsArrowClockwise />}
-					type: AliasType.RANDOM,
+					onClick={() =>
-				})
+						mutate({
-			}
+							type: AliasType.RANDOM,
-		>
+						})
-			Create random alias
+					}
-		</Button>
+				>
+					Create random alias
+				</Button>
+				<Button
+					size="small"
+					onClick={event => setAnchorElement(event.currentTarget)}
+				>
+					<MdArrowDropDown />
+				</Button>
+			</ButtonGroup>
+			<Menu
+				anchorEl={anchorElement}
+				open={open}
+				onClose={() => setAnchorElement(null)}
+			>
+				<MenuList>
+					<MenuItem>
+						<ListItemIcon>
+							<FaPen />
+						</ListItemIcon>
+						<ListItemText primary="Create Custom Alias" />
+					</MenuItem>
+				</MenuList>
+			</Menu>
+		</>
 	)
 }

src/routes/AuthenticatedRoute.tsx

@@ -45,7 +45,7 @@ export default function AuthenticatedRoute(): ReactElement {
 						justifyContent="space-between"
 						alignItems="center"
 					>
-						<Grid item xs={12} sm={4} lg={2}>
+						<Grid item xs={12} sm={4}>
 							<Box
 								bgcolor={theme.palette.background.paper}
 								component="nav"
@@ -61,7 +61,7 @@ export default function AuthenticatedRoute(): ReactElement {
 								</List>
 							</Box>
 						</Grid>
-						<Grid item xs={12} sm={8} lg={10}>
+						<Grid item xs={12} sm={8}>
 							<Paper>
 								<Box
 									padding={4}