Implemented hamburger menu for mobile nav sadanandpai#399

Author: rutupatel53

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>
   );
 }