Merge pull request #224 from chingu-x/fix/top-and-side-navs-updates

Fix/top nav and side bar updates
chingu-x · Aug 30, 2024 · 4c5773f · 4c5773f
2 parents 9d27cba + 9043cc0
commit 4c5773f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 23 deletions.
diff --git a/src/components/navbar/ChinguMenu.tsx b/src/components/navbar/ChinguMenu.tsx
@@ -5,19 +5,20 @@ import routePaths from "@/utils/routePaths";
 
 export default function ChinguMenu() {
   return (
-    <Link href={routePaths.dashboardPage()}>
-      <div className="flex cursor-pointer flex-col items-center gap-2 sm:flex-row">
-        <Image
-          src={chinguLogo}
-          width={50}
-          height={50}
-          alt="Chingu Logo"
-          priority={true}
-        />
-        <h2 className="text-xs font-semibold text-base-300 sm:text-lg">
-          Chingu
-        </h2>
-      </div>
+    <Link
+      href={routePaths.dashboardPage()}
+      className="flex cursor-pointer flex-col flex-wrap items-center gap-2 sm:flex-row"
+    >
+      <Image
+        src={chinguLogo}
+        width={50}
+        height={50}
+        alt="Chingu Logo"
+        priority={true}
+      />
+      <h2 className="hidden text-xs font-semibold text-base-300 sm:flex sm:text-lg">
+        Chingu
+      </h2>
     </Link>
   );
 }
diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -6,11 +6,11 @@ interface NavbarProps {
 
 export default function Navbar({ children }: NavbarProps) {
   return (
-    <nav className="flex h-[65px] bg-base-100 p-2">
-      <div className="flex flex-1 sm:flex-row sm:pl-2">
+    <nav className="flex h-[75px] justify-between border-b border-base-100 bg-base-200 py-3 pl-6 pr-2 shadow-sm sm:px-10">
+      <div className="flex items-center sm:flex-row sm:pl-2">
         <ChinguMenu />
       </div>
-      <div className="flex items-center space-x-2 sm:gap-x-10">{children}</div>
+      <div className="flex items-center gap-x-8 sm:gap-x-10">{children}</div>
     </nav>
   );
 }
diff --git a/src/components/sidebar/PageButton.tsx b/src/components/sidebar/PageButton.tsx
@@ -30,7 +30,7 @@ export default function PageButton({
   ariaLabel,
 }: PageButtonProps) {
   const buttonStyles = `${
-    isOpen ? "w-[14.375rem] flex justify-start pl-6" : "w-[3.125rem] px-0"
+    isOpen ? "flex justify-start w-full" : "h-[3.125rem] w-[3.125rem] p-0"
   }`;
 
   const getButtonBackgroundStyle = (page: string) =>

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
@@ -146,15 +146,15 @@ export default function Sidebar() {
   return (
     <aside
       className={`${
-        isOpenSidebar ? "w-[18.438rem]" : "w-[5.813rem]"
-      } flex h-full flex-col justify-between border-r border-neutral-content bg-base-200 text-center shadow-[4px_4px_4px_0] shadow-neutral-focus/5`}
+        isOpenSidebar ? "w-[15.626rem]" : "w-auto"
+      } flex h-full flex-col justify-between border-r border-base-100 bg-base-200 text-center shadow-md`}
     >
       <div
         className={`flex flex-col ${
-          isOpenSidebar ? "items-start pl-10" : "items-center"
-        } pt-6`}
+          isOpenSidebar ? "items-start px-6 pt-6" : "items-center"
+        } px-5 pt-6`}
       >
-        <ul>
+        <ul className="w-full">
           {pagesProperties.map((element) => (
             <PageButton
               key={element.name}
@@ -186,7 +186,7 @@ export default function Sidebar() {
           </ul>
         )}
       </div>
-      <div className="flex min-h-[80px] flex-col items-end justify-start border-t border-neutral-content pr-6 pt-4">
+      <div className="flex min-h-[80px] flex-col items-end justify-start border-t border-base-100 pr-6 pt-4">
         <ExpandButton isOpen={isOpenSidebar} onClick={setIsOpenSidebar} />
       </div>
     </aside>