Make navbar responsive

Author: MrBartusek

apps/client/src/components/Layout/Navbar.tsx

@@ -1,6 +1,9 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import { BsList } from 'react-icons/bs';
 import GoToDashboardButton from '../../GoToDashboardButton';
 import { UserContext } from '../../context/UserContext';
+import ActionButton from '../ActionButton';
 import Container from '../Container';
 import StockedUpLogo from '../StockedUpLogo';
 import TryDemoButton from '../TryDemoButton';
@@ -9,20 +12,40 @@ import NavbarNavigation from './NavbarNavigation';
 
 function Navbar() {
 	const { isAuthenticated } = useContext(UserContext);
+
+	const [showHamburger, setShowHamburger] = useState(false);
+
 	return (
 		<header className="border-b border-gray-200 bg-gray-100 p-4">
 			<Container className="flex items-center justify-between">
 				<StockedUpLogo
 					variant="black"
-					className="h-16 w-auto"
+					className="h-12 w-auto lg:h-16"
 				/>
-				<div className="flex flex-row items-center gap-8">
+				<div className="hidden flex-row items-center gap-8 lg:flex">
 					{!isAuthenticated ? <NavbarNavigation /> : <UserInfo />}
 					<div className="flex items-center gap-4">
 						{!isAuthenticated && <TryDemoButton />}
 						<GoToDashboardButton isAuthenticated={isAuthenticated} />
 					</div>
 				</div>
+				<ActionButton
+					icon={BsList}
+					onClick={() => setShowHamburger((show) => !show)}
+					className="border border-gray-300 text-2xl text-muted lg:hidden"
+				/>
+			</Container>
+			<Container className="lg:hidden">
+				<AnimateHeight
+					duration={200}
+					height={showHamburger ? 'auto' : 0}
+				>
+					<NavbarNavigation
+						orientation="col"
+						className="px-3 py-4"
+						extendedOptions
+					/>
+				</AnimateHeight>
 			</Container>
 		</header>
 	);

apps/client/src/components/Layout/NavbarNavigation.tsx

@@ -1,9 +1,30 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
 import { Link } from 'react-router-dom';
+import { UserContext } from '../../context/UserContext';
+import UserInfo from '../UserInfo';
+
+export type NavigationLinks = 'features' | 'login' | 'register' | 'demo' | 'github';
+
+export interface NavbarNavigationProps {
+	orientation?: 'row' | 'col';
+	className?: string;
+	extendedOptions?: boolean;
+}
+
+function NavbarNavigation({
+	orientation = 'row',
+	className,
+	extendedOptions = false,
+}: NavbarNavigationProps) {
+	const orientationClasses = {
+		row: 'flex-row items-center gap-6',
+		col: 'flex-col gap-4',
+	};
 
-function NavbarNavigation() {
 	return (
-		<nav className="flex-1">
-			<ul className="flex items-center gap-6">
+		<nav className={classNames('flex-1', className)}>
+			<ul className={classNames('flex', orientationClasses[orientation])}>
 				<li>
 					<Link
 						to="#features"
@@ -14,12 +35,32 @@ function NavbarNavigation() {
 				</li>
 				<li>
 					<Link
-						to="login"
+						to="/login"
 						className="link-muted"
 					>
 						Login
 					</Link>
 				</li>
+				{extendedOptions && (
+					<>
+						<li>
+							<Link
+								to="/register/demo"
+								className="link-muted"
+							>
+								Try demo
+							</Link>
+						</li>
+						<li>
+							<Link
+								to="/register"
+								className="link-muted"
+							>
+								Get started
+							</Link>
+						</li>
+					</>
+				)}
 			</ul>
 		</nav>
 	);

package-lock.json

@@ -23,6 +23,7 @@
     },
     "dependencies": {
         "dotenv-cli": "^7.3.0",
-        "express-session": "^1.17.3"
+        "express-session": "^1.17.3",
+        "react-animate-height": "^3.2.3"
     }
-}
+}