Merge pull request #97 from qwikerx/feat/add-with-navbar-props

feat: sidebar add withNabar props
qwikerx · Jun 14, 2024 · 0a65d0f · 0a65d0f
2 parents ad97a3c + 45078da
commit 0a65d0f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 16 deletions.
diff --git a/apps/web/src/routes/docs/layout.tsx b/apps/web/src/routes/docs/layout.tsx
@@ -8,7 +8,7 @@ export default component$(() => {
 
   return (
     <div>
-      <Sidebar class="top-16 xl:top-14 pb-14">
+      <Sidebar withNavbar>
         <SidebarItemGroup>
           <SidebarCollapse label="Getting Started" opened>
             <SidebarItem tag={NavLink} href="/docs/getting-started/introduction">

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite-qwik",
-  "version": "0.21.2",
+  "version": "0.21.3",
   "description": "Unofficial Qwik components built for Flowbite and Tailwind CSS",
   "keywords": [
     "design-system",

diff --git a/packages/lib/src/components/Navbar/Navbar.tsx b/packages/lib/src/components/Navbar/Navbar.tsx
@@ -1,7 +1,7 @@
 import { component$, PropsOf, Slot, useContextProvider, useStore } from '@builder.io/qwik'
 import { twMerge } from 'tailwind-merge'
 import clsx from 'clsx'
-import { NavbarContext } from '~/components/Navbar/composables/use-navbar-context'
+import { navbarContext } from '~/components/Navbar/composables/use-navbar-context'
 
 type NavbarProps = PropsOf<'nav'> & {
   menuOpen?: boolean
@@ -14,12 +14,12 @@ type NavbarProps = PropsOf<'nav'> & {
 
 export const Navbar = component$<NavbarProps>(
   ({ border = false, fluid = false, sticky = false, separator = false, menuOpen = false, rounded = false, class: classNames, ...props }) => {
-    useContextProvider(NavbarContext, useStore({ isOpen: menuOpen }))
+    useContextProvider(navbarContext, useStore({ isOpen: menuOpen }))
 
     return (
       <nav
         class={twMerge(
-          'bg-white px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4',
+          'bg-white px-2 h-16 xl:h-14 dark:border-gray-700 flex items-center dark:bg-gray-800 sm:px-4',
           border && 'border',
           rounded && 'rounded',
           sticky && 'fixed z-50 w-full',
@@ -28,7 +28,7 @@ export const Navbar = component$<NavbarProps>(
         )}
         {...props}
       >
-        <div class={twMerge('mx-auto flex flex-wrap items-center justify-between', !fluid && 'container')}>
+        <div class={twMerge('mx-auto w-full flex flex-wrap items-center justify-between', !fluid && 'container')}>
           <Slot />
         </div>
       </nav>

diff --git a/packages/lib/src/components/Navbar/composables/use-navbar-context.ts b/packages/lib/src/components/Navbar/composables/use-navbar-context.ts
@@ -1,14 +1,14 @@
 import { $, createContextId, useComputed$, useContext } from '@builder.io/qwik'
 
 type NavbarContextProps = { isOpen: boolean }
-export const NavbarContext = createContextId<NavbarContextProps>('Navbar')
+export const navbarContext = createContextId<NavbarContextProps>('Navbar')
 
 export function useNavbarContext() {
-  const navbarContext = useContext(NavbarContext)
+  const state = useContext(navbarContext)
 
-  const isOpen = useComputed$(() => navbarContext.isOpen)
+  const isOpen = useComputed$(() => state.isOpen)
   const setIsOpen = $((value: boolean) => {
-    navbarContext.isOpen = value
+    state.isOpen = value
   })
 
   return {

diff --git a/packages/lib/src/components/Sidebar/Sidebar.tsx b/packages/lib/src/components/Sidebar/Sidebar.tsx
@@ -11,9 +11,10 @@ import { IconCloseOutline } from 'flowbite-qwik-icons'
 type SidebarProps = PropsOf<'aside'> & {
   highlight?: boolean
   closeButton?: boolean
+  withNavbar?: boolean
 }
 
-const InternalSidebar = component$<SidebarProps>(({ highlight = false, closeButton = false, class: classNames, ...attrs }) => {
+const InternalSidebar = component$<SidebarProps>(({ highlight = false, withNavbar = false, closeButton = false, class: classNames, ...attrs }) => {
   const { isOpen, setIsOpen } = useSidebarOpen()
   const sidebar = useSignal<HTMLElement>()
 
@@ -30,11 +31,9 @@ const InternalSidebar = component$<SidebarProps>(({ highlight = false, closeButt
       <aside
         ref={sidebar}
         class={twMerge(
-          'top-0 left-0 w-64 h-full relative',
-          [
-            'fixed z-50 left-0 h-full w-full max-w-64 transition-transform bg-white dark:bg-gray-900 border-r border-gray-100 dark:border-gray-700 sm:translate-x-0',
-            isOpen.value ? 'translate-x-0' : '-translate-x-full',
-          ],
+          'left-0 w-64 h-full fixed z-50 max-w-64 transition-transform bg-white dark:bg-gray-900 border-r border-gray-100 dark:border-gray-700 sm:translate-x-0',
+          isOpen.value ? 'translate-x-0' : '-translate-x-full',
+          withNavbar ? 'top-16 xl:top-14 pb-14' : 'top-0',
           clsx(classNames),
         )}
         aria-label="Sidebar"