Merge pull request #562 from haseebzaki-07/new_branch

Improved right side of the navbar
VaibhavArora314 · Aug 5, 2024 · 0d8d46d · 0d8d46d
2 parents 330fa3c + 10c4b88
commit 0d8d46d
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
@@ -4,4 +4,4 @@ PORT=3001
 # EMAIL_USER=user_email_id
 # EMAIL_PASS=16char_app_password
 # SEND_EMAIL=true # Uncomment this to turn on email functionality on development
-# API_KEY="your google gemini api key"
+# API_KEY="your google gemini api key"
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