[chore ☘️] sidebar & search bar responsive upgrade

Author: devlopersabbir

.gitignore

@@ -4,6 +4,7 @@
 .pnp.js
 .yarn/install-state.gz
 pnpm-lock.yaml
+package-lock.json
 
 # testing
 /coverage

src/app/layout.tsx

@@ -44,7 +44,7 @@ export default function RootLayout({
         >
           <Toaster />
           <main className="relative flex flex-col min-h-scree">
-            <div className="lg:w-[20rem] lg:fixed lg:left-0 lg:top-0 lg:my-8 lg:px-8 border-r-2 border-gray-200 lg:h-[90vh] z-20 w-[100%]">
+            <div className="lg:w-[20rem] dark:bg-zinc-900 bg-zinc-100 lg:bg-transparent fixed lg:left-0 lg:top-0 lg:my-8 lg:h-[90vh] p-4 lg:px-4 lg:py-0 border-r-2 border-gray-200 z-20 w-full">
               <Sidebar />
             </div>
             <div className="flex-1 flex-grow w-full">

src/cloud/config.ts

@@ -40,7 +40,7 @@ const ProfileGrid = async ({ page, searchParams }: Props) => {
   ]);
   const count = lengths[0].count;
   return (
-    <div className="lg:mt-32 mb-8 border-t-orange-500 lg:ml-[20rem] lg:px-6 overflow-y-scroll p-5 lg:p-0">
+    <div className="lg:mt-32 mt-[10rem] mb-8 border-t-orange-500 lg:ml-[20rem] px-4 lg:px-6 overflow-y-scroll relative">
       <Search />
       <div className="flex-center flex-col gap-3">
         {count <= 0 || profiles.length === 0 ? (

src/components/contents/ProfileGrid.tsx

@@ -54,7 +54,7 @@ const CreateProfile = ({
   /** image handler */
   const handleImage = async (
     event: ChangeEvent<HTMLInputElement>,
-    fieldChange: (value: string) => void,
+    fieldChange: (value: string) => void
   ) => {
     event.preventDefault();
     /** File reader */
@@ -98,7 +98,7 @@ const CreateProfile = ({
         onSubmit={form.handleSubmit(onSubmitHandler)}
         className="flex-center flex-col md:flex-row-reverse gap-5 px-5 pb-5"
       >
-        <div className="w-[30%] flex-center flex-col gap-3">
+        <div className="w-full md:w-[30%] flex-center flex-col gap-3">
           <h1 className="text-base font-semibold hidden md:visible">
             Upload Profile
           </h1>
@@ -142,7 +142,7 @@ const CreateProfile = ({
           />
         </div>
 
-        <div className="w-[80%] space-y-4">
+        <div className="w-full md:w-[80%] space-y-4">
           <FormField
             control={form.control}
             name="name"

src/components/forms/CreateProfile.tsx

@@ -34,7 +34,7 @@ const SearchProfiles = () => {
       <SearchIcon
         size={30}
         className={
-          "absolute lg:right-10 right-2 cursor-pointer hover:text-red-600 transition-all duration-300"
+          "absolute right-2 cursor-pointer hover:text-red-600 transition-all duration-300"
         }
       />
     </>

src/components/forms/SearchProfiles.tsx

@@ -3,8 +3,8 @@ import SearchProfiles from "@/components/forms/SearchProfiles";
 
 const Search = () => {
   return (
-    <div className="backdrop-blur-3xl lg:fixed lg:top-0 lg:left-[20rem] lg:right-0 z-10 static">
-      <div className="w-full bottom-0 lg:my-8 my-5 lg:px-6 px-0 flex-center">
+    <div className="lg:backdrop-blur-3xl fixed left-0 lg:left-[20rem] lg:mx-0 px-4 py-0.5 dark:bg-zinc-900 bg-zinc-100 lg:bg-transparent lg:top-0 top-[5rem] right-0 z-50">
+      <div className="w-full my-3 lg:my-8 flex-center relative">
         <SearchProfiles />
       </div>
     </div>

src/components/shared/search/Search.tsx

@@ -9,16 +9,29 @@ import {
   DialogTrigger,
 } from "../../ui/dialog";
 import CreateProfile from "../../forms/CreateProfile";
+import { Plus } from "lucide-react";
 
 const ProfileAdd = () => {
   const [open, setOpen] = useState<boolean>(false);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="default" className="font-semibold mt-5">
-          Add My Profile
-        </Button>
+        <>
+          <Button
+            onClick={() => setOpen(true)}
+            variant="default"
+            className="font-semibold mt-5 lg:block hidden"
+          >
+            Add My Profile
+          </Button>
+          <Button
+            onClick={() => setOpen(true)}
+            variant="default"
+            className="rounded-full w-10 h-10 p-0 font-extrabold lg:hidden fixed bottom-5 right-5"
+          >
+            <Plus size={30} fontWeight={900} />
+          </Button>
+        </>
       </DialogTrigger>
 
       {/* diolog content */}

src/components/shared/sidebar/ProfileAdd.tsx

@@ -8,9 +8,9 @@ import ProfileAdd from "./ProfileAdd";
 
 const Sidebar = () => {
   return (
-    <div className="lg:flex-between flex justify-between p-4 lg:p-0 flex-col h-full">
+    <div className="md:flex-between flex justify-between flex-col h-full">
       {/* header */}
-      <div className="flex-start flex-col gap-4">
+      <div className="flex-start flex-col w-full">
         <div className="flex-between flex-row w-full">
           <Logo />
           <ModeToggle />

src/components/shared/sidebar/Sidebar.tsx

@@ -0,0 +1,24 @@
+import dotenv from "dotenv";
+import { z } from "zod";
+dotenv.config({
+  path: "./.env",
+});
+
+export const configType = z.object({
+  DATABASE_URI: z.string().nonempty({ message: "DATABASE_URL is missing" }),
+  NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: z
+    .string()
+    .nonempty({ message: "Cloudinary cloud name is missing" }),
+  NEXT_PUBLIC_CLOUDINARY_API_KEY: z
+    .string()
+    .nonempty({ message: "Cloudinary API key missing" }),
+});
+type TConfig = z.infer<typeof configType>;
+
+export const config: TConfig = {
+  DATABASE_URI: process.env.DATABASE_URI as string,
+  NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: process.env
+    .NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME as string,
+  NEXT_PUBLIC_CLOUDINARY_API_KEY: process.env
+    .NEXT_PUBLIC_CLOUDINARY_API_KEY as string,
+};