Changed colors and stylings of Sidebar and Header mainly. Found gradi…

…ent colors for both to be used. Also fixed highlighting the active Link of both navigation menus as Sidebar and Headbar
chatonode · Jan 31, 2024 · 005b674 · 005b674
1 parent 419341a
commit 005b674
Show file tree

Hide file tree

Showing 8 changed files with 234 additions and 53 deletions.
diff --git a/client/app/components/(Layout)/(dashboard)/Sidebar/NavigationMenu.module.css b/client/app/components/(Layout)/(dashboard)/Sidebar/NavigationMenu.module.css
@@ -10,8 +10,29 @@ nav.navigation-container {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+  gap: 1em;
+  list-style: none;
 }
 
-.active {
-  background: darkgreen;
+.navigation-list li {
+  padding: 0.4em 0.6em;
+  border-radius: 0.55em;
+
+  transition: padding ease, background-color ease;
+  transition-duration: var(--global-transition-duration);
+}
+
+li.active {
+  display: flex;
+  background-color: var(
+    --gradient-light-end-color
+  ); /* Final dark color of the sidebar */
+
+  /* border-right: 5px solid;
+  padding-right: 5px; */
+}
+
+a.active {
+  /* color: var(--text-secondary); */
+  color: var(--text-primary);
 }
diff --git a/client/app/components/(Layout)/(dashboard)/Sidebar/NavigationMenu.tsx b/client/app/components/(Layout)/(dashboard)/Sidebar/NavigationMenu.tsx
@@ -6,51 +6,52 @@ import { usePathname } from 'next/navigation'
 const NavigationMenu = () => {
   const pathname = usePathname()
 
+  const dashboardClasses =
+    pathname === ERoute.Dashboard ? classes.active : undefined
+  const propertyDevelopersClasses =
+    pathname === ERoute.PropertyDevelopers ? classes.active : undefined
+  const createPropertyDeveloperClasses =
+    pathname === ERoute.CreatePropertyDeveloper ? classes.active : undefined
+  const createNotificationTemplateClasses =
+    pathname === ERoute.CreateNotificationTemplate ? classes.active : undefined
+
   return (
     <nav className={classes['navigation-container']}>
       <ul className={classes['navigation-list']}>
-        <li key={ERoute.Dashboard}>
-          <Link
-            href={ERoute.Dashboard}
-            className={
-              pathname === ERoute.Dashboard ? classes.active : undefined
-            }
-          >
+        <li key={ERoute.Dashboard} className={dashboardClasses}>
+          <Link href={ERoute.Dashboard} className={dashboardClasses}>
             Dashboard
           </Link>
         </li>
-        <li key={ERoute.PropertyDevelopers}>
+        <li
+          key={ERoute.PropertyDevelopers}
+          className={propertyDevelopersClasses}
+        >
           <Link
             href={ERoute.PropertyDevelopers}
-            className={
-              pathname === ERoute.PropertyDevelopers
-                ? classes.active
-                : undefined
-            }
+            className={propertyDevelopersClasses}
           >
             Property Developers
           </Link>
         </li>
-        <li key={ERoute.CreatePropertyDeveloper}>
+        <li
+          key={ERoute.CreatePropertyDeveloper}
+          className={createPropertyDeveloperClasses}
+        >
           <Link
             href={ERoute.CreatePropertyDeveloper}
-            className={
-              pathname === ERoute.CreatePropertyDeveloper
-                ? classes.active
-                : undefined
-            }
+            className={createPropertyDeveloperClasses}
           >
-            Create a Property Developer
+            New Property Developer
           </Link>
         </li>
-        <li key={ERoute.CreateNotificationTemplate}>
+        <li
+          key={ERoute.CreateNotificationTemplate}
+          className={createNotificationTemplateClasses}
+        >
           <Link
             href={ERoute.CreateNotificationTemplate}
-            className={
-              pathname === ERoute.CreateNotificationTemplate
-                ? classes.active
-                : undefined
-            }
+            className={createNotificationTemplateClasses}
           >
             Send a Notification
           </Link>

diff --git a/client/app/components/(Layout)/(dashboard)/Sidebar/SidebarContainer.module.css b/client/app/components/(Layout)/(dashboard)/Sidebar/SidebarContainer.module.css
@@ -1,13 +1,15 @@
 .sidebar-container {
   z-index: 9996;
-  font-size: 1.25em;
+  /* font-size: 1.25em; */
+  font-size: 1em;
 
-  background: #80dbff;
+  /* background: #afafaf; */
+  background: var(--sidebar-background-light);
   position: fixed;
   top: 0;
   left: 0;
   /* width: 100%; */
-  width: var(--sidebar-min-width-smaller-screens);
+  width: var(--sidebar-width-smaller-screens);
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -16,26 +18,26 @@
   transform: translate(-100%);
   transition: transform 0.26s ease-in-out;
   padding: 0 1em;
+  box-shadow: 0px 0px 8px 0px var(--text-primary);
 }
 
 .collapsed {
   transform: translate(0%);
 }
 
-
 @media (min-width: 40rem) {
   .sidebar-container,
   .collapsed {
-    width: var(--sidebar-min-width-larger-screens);
+    width: var(--sidebar-width-larger-screens);
+    font-size: 0.875em;
     flex: 0 0 auto;
-    position: relative;
+    /* position: relative; */
+    position: sticky;
     transform: none;
-    /* width: var(--sidebar-width-larger-screens); */
     /* height: 100%; */
   }
   /* 
   button.dashboard-opener {
     display: none;
   } */
-
 }
diff --git a/client/app/components/(Layout)/(public)/Header/Headbar/Headbar.module.css b/client/app/components/(Layout)/(public)/Header/Headbar/Headbar.module.css
@@ -18,9 +18,11 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
+  gap: 1em;
   padding: 20px 20px 10px 20px;
   border-radius: 0.2em;
-  background: green;
+  /* background: green; */
+  background: var(--headbar-collapsed-background-light);
   /* animation: hide-headbar-collapse 0.2s ease forwards; */
 }
 

diff --git a/client/app/components/(Layout)/(public)/Header/Headbar/Navigation.module.css b/client/app/components/(Layout)/(public)/Header/Headbar/Navigation.module.css
@@ -8,30 +8,86 @@ nav.navigation-container {
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+  gap: 1.5em;
 }
 
 .navigation-list li {
   list-style: none;
-  padding: 0 0.5em;
   position: relative;
+  display: flex;
 }
 
-li::before.active {
+/* .navigation-list li a { */
+/* padding: 0.8em 0; */
+/* border-bottom: 0.2em solid transparent; */
+/* transition: border-color
+    linear(
+      0 0%,
+      0 1.8%,
+      0.01 3.6%,
+      0.03 6.35%,
+      0.07 9.1%,
+      0.13 11.4%,
+      0.19 13.4%,
+      0.27 15%,
+      0.34 16.1%,
+      0.54 18.35%,
+      0.66 20.6%,
+      0.72 22.4%,
+      0.77 24.6%,
+      0.81 27.3%,
+      0.85 30.4%,
+      0.88 35.1%,
+      0.92 40.6%,
+      0.94 47.2%,
+      0.96 55%,
+      0.98 64%,
+      0.99 74.4%,
+      1 86.4%,
+      1 100%
+    ); */
+/* transition-duration: calc(var(--global-transition-duration) * 2); */
+/* } */
+
+.navigation-list li a::after {
   content: '';
   position: absolute;
   left: 0;
-  bottom: -5px;
-  width: 100%;
+  bottom: 0;
+  width: 50%;
+  height: 2px;
+  transition: width ease;
+  transition-duration: var(--global-transition-duration);
+
+  display: none;
 }
 
-.active {
-  background: yellow;
+.navigation-list li a.active::after,
+.navigation-list li a:hover::after,
+.navigation-list li a:focus::after {
+  /* left: calc(0% + var(--padding)); */
+  /* width: calc((100% - var(--padding)) / 2); */
+  width: 100%;
+  background-color: var(
+    --link-hover-color
+  ); /* Set the color of the bottom line */
 }
 
 @media (min-width: 40rem) {
   .navigation-list {
     flex-direction: row;
     align-items: center;
     margin-left: auto;
+    gap: 1em;
+  }
+
+  .navigation-list li a {
+    padding: 0.75em 0;
+  }
+
+  .navigation-list li a::after,
+  .navigation-list li a:hover::after,
+  .navigation-list li a:focus::after {
+    display: flex;
   }
 }
diff --git a/client/app/components/(Layout)/(public)/Header/Headbar/Navigation.tsx b/client/app/components/(Layout)/(public)/Header/Headbar/Navigation.tsx
@@ -17,17 +17,17 @@ const Navigation = (props: TNavigationProps) => {
       <ul className={classes['navigation-list']}>
         <li>
           <Link
-            href={ERoute.Home}
             className={pathname === ERoute.Home ? classes.active : undefined}
+            href={ERoute.Home}
             onClick={props.onNavigate}
           >
             Home
           </Link>
         </li>
         <li>
           <Link
-            href={ERoute.About}
             className={pathname === ERoute.About ? classes.active : undefined}
+            href={ERoute.About}
             onClick={props.onNavigate}
           >
             About
@@ -36,8 +36,8 @@ const Navigation = (props: TNavigationProps) => {
         <li>
           {!props.currentUser && (
             <Link
-              href={ERoute.Login}
               className={pathname === ERoute.Login ? classes.active : undefined}
+              href={ERoute.Login}
               onClick={props.onNavigate}
             >
               Login

diff --git a/client/app/components/(Layout)/(public)/Header/LogoContainer.module.css b/client/app/components/(Layout)/(public)/Header/LogoContainer.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: var(--header-logo-container-min-width);
+  width: var(--header-logo-container-width);
   flex: 0 0 auto;
 }