lfg

irsyadadl · Oct 24, 2024 · 2c44758 · 2c44758
1 parent 424d4ec
commit 2c44758
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 24 deletions.
diff --git a/app/blocks/sidebar/sidebar-01/layout.tsx b/app/blocks/sidebar/sidebar-01/layout.tsx
@@ -19,8 +19,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <AppSidebar />
       <Sidebar.Inset>
         <header className="sticky justify-between sm:justify-start top-0 bg-bg h-[3.57rem] px-4 border-b flex items-center gap-x-2">
-          <span className="flex items-center">
-            <Sidebar.Trigger className="-ml-2 mr-1" />
+          <span className="flex items-center gap-x-3">
+            <Sidebar.Trigger className="-mx-2" />
             <Separator className="h-6 sm:block hidden" orientation="vertical" />
           </span>
           <SearchField className="sm:inline hidden sm:ml-1.5" />

diff --git a/app/blocks/sidebar/sidebar-02/layout.tsx b/app/blocks/sidebar/sidebar-02/layout.tsx
@@ -18,12 +18,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <Sidebar.Provider>
       <AppSidebar collapsible="dock" intent="inset" />
       <Sidebar.Inset>
-        <header className="sticky justify-between sm:justify-start top-0 bg-bg h-[3.57rem] px-4 border-b flex items-center gap-x-2">
-          <span className="flex items-center">
-            <Sidebar.Trigger className="-ml-2" />
-            <Separator className="h-6 mr-2 ml-1 sm:block hidden" orientation="vertical" />
+        <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
+          <span className="flex items-center gap-x-4">
+            <Sidebar.Trigger className="-mx-2" />
+            <Separator className="h-6 md:block hidden" orientation="vertical" />
 
-            <Breadcrumbs>
+            <Breadcrumbs className="md:flex hidden">
               <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
 
               <Breadcrumbs.Item>Settings</Breadcrumbs.Item>

diff --git a/app/blocks/sidebar/sidebar-03/layout.tsx b/app/blocks/sidebar/sidebar-03/layout.tsx
@@ -18,11 +18,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <Sidebar.Provider>
       <AppSidebar collapsible="dock" intent="floating" />
       <Sidebar.Inset>
-        <header className="sticky justify-between sm:justify-start top-0 bg-bg h-[3.57rem] px-4 flex items-center gap-x-2">
-          <span className="flex items-center gap-x-2">
-            <Sidebar.Trigger className="-ml-2 mr-1" />
+        <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
+          <span className="flex items-center gap-x-4">
+            <Sidebar.Trigger className="-mx-2" />
             <Separator className="h-6 sm:block hidden" orientation="vertical" />
-            <Breadcrumbs>
+            <Breadcrumbs className="md:flex hidden">
               <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
 
               <Breadcrumbs.Item>Billing</Breadcrumbs.Item>

diff --git a/app/blocks/sidebar/sidebar-04/layout.tsx b/app/blocks/sidebar/sidebar-04/layout.tsx
@@ -18,11 +18,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     <Sidebar.Provider defaultOpen={false}>
       <AppSidebar collapsible="dock" intent="inset" />
       <Sidebar.Inset>
-        <header className="sticky justify-between sm:justify-start top-0 bg-bg h-[3.57rem] px-4 flex items-center gap-x-2">
-          <span className="flex items-center">
-            <Sidebar.Trigger className="-ml-1.5" />
-            <Separator className="h-6 mr-3 ml-1 sm:block hidden" orientation="vertical" />
-            <Breadcrumbs>
+        <header className="sticky justify-between sm:justify-start top-0 h-[3.57rem] px-4 flex items-center gap-x-2">
+          <span className="flex items-center gap-x-4">
+            <Sidebar.Trigger className="-mx-2" />
+            <Separator className="h-6 md:block hidden" orientation="vertical" />
+            <Breadcrumbs className="md:flex hidden">
               <Breadcrumbs.Item href="/blocks/sidebar/sidebar-01">Dashboard</Breadcrumbs.Item>
 
               <Breadcrumbs.Item>Newsletter</Breadcrumbs.Item>

diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconChevronDown, IconSidebarFill } from "justd-icons"
+import { IconChevronDown, IconHamburger, IconSidebarFill } from "justd-icons"
 import type { DisclosureProps, LinkProps } from "react-aria-components"
 import {
   Link,
@@ -57,7 +57,7 @@ const Provider = React.forwardRef<
     },
     ref
   ) => {
-    const isMobile = useMediaQuery("(max-width: 600px)")
+    const isMobile = useMediaQuery("(max-width: 768px)")
     const [openMobile, setOpenMobile] = React.useState(false)
 
     const [_open, _setOpen] = React.useState(defaultOpen)
@@ -110,7 +110,7 @@ const Provider = React.forwardRef<
       <SidebarContext.Provider value={contextValue}>
         <div
           className={cn(
-            "group/sidebar-wrapper [--sidebar-width:16.5rem] [--sidebar-width-icon:3rem] flex min-h-svh w-full text-fg has-[[data-intent=inset]]:bg-secondary/50",
+            "group/sidebar-wrapper [--sidebar-width:16.5rem] [--sidebar-width-icon:3rem] flex min-h-svh w-full text-fg dark:has-[[data-intent=inset]]:bg-bg has-[[data-intent=inset]]:bg-secondary/50",
             className
           )}
           ref={ref}
@@ -130,7 +130,7 @@ const Inset = ({ className, ...props }: React.ComponentProps<"main">) => {
       className={cn([
         [
           "relative overflow-hidden flex min-h-svh flex-1 flex-col bg-bg",
-          "md:peer-data-[intent=inset]:ml-0 md:peer-data-[intent=inset]:rounded-xl md:peer-data-[intent=inset]:shadow-sm",
+          "md:peer-data-[intent=inset]:ml-0 md:peer-data-[intent=inset]:bg-tertiary md:peer-data-[intent=inset]:rounded-xl",
           "peer-data-[intent=inset]:overflow-hidden peer-data-[intent=inset]:border peer-data-[intent=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[intent=inset]:my-2 md:peer-data-[intent=inset]:mr-2",
           "md:peer-data-[intent=sidebar]:overflow-visible"
         ],
@@ -174,12 +174,12 @@ const Sidebar = ({
           data-sidebar="sidebar"
           data-mobile="true"
           classNames={{
-            content: "[&_[role=dialog]]:p-0 bg-tertiary p-0 text-fg [&>button]:hidden"
+            content: "bg-tertiary text-fg [&>button]:hidden"
           }}
           isStack={intent === "floating"}
           side={side}
         >
-          <Sheet.Body className="p-0">{children}</Sheet.Body>
+          <Sheet.Body className="p-0 sm:p-0">{children}</Sheet.Body>
         </Sheet.Content>
       </Sheet>
     )
@@ -347,7 +347,8 @@ const Trigger = ({ className, onPress, ...props }: React.ComponentProps<typeof B
       }}
       {...props}
     >
-      <IconSidebarFill />
+      <IconSidebarFill className="md:inline hidden" />
+      <IconHamburger className="md:hidden inline" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
@@ -380,7 +381,7 @@ const footer = tv({
   variants: {
     collapsed: {
       false: [
-        "p-2 [&_[slot=menu-trigger]]:w-full [&_[slot=menu-trigger]]:justify-start [&_[slot=menu-trigger]]:flex [&_[slot=menu-trigger]]:items-center"
+        "p-2 [&_[slot=menu-trigger]>[data-slot=avatar]]:-ml-1.5 [&_[slot=menu-trigger]]:w-full [&_[slot=menu-trigger]]:hover:bg-muted [&_[slot=menu-trigger]]:justify-start [&_[slot=menu-trigger]]:flex [&_[slot=menu-trigger]]:items-center"
       ],
       true: "size-12 p-1 [&_[slot=menu-trigger]]:size-9 justify-center items-center"
     }