Skip to content

Commit

Permalink
🧭 adjust navigation styles and add key events
Browse files Browse the repository at this point in the history
  • Loading branch information
@iam-robin
iam-robin committed Mar 12, 2023
1 parent 79bf840 commit a4e6297
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 33 deletions.
42 changes: 34 additions & 8 deletions components/NavItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,25 +81,37 @@ const NavItem = (props) => {

useEffect(() => {
setActiveRoute(getActiveRoute(router));
}, [router]);

const handleKeyPress = (event) => {
if (event.key === props.index) {
router.push(props.route);
}
};

window.addEventListener("keydown", handleKeyPress);

return () => {
window.removeEventListener("keydown", handleKeyPress);
};
}, [router, props.index, props.route]);

return (
<li className={clsx("block text-base group", props.small ? "h-8" : "h-10")}>
<li className={clsx("block text-base group")}>
<Link
href={props.route}
rel="me"
onClick={() => publish("navItemClicked")}
className={clsx(
`flex relative px-3 rounded-lg items-center justify-between pointer text-sm group`,
'after:block after:content-[""] after:-z-10 after:absolute after:top-[0] after:left-[0] after:w-full after:h-full after:rounded-xl',
'after:block after:content-[""] after:-z-10 after:absolute after:top-[0] after:left-[0] after:w-full after:h-full after:rounded-lg',
"after:opacity-0 after:scale-90 after:transition-all after:duration-300 after:ease-in-out",
"hover:after:opacity-100 hover:after:scale-100",
"md:transition-all md:duration-[500ms] md:ease-in-out",
props.onlyIcon ? "md:mr-2 md:ml-4" : "md:mr-0",
props.onlyIcon && activeRoute != props.route
? "hover:after:opacity-0"
: "",
props.small ? "text-xs py-2" : "text-base py-[6px]",
props.small ? "text-xs py-2" : "text-base py-[8px]",
`${
activeRoute == props.route
? "after:scale-100 after:transition-color after:duration-[0ms] after:opacity-100 text-grey-900 dark:text-grey-200 after:bg-grey-200 md:after:bg-white dark:after:bg-grey-900"
Expand All @@ -125,25 +137,25 @@ const NavItem = (props) => {
"fill-grey-800 dark:fill-grey-400",
"transition-all duration-[500ms] ease-in-out",
props.onlyIcon & !props.small ? "md:h-6 md:w-6" : "",
props.small & !props.onlyIcon ? "h-4 w-4" : "h-5 w-5",
props.small & !props.onlyIcon ? "h-4 w-4" : "h-4 w-4",
activeRoute == props.route ? "hidden" : "block"
)}
/>
)}
{IconActive && (
<IconActive
className={clsx(
"h-5 w-5 fill-blue",
"fill-blue",
"transition-all duration-[500ms] ease-in-out",
props.onlyIcon & !props.small ? "md:h-6 md:w-6" : "",
props.small & !props.onlyIcon ? "h-4 w-4" : "h-5 w-5",
props.small & !props.onlyIcon ? "h-4 w-4" : "h-4 w-4",
activeRoute == props.route ? "block" : "hidden"
)}
/>
)}
<span
className={clsx(
"origin-bottom-left ml-3 md:transition-[opacity] md:duration-[500ms] md:ease-in-out",
"text-sm origin-bottom-left ml-2 md:transition-[opacity] md:duration-[500ms] md:ease-in-out",
activeRoute == props.route ? "font-bold" : "font-normal",
props.onlyIcon ? "md:opacity-0" : "opacity-100"
)}
Expand All @@ -160,6 +172,20 @@ const NavItem = (props) => {
)}
/>
)}
{!props.route.startsWith("https://") && props.index && (
<div
className={clsx(
"h-4 w-4 bg-grey-200 dark:bg-grey-950 rounded text-[10px] flex items-center justify-center text-grey-550 dark:text-grey-650 font-mono",
"transition-all duration-[300ms] ease-in-out",
activeRoute != props.route
? "group-hover:bg-grey-250 group-hover:text-600 dark:group-hover:bg-grey-900 dark:group-hover:text-600"
: "bg-grey-150",
props.onlyIcon ? "md:opacity-0" : "md:opacity-100"
)}
>
{props.index}
</div>
)}
</Link>
</li>
);
Expand Down
18 changes: 6 additions & 12 deletions components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ const Sidebar: React.FC<MediaDividerProps> = ({ collided }) => {
What I create
</h3>
<ul className={clsx("list-none p-0 m-0 -ml-2 mt-2")}>
<NavItem content="projects" route="/projects" onlyIcon={collided} />
{/* <NavItem content="blog" route="/blog" onlyIcon={collided} /> */}
<NavItem content="photos" route="/photos" onlyIcon={collided} />
<NavItem content="projects" route="/projects" onlyIcon={collided} index="1" />
{/* <NavItem content="blog" route="/blog" onlyIcon={collided} index={2} /> */}
<NavItem content="photos" route="/photos" onlyIcon={collided} index="2" />
</ul>
</div>
<div>
Expand All @@ -62,9 +62,9 @@ const Sidebar: React.FC<MediaDividerProps> = ({ collided }) => {
What I consume
</h3>
<ul className="list-none p-0 m-0 -ml-2 mt-2">
<NavItem content="books" route="/books" onlyIcon={collided} />
<NavItem content="music" route="/music" onlyIcon={collided} />
<NavItem content="bookmarks" route="/bookmarks" onlyIcon={collided} />
<NavItem content="books" route="/books" onlyIcon={collided} index="3" />
<NavItem content="music" route="/music" onlyIcon={collided} index="4" />
<NavItem content="bookmarks" route="/bookmarks" onlyIcon={collided} index="5" />
</ul>
</div>
<div>
Expand All @@ -90,12 +90,6 @@ const Sidebar: React.FC<MediaDividerProps> = ({ collided }) => {
onlyIcon={collided}
small
/>
{/* <NavItem
content="instagram"
route="https://www.instagram.com/iamrob.in/"
onlyIcon={collided}
small
/> */}
<NavItem
content="readcv"
route="https://read.cv/iamrobin"
Expand Down
2 changes: 1 addition & 1 deletion pages/_app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function MyApp({ Component, pageProps }) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.body.classList.remove("resize-animation-stopper");
}, 300);
}, 100);
});
};

Expand Down
14 changes: 4 additions & 10 deletions pages/bookmarks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,12 @@ const Bookmarks = ({ bookmarks, tags }: Props) => {
Daily I receive new articles, videos, essays, etc. in the RSS reader
of my choice{" "}
<TextLink src="https://reederapp.com/" external>
Reeder
Reeder.
</TextLink>
. Some I read immediately, while others I save for later using my
trusted read-it-later tool,{" "}
<TextLink src="https://getpocket.com/" external>
Pocket
</TextLink>
. I categorize and tag items I have read and found interesting in{" "}
I categorize and tag items I have read and found interesting in{" "}
<TextLink src="https://raindrop.io/" external>
Raindrop.io
</TextLink>
. Thanks to their fantastic API, I can also share that list here on my
Raindrop.io.
</TextLink>Thanks to their fantastic API, I can also share that list here on my
personal website.
<ul className="flex gap-4 mt-5 text-xs text-grey font-mono">
<li className="flex items-center gap-2">
Expand Down
Loading

1 comment on commit a4e6297

@vercel
Copy link

@vercel vercel bot commented on a4e6297 Mar 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

iamrobin-personal-website – ./

iamrobin-personal-website.vercel.app
iamrobin-personal-website-iam-robin.vercel.app
iamrobin-personal-website-git-main-iam-robin.vercel.app
www.iamrob.in
iamrob.in

Please sign in to comment.