improve_navbar

VaibhavArora314 · Aug 3, 2024 · 97973ce · 97973ce
1 parent 8ca1686
commit 97973ce
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/backend/.env.example b/backend/.env.example
@@ -1,4 +1,4 @@
-DATABASE_URL="mongodb+srv://<username>:<password>@<cluster-name>/syleshare"
+DATABASE_URL="mongodb+srv://username:[email protected]/styleshare"
 JWT_SECRET="secret"
 PORT=3001
 # EMAIL_USER=user_email_id

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
@@ -41,15 +41,15 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
 
   const getNavLinkClass = (path: string) => {
     return location.pathname === path
-      ? "block rounded-md px-3 py-2 text-base font-medium text-gray-50  dark:text-gray-50  bg-[#2575fc]"
-      : "block rounded-md px-3 py-2 text-base font-medium text-gray-50 dark:text-gray-50 hover:bg-[#2575fc] ";
+      ? "block rounded-md px-3 py-2 text-base font-medium text-gray-50  dark:text-gray-50  bg-[#2575fc] "
+      : "block rounded-md px-3 py-2 text-base font-medium text-gray-50 dark:text-gray-50 hover:bg-[#2575fc]   ";
   };
 
   return (
     <div>
       <nav className="bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-50">
         <div className="mx-auto max-w-7xl px-2 md:px-6 lg:px-8">
-          <div className="relative flex h-16 items-center justify-between">
+          <div className="relative flex h-16 items-center justify-between ">
             <Link to="/app" className="flex flex-shrink-0 items-center">
               <img
                 src={logo}
@@ -60,9 +60,9 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
                 Style Share
               </span>
             </Link>
-            <div className="flex items-center justify-between  w-full">
-              <div className="hidden lg:block md:ml-2">
-                <div className="flex  gap-[38vw]">
+            <div className="flex items-center justify-between  w-full ">
+              <div className="hidden lg:block md:ml-2 ">
+                <div className="flex  gap-[34vw]">
                   <div className="flex items-center ">
                     <Link
                       to="/app"
@@ -133,21 +133,23 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
                   {isLoggedIn && (
                     <button
                       type="button"
-                      className="relative mr-1 flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
+                      className="relative mr-2 w-10  flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
                       id="user-menu-button"
                       aria-expanded={isProfileDropdownOpen ? "true" : "false"}
                       aria-haspopup="true"
                       onClick={toggleProfileDropdown}
                     >
                       <span className="sr-only">Open user menu</span>
-                      <img
+
+                     <img
                         className="h-10 w-10 rounded-full"
                         src={
                           user?.avatar ||
                           `https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`
                         }
                         alt={user?.username}
                       />
+
                     </button>
                   )}
                 </div>
@@ -227,7 +229,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
           </div>
         </div>
         <div
-          className={`${isMenuOpen ? "block" : "hidden"} lg:hidden`}
+          className={`${isMenuOpen ? "block" : "hidden"} lg:hidden ]`}
           id="mobile-menu"
         >
           <div className="space-y-1 px-2 pt-2 pb-3">
@@ -258,6 +260,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
                 <Link
                   to="/app/new-post"
                   className={getNavLinkClass("/app/new-post")}
+
                   onClick={closeMenu}
                 >
                   New Post