add nav link highlighting

joshnies · Aug 4, 2021 · f986a16 · f986a16
1 parent 261fd93
commit f986a16
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 11 deletions.
diff --git a/components/hamburger-button.tsx b/components/hamburger-button.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@geist-ui/react';
 
 export default function HamburgerButton(props: {
-  isActive: boolean;
+  active: boolean;
   onClick: () => void;
 }) {
   const theme = useTheme();
@@ -24,7 +24,7 @@ export default function HamburgerButton(props: {
   };
 
   const Icon = () => {
-    if (props.isActive) {
+    if (props.active) {
       return (
         <>
           <Line />

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -4,8 +4,11 @@ import Navbar from './navbar';
 
 export default function Layout(props: {
   title?: string;
+  activeRoute?: string;
   children: React.ReactNode;
 }) {
+  const { activeRoute, children } = props;
+
   return (
     <>
       <Head>
@@ -14,8 +17,8 @@ export default function Layout(props: {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <Navbar />
-        {props.children}
+        <Navbar activeRoute={activeRoute} />
+        {children}
       </main>
     </>
   );

diff --git a/components/nav-item.tsx b/components/nav-item.tsx
@@ -7,9 +7,11 @@ export default function NavItem(props: {
   className?: string;
   children: React.ReactNode;
   to: string;
+  activeRoute?: string;
   newTab?: boolean;
 }) {
-  const { children, to, newTab } = props;
+  const { children, to, activeRoute, newTab } = props;
+  const opacity = to === activeRoute ? 1 : 0.75;
 
   if (newTab) {
     return (
@@ -31,6 +33,7 @@ export default function NavItem(props: {
             fontSize: 14,
             fontWeight: 500,
             color: 'white',
+            opacity,
             marginLeft: 50,
             userSelect: 'none',
             transition: '250ms ease',
@@ -63,6 +66,7 @@ export default function NavItem(props: {
             fontSize: 14,
             fontWeight: 500,
             color: 'white',
+            opacity,
             marginLeft: 50,
             userSelect: 'none',
             transition: '250ms ease',

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -11,7 +11,7 @@ import routes from '../routes';
 /**
  * Navbar.
  */
-export default function Navbar() {
+export default function Navbar(props: { activeRoute?: string }) {
   const [showDrawer, setShowDrawer] = useState(false);
   const theme = useTheme();
 
@@ -67,14 +67,26 @@ export default function Navbar() {
               </a>
             </Link>
           </li>
-          <DynamicNavItem to={routes.theory.index}>theory</DynamicNavItem>
-          <DynamicNavItem to={routes.theory.caseStudy}>
+          <DynamicNavItem
+            to={routes.theory.index}
+            activeRoute={props.activeRoute}
+          >
+            theory
+          </DynamicNavItem>
+          <DynamicNavItem
+            to={routes.theory.caseStudy}
+            activeRoute={props.activeRoute}
+          >
             case study
           </DynamicNavItem>
-          <DynamicNavItem to={routes.blog} newTab>
+          <DynamicNavItem
+            to={routes.blog}
+            activeRoute={props.activeRoute}
+            newTab
+          >
             blog
           </DynamicNavItem>
-          <HamburgerButton isActive={showDrawer} onClick={toggleDrawer} />
+          <HamburgerButton active={showDrawer} onClick={toggleDrawer} />
         </ul>
       </nav>
       {showDrawer && <NavDrawer />}

diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "start": "next start",
     "lint": "next lint",
     "storybook": "start-storybook -p 6006",
+    "sb": "yarn storybook",
     "build-storybook": "build-storybook"
   },
   "dependencies": {

diff --git a/stories/Navbar.stories.tsx b/stories/Navbar.stories.tsx
@@ -1,11 +1,14 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Navbar from '../components/navbar';
+import routes from '../routes';
 
 export default {
   title: 'Navbar',
   component: Navbar,
 } as ComponentMeta<typeof Navbar>;
 
-const Template: ComponentStory<typeof Navbar> = () => <Navbar />;
+const Template: ComponentStory<typeof Navbar> = () => (
+  <Navbar activeRoute={routes.theory.index} />
+);
 
 export const Default = Template.bind({});