component(navigation)(MS1): add mobile navigation icon

Author: SUVAJIT-KARMAKAR

client/src/components/General/NavigationBar/Navigation.styles.css

@@ -1,10 +1,15 @@
-.LINKS {
+/* Desktop and Mobile Navigation links */
+.DESKTOP-LINKS {
   @apply font-semibold rounded-2xl bg-white/20 shadow-lg ring-2 ring-black/10 px-3 py-4;
 }
-.LINKS-ACTIVE {
+.DESKTOP-LINKS-ACTIVE {
   @apply text-black rounded-xl shadow-lg border-1 p-3;
 }
+.MOBILE-LINKS {
+  @apply font-semibold rounded-xl bg-white/20 shadow-lg ring-2 ring-black/10 p-3;
+}
 
+/* Button */
 .BUTTON {
   @apply font-semibold rounded-2xl bg-white shadow-lg ring-2 px-4 py-4;
 }

client/src/components/General/NavigationBar/NavigationBar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { NavLink, Link } from 'react-router-dom';
 
+// ICONS
+import { HiMenuAlt3 } from 'react-icons/hi';
 // UTILS
 import Logo from '../../../utils/Logo/Logo';
 // DATA
@@ -10,15 +12,16 @@ const NavigationBar: React.FC = () => {
   return (
     <div className="w-full h-[9vh] BG-BLACK-PRIMARY FLEX-BETWEEN PADDING">
       <Logo className="font-style-logo text-4xl TEXT-WHITE-PRIMARY" />
-      <div className="RESPONSIVE-CENTER-BLOCK gap-4">
-        <div className="LINKS">
+      {/* Desktop Navigation Bar */}
+      <div className="hidden FLEX-CENTER-LG gap-4">
+        <div className="DESKTOP-LINKS">
           <ul className="TEXT-COLOR-PRIMARY FLEX-CENTER gap-6">
             {NAVIGATION_LINKS.map(({ name, path }, id) => (
               <li key={id} className="GRAY-300 TEXT-WHITE-PRIMARY-HOVER">
                 <NavLink
                   to={path}
                   className={({ isActive }) =>
-                    isActive ? 'LINKS-ACTIVE BG-WHITE-PRIMARY' : ''
+                    isActive ? 'DESKTOP-LINKS-ACTIVE BG-WHITE-PRIMARY' : ''
                   }
                 >
                   {name}
@@ -31,6 +34,10 @@ const NavigationBar: React.FC = () => {
           Contract
         </Link>
       </div>
+      {/* Mobile Navigation Bar */}
+      <div className="lg:hidden MOBILE-LINKS POINTER">
+        <HiMenuAlt3 size={20} className="TEXT-WHITE-PRIMARY" />
+      </div>
     </div>
   );
 };

client/src/global.css

@@ -27,9 +27,15 @@
 .FLEX-CENTER {
   @apply flex items-center justify-center;
 }
+.FLEX-CENTER-LG {
+  @apply lg:flex items-center justify-center;
+}
 .FLEX-BETWEEN {
   @apply flex items-center justify-between;
 }
+.FLEX-END {
+  @apply flex items-center justify-end;
+}
 
 .PADDING {
   @apply px-5;
@@ -38,8 +44,3 @@
 .POINTER {
   @apply hover:cursor-pointer;
 }
-
-/* RESPONSIVE */
-.RESPONSIVE-CENTER-BLOCK {
-  @apply hidden lg:flex items-center justify-center;
-}