Merge pull request #64 from yanosea/61-change-header-to-sticky

✨feat: change header to sticky
yanosea · May 8, 2024 · 40400a1 · 40400a1
2 parents b602355 + 8fbe0db
commit 40400a1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/front/src/components/Header.astro b/front/src/components/Header.astro
@@ -1,11 +1,15 @@
 ---
 import IconLink from "@/components/IconLink.astro";
 import MainLinks from "@/components//MainLinks.astro";
+
+const { borderVisible = false } = Astro.props;
 ---
 
-<div class="flex sticky bottom-[100vh] w-full justify-between px-6 py-6">
+<div
+  class={`flex sticky top-0 w-full justify-between bg-background dark:bg-background-dark ${borderVisible ? "border-b border-gray dark:border-gray-dark" : ""} px-6 py-6 z-10`}
+>
   <IconLink icon="ri:home-4-fill" href="/" />
-  <div class="flex flex-row items-center space-x-4">
+  <div class="flex flex-row items-center space-x-2 sm:space-x-4">
     <MainLinks />
   </div>
 </div>
diff --git a/front/src/components/ThemeToggleButton.astro b/front/src/components/ThemeToggleButton.astro
@@ -105,11 +105,11 @@ import { Icon } from "astro-icon/components";
   @keyframes fadein {
     0% {
       opacity: 0;
-      background-color: #d8dee9;
+      background-color: #e5e9f0;
     }
     100% {
       opacity: 1;
-      background-color: #d8dee9;
+      background-color: #e5e9f0;
     }
   }
   body.fadeinlightclass {

diff --git a/front/src/layouts/PageLayout.astro b/front/src/layouts/PageLayout.astro
@@ -15,7 +15,7 @@ const { blogComments } = Astro.props;
 ---
 
 <BaseLayout {...Astro.props}>
-  <Header />
+  <Header borderVisible={true} />
   <main class="max-w-screen-lg m-auto px-6 py-6 space-y-6">
     <slot />
     {blogComments && <BlogComments />}

diff --git a/front/tailwind.config.cjs b/front/tailwind.config.cjs
@@ -10,12 +10,12 @@ module.exports = {
       },
       colors: {
         "main": "#3B4252",
-        "main-dark": "#D8DEE9",
+        "main-dark": "#E5E9F0",
         "sub": "#81A1C1",
         "sub-dark": "#81A1C1",
         "sub-darker": "#5E81AC",
         "sub-darker-dark": "#5E81AC",
-        "background": "#D8DEE9",
+        "background": "#E5E9F0",
         "background-dark": "#3B4252",
         "red": "#BF616A",
         "orange": "#D08770",
@@ -25,7 +25,9 @@ module.exports = {
         "purple": "#B48EAD",
         "purple-lighter": "#C69ABE",
         "blue": "#5E81AC",
-      },
+        "gray": "#D8DEE9",
+        "gray-dark": "#4C566A",
+     },
       typography: (theme) => ({
         DEFAULT: {
           css: {