Implemented hamburger menu for mobile nav sadanandpai#399

apps/host/src/components/common/navbar/navbar.module.scss

@@ -37,17 +37,41 @@
  .links {
  display: none;
  }
-
+ /* For desktop view */
  .github {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-container-size);
  height: var(--icon-container-size);
  color: var(--text-body);
+ }
+
+ .github > svg {
+ width: var(--github-svg-size);
+ height: var(--github-svg-size);
+ }
+
+ /* For mobile view */
+ .hamburger {
+ display: none;
+ }
+
+ @media screen and (max-width: 768px) {
+ .github {
+ display: none;
+ }
 
+ .hamburger {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: var(--icon-container-size);
+ height: var(--icon-container-size);
+ color: var(--text-body);
+ }
 
- & > svg {
+ .hamburger > svg {
  width: var(--github-svg-size);
  height: var(--github-svg-size);
  }
@@ -70,3 +94,38 @@
  }
  }
 }
+.right:first-child {
+ display: flex;
+}
+
+.drawerContent {
+ padding: 1rem; // Adjust as needed
+}
+
+.drawerList {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+
+.drawerListItem {
+ margin-bottom: 1rem; // Adjust as needed
+}
+.ant-drawer-close {
+ justify-content: flex-end;
+ padding-left: 50px;
+ margin-left: 500px;
+}
+.ant-drawer-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .ant-drawer-title {
+ justify-content: flex-start;
+ }
+
+ .ant-drawer-close {
+ justify-content: flex-end;
+ }
+}

apps/host/src/components/common/navbar/navbar.tsx

@@ -1,37 +1,62 @@
-import styles from "./navbar.module.scss";
+import React, { useState } from 'react';
+import { Drawer, Button } from 'antd';
+import { MenuOutlined, CloseOutlined } from '@ant-design/icons';
+import styles from './navbar.module.scss';
+
+function Navbar({ children, title }: { children?: React.ReactNode; title?: string }) {
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+ const toggleDrawer = () => {
+ setIsDrawerOpen(!isDrawerOpen);
+ };
 
-function Navbar({ children, title }: { children?: React.ReactNode, title?: string }) {
  return (
  <nav className={styles.navbar}>
- <a className={styles.logo} href="/frontend-mini-challenges/">
+ <div className={styles.logo}>
  <img
  src="https://github.com/sadanandpai/frontend-mini-challenges/raw/main/shared/assets/logo.png"
  alt="logo"
+ className={styles.logoImage}
  />
  <span>{title ?? 'Frontend Mini Challenges'}</span>
- </a>
-
+ </div>
  <div className={styles.right}>
  <div className={styles.links}>{children}</div>
-
  <a
  href="https://github.com/sadanandpai/frontend-mini-challenges/"
  target="blank"
  className={styles.github}
  >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- viewBox="0 0 24 24"
- >
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path
  fill="currentColor"
  d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
  />
  </svg>
  </a>
  </div>
+ <div className={styles.hamburger}>
+ <Button type="text" icon={<MenuOutlined />} onClick={toggleDrawer} />
+ </div>
+
+ <Drawer
+ title="Menu"
+ placement="right"
+ closable={true}
+ onClose={toggleDrawer}
+ visible={isDrawerOpen}
+ width="50%"
+ >
+ <div className={styles.drawerContent}>
+ <ul className={styles.drawerList}>
+ {React.Children.map(children, (child, index) => (
+ <li key={index} className={styles.drawerListItem}>
+ {child}
+ </li>
+ ))}
+ </ul>
+ </div>
+ </Drawer>
  </nav>
  );
 }