@eventcatalog/core 2.7.12 → 2.7.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.7.13
+
+### Patch Changes
+
+- 6268155: feat(core): new styles added to header and docs sidebar
+
 ## 2.7.12
 
 ### Patch Changes

package/README.md

@@ -226,6 +226,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/carlosallexandre"><img src="https://avatars.githubusercontent.com/u/20143946?v=4?s=100" width="100px;" alt="Carlos Rodrigues"/><br /><sub><b>Carlos Rodrigues</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=carlosallexandre" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/XaaXaaX"><img src="https://avatars.githubusercontent.com/u/13409925?v=4?s=100" width="100px;" alt="omid eidivandi"/><br /><sub><b>omid eidivandi</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=XaaXaaX" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/IsmaelMartinez"><img src="https://avatars.githubusercontent.com/u/430992?v=4s=100" width="100px;" alt="IsmaelMartinez"/><br /><sub><b>IsmaelMartinez</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=IsmaelMartinez" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.7.12",
+  "version": "2.7.13",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Header.astro

@@ -27,8 +27,11 @@ const logo = {
 };
 ---
 
-<nav id="eventcatalog-header" class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl">
-  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-8 xxl:max-w-[96em]">
+<nav
+  id="eventcatalog-header"
+  class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-50 backdrop-blur-sm"
+>
+  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-10 xxl:max-w-[96em]">
     <div class="flex justify-between items-center">
       <div class="flex-shrink-0 flex items-center w-1/3">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center">
@@ -37,7 +40,7 @@ const logo = {
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow mx-4 w-1/3">
+      <div class="hidden lg:block flex-grow w-1/3">
         <Search />
       </div>
 
@@ -47,7 +50,7 @@ const logo = {
             navItems.map((item) => {
               const isActive = currentPath.includes(item.href);
               return (
-                <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                <li class={`font-light text-[0.8em] ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
                   <a href={item.href}>{item.label}</a>
                 </li>
               );
@@ -90,7 +93,7 @@ const logo = {
   </div>
 </nav>
 
-<div id="eventcatalog-header-spacer" class="h-20"></div>
+<div id="eventcatalog-header-spacer" class="h-16"></div>
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>

package/src/components/Search.astro

@@ -1,24 +1,26 @@
 ---
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
 import PageFindSearch from 'astro-pagefind/components/Search';
 ---
 
 <div>
-  <div class="relative mt-2 flex items-center">
+  <div class="relative flex items-center">
     <input
       id="search-dummy-input"
       type="text"
       name="search"
       id="search"
       placeholder="Search EventCatalog"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 px-4"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
+    <MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
+      <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>
   </div>
 </div>
 
-<div id="search-dialog" class="hidden relative z-10" role="dialog" aria-modal="true">
+<div id="search-dialog" class="hidden relative z-50" role="dialog" aria-modal="true">
   <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
   <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
     <div
@@ -46,6 +48,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
 <script>
   const dummyInput = document.getElementById('search-dummy-input');
   const dialog = document.getElementById('search-dialog');
+  const header = document.getElementById('eventcatalog-header');
 
   // Listen for the short cut keys
   window.addEventListener('keydown', (event) => {
@@ -56,6 +59,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
     if (event.key === 'Escape') {
       if (dialog) {
         dialog.style.display = 'none';
+        if (header) header.classList.add('backdrop-blur-sm');
       }
     }
   });
@@ -70,6 +74,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
         // @ts-ignore
         input && input.focus();
       }, 10);
+      if (header) header.classList.remove('backdrop-blur-sm');
       // @ts-ignore
       dialog.style.display = 'block';
     });
@@ -79,6 +84,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
   dialog?.addEventListener('click', function (e) {
     // @ts-ignore
     if (e.target.id === 'search-background') {
+      if (header) header.classList.add('backdrop-blur-sm');
       dialog.style.display = 'none';
     }
   });

package/src/layouts/DocsLayout.astro

@@ -21,8 +21,11 @@ import SEO from '../components/Seo.astro';
       <Header />
 
       <div>
-        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
-          <div class="w-full pt-4">
+        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full">
+          <div class="w-full">
+            <div class="sticky top-0 z-10 h-8 pointer-events-none -mt-4">
+              <div class="h-full bg-gradient-to-b from-white to-transparent"></div>
+            </div>
             <SideBar />
           </div>
         </nav>