[FEAT] COMPONENTS: Side Navigation bar (MOBILE)

app/components/Logo.tsx

@@ -0,0 +1,13 @@
+export default function Logo({ expanded }: { expanded: boolean }) {
+  return (
+    <h1
+      className={`font-[500] uppercase text-primary-foreground ${
+        expanded
+          ? "text-[1.25rem] leading-[1.2rem]"
+          : "text-[0.75rem] leading-normal"
+      }`}
+    >
+      logo
+    </h1>
+  );
+}

app/components/Profile.tsx

@@ -0,0 +1,17 @@
+export default function Profile({ expanded }: { expanded: boolean }) {
+  return (
+    <div className={`flex items-center gap-1 ${expanded ? "ml-0" : "-ml-2"}`}>
+      <div className="h-[2.6875rem] w-[2.6875rem] rounded-full border-[1px] border-[#f973164d] bg-background bg-cover bg-no-repeat sm:hidden"></div>
+      <div
+        className={`${expanded ? "" : "hidden"} flex flex-col items-start justify-center`}
+      >
+        <h3 className="text-[0.875rem] font-semibold text-[#0A0A0A]">
+          Your Profile
+        </h3>
+        <p className="ml-[2px] text-[0.75rem] font-[500] text-[#525252]">
+          Login
+        </p>
+      </div>
+    </div>
+  );
+}

app/components/sidebar/menu-button.tsx

@@ -0,0 +1,15 @@
+import { Menu, X } from "lucide-react";
+
+type MenuButtonProperties = {
+  IsMenuOpen: boolean;
+  handleToggleMenu: () => void;
+};
+
+export default function MenuButton({
+  IsMenuOpen,
+  handleToggleMenu,
+}: MenuButtonProperties) {
+  return (
+    <button onClick={handleToggleMenu}>{IsMenuOpen ? <X /> : <Menu />}</button>
+  );
+}

app/components/sidebar/navlink.tsx

@@ -0,0 +1,45 @@
+import { Link, useLocation } from "@remix-run/react";
+import { ReactNode } from "react";
+
+type NavlinkProperties = {
+  path: string;
+  icon: ReactNode;
+  text: string;
+  expanded: boolean;
+};
+
+export default function Navlink({
+  path,
+  icon,
+  text,
+  expanded,
+}: NavlinkProperties) {
+  const { pathname } = useLocation();
+  return (
+    <li
+      className={`flex cursor-pointer items-center gap-[0.81rem] transition duration-200 ease-in-out hover:bg-[#F97316] hover:text-[#fafafa] ${
+        pathname === path ? "bg-[#F97316] text-[#fafafa]" : ""
+      } ${
+        expanded
+          ? "ml-1 w-fit rounded-lg py-[0.63rem] pl-[1.25rem] pr-2"
+          : "ml-2 h-[3rem] w-[3rem] justify-center rounded-full"
+      }`}
+    >
+      <Link
+        className={`flex items-center justify-center ${
+          expanded ? "gap-3" : "gap-0"
+        }`}
+        to={path}
+      >
+        <div>{icon}</div>
+        <span
+          className={`text-[1rem] font-[500] leading-[1.2rem] ${
+            expanded ? "w-[8.5rem]" : "w-0 overflow-hidden"
+          }`}
+        >
+          {text}
+        </span>
+      </Link>
+    </li>
+  );
+}

app/components/sidebar/sidebar.tsx

@@ -0,0 +1,82 @@
+import {
+  Briefcase,
+  Building2,
+  Cpu,
+  Monitor,
+  SlidersHorizontal,
+  User,
+} from "lucide-react";
+import { useState } from "react";
+
+import Profile from "../Profile";
+import Navlink from "./navlink";
+
+export default function MobileSidebarComponent() {
+  const [isExpanded] = useState(true);
+
+  return (
+    <aside
+      className={`fixed top-0 z-10 flex h-screen flex-col items-start gap-14 bg-background transition duration-200 ease-in-out sm:hidden ${
+        isExpanded ? "w-full" : "w-fit px-2"
+      }`}
+    >
+      <div
+        className={`flex w-full ${
+          isExpanded
+            ? "items-center justify-between"
+            : "flex-col items-start justify-center gap-6"
+        } mt-6 px-[1.25rem]`}
+      >
+        <Profile expanded={isExpanded} />
+        <div
+          className={`flex gap-12 ${
+            isExpanded ? "items-center" : "flex-col items-start justify-center"
+          }`}
+        >
+          <span></span>
+        </div>
+      </div>
+
+      <nav>
+        <ul className="flex flex-col gap-[13px]">
+          <Navlink
+            path="/home"
+            text="Home"
+            icon={<User />}
+            expanded={isExpanded}
+          />
+          <Navlink
+            path="/aboutus"
+            text="About us"
+            icon={<Building2 />}
+            expanded={isExpanded}
+          />
+          <Navlink
+            path="/jobs"
+            text="Job Listing"
+            icon={<Briefcase />}
+            expanded={isExpanded}
+          />
+          <Navlink
+            path="/features"
+            text="Features Updates"
+            icon={<Cpu />}
+            expanded={isExpanded}
+          />
+          <Navlink
+            path="/blog"
+            text="Blog"
+            icon={<Monitor />}
+            expanded={isExpanded}
+          />
+          <Navlink
+            path="/settings"
+            text="Settings"
+            icon={<SlidersHorizontal />}
+            expanded={isExpanded}
+          />
+        </ul>{" "}
+      </nav>
+    </aside>
+  );
+}

app/routes/_index.tsx

@@ -2,6 +2,8 @@ import type { MetaFunction } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { useState } from "react";
 
+import MenuButton from "~/components/sidebar/menu-button";
+import MobileSidebarComponent from "~/components/sidebar/sidebar";
 import { Button } from "~/components/ui/button";
 import CardPlatform from "~/components/ui/card/card-platform";
 import OtpAuth from "~/components/ui/otp/OtpAuth";
@@ -20,9 +22,22 @@ const handleSubmit = (values: Input[]) => {
 
 export default function Index() {
   const [openModal, setOpenModal] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  function handleToggleMenu() {
+    setIsMenuOpen((previous) => !previous);
+  }
   return (
     <div className="p-4 font-sans">
+      <div className="fixed left-0 h-full">
+        {isMenuOpen && <MobileSidebarComponent />}
+      </div>
+      <div className="fixed right-5 top-10 sm:hidden">
+        <MenuButton
+          IsMenuOpen={isMenuOpen}
+          handleToggleMenu={handleToggleMenu}
+        />
+      </div>
       <h1 className="text-3xl">Welcome to Remix</h1>
       <ul className="mt-4 list-disc space-y-2 pl-6">
         <li>

app/styles/global.css

@@ -92,6 +92,10 @@
   }
 }
 
+body {
+  font-family: 'Inter Variable', sans-serif;
+}
+
 @layer base {
   * {
     @apply border-border;