update menu links

Author: yethranayeh

src/routes/layout/Header/Header.tsx

@@ -3,6 +3,7 @@ import { memo } from "react";
 
 import { Branding } from "./Branding";
 import { MenuButton } from "./MenuButton";
+import { PageLinks } from "../links/PageLinks";
 
 export const Component = () => (
 	<div className='w-screen flex justify-between items-center p-2 border-b border-primary-dark'>
@@ -12,7 +13,9 @@ export const Component = () => (
 		</div>
 		<PinnedConversion />
 
-		<div className='hidden sm:block' />
+		<div className='hidden md:block md:pr-4 md:w-[240px] [&>div]:flex-row [&>div]:justify-end [&>div]:text-lg [&>div]:gap-2'>
+			<PageLinks />
+		</div>
 	</div>
 );
 

src/routes/layout/Header/MenuButton.tsx

@@ -7,7 +7,7 @@ export function MenuButton() {
 	const [_, setIsMenuOpen] = useAtom(menuOpenAtom);
 
 	return (
-		<button type='button' onClick={() => setIsMenuOpen((prev) => !prev)}>
+		<button type='button' onClick={() => setIsMenuOpen((prev) => !prev)} className='inline-block md:hidden'>
 			<Menu className='w-8 h-8' />
 		</button>
 	);

src/routes/layout/links/Link.tsx

@@ -17,7 +17,7 @@ export const Link = ({ Icon, to, text }: { Icon?: any; to: string; text: string
 				{Icon ? (
 					<Icon />
 				) : (
-					<ChevronRight className={cn("w-0 h-6 transition-all group-hover:w-6 ", isActive ? "w-6" : undefined)} />
+					<ChevronRight className={cn("w-0 h-6 transition-all group-hover:w-4 ", isActive ? "w-4" : undefined)} />
 				)}{" "}
 				<span>{text}</span>
 			</>

src/routes/layout/links/PageLinks.tsx

@@ -1,13 +1,9 @@
-import { Construction } from "lucide-react";
 import { Link } from "./Link";
 
 export const PageLinks = () => (
 	<div className='flex flex-col text-2xl w-max text-primary-dark'>
 		<Link to='/' text='Home' />
 		<Link to='/charts' text='Charts' />
 		<Link to='/faq' text='F.A.Q.' />
-		<div className='flex flex-col mt-4 gap-1 text-primary-darker'>
-			<Link to='/settings' text='Settings' Icon={Construction} />
-		</div>
 	</div>
 );