hipstersmoothie.com / hip-ui
A design system in a box. hip-ui.tngl.io/docs/introduction
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

header layout around sidebar layout

Andrew Lisowski d454b453 a3a40cf9

+105 -19
+4
apps/docs/src/components/header-layout/index.tsx
··· 30 30 paddingBottom: { 31 31 default: spacing["10"], 32 32 [containerBreakpoints.sm]: spacing["12"], 33 + ":has(> [data-sidebar-layout=true])": "0 !important", 33 34 }, 34 35 paddingLeft: { 35 36 default: spacing["4"], 36 37 [containerBreakpoints.sm]: spacing["8"], 38 + ":has(> [data-sidebar-layout=true])": "0 !important", 37 39 }, 38 40 paddingRight: { 39 41 default: spacing["4"], 40 42 [containerBreakpoints.sm]: spacing["8"], 43 + ":has(> [data-sidebar-layout=true])": "0 !important", 41 44 }, 42 45 paddingTop: { 43 46 default: spacing["2"], 44 47 [containerBreakpoints.sm]: spacing["6"], 48 + ":has(> [data-sidebar-layout=true])": "0 !important", 45 49 }, 46 50 width: "100%", 47 51 },
+5 -1
apps/docs/src/components/sidebar-layout/index.tsx
··· 98 98 ...props 99 99 }: SidebarLayoutRootProps) => { 100 100 return ( 101 - <div {...props} {...stylex.props(styles.wrapper, style)}> 101 + <div 102 + {...props} 103 + {...stylex.props(styles.wrapper, style)} 104 + data-sidebar-layout={true} 105 + > 102 106 <div {...stylex.props(styles.root)}>{children}</div> 103 107 </div> 104 108 );
-17
apps/docs/src/components/theme/media-queries.stylex.tsx
··· 16 16 "2xl": "@container (min-width: 96rem)", 17 17 }); 18 18 19 - /** 20 - * Named container breakpoints that query parent containers only. 21 - * Use these when you want to query a parent container by name, 22 - * preventing elements with containerType from querying themselves. 23 - * 24 - * Usage: 25 - * 1. Set container-name on the parent: containerName: "parent" 26 - * 2. Use parentContainerBreakpoints in child styles 27 - */ 28 - export const parentContainerBreakpoints = stylex.defineConsts({ 29 - sm: "@container parent (min-width: 40rem)", 30 - md: "@container parent (min-width: 48rem)", 31 - lg: "@container parent (min-width: 64rem)", 32 - xl: "@container parent (min-width: 80rem)", 33 - "2xl": "@container parent (min-width: 96rem)", 34 - }); 35 - 36 19 export const maxBreakpoints = stylex.defineConsts({ 37 20 sm: "@media (max-width: 40rem)", 38 21 });
+5
apps/docs/src/docs/components/navigation/sidebar-layout.mdx
··· 7 7 import { Example } from '../../../lib/Example' 8 8 import { Basic } from '../../../examples/sidebar-layout/basic' 9 9 import { WithHeaderLayout } from '../../../examples/sidebar-layout/with-header-layout' 10 + import { WithHeaderLayoutWrapper } from '../../../examples/sidebar-layout/with-header-layout-wrapper' 10 11 11 12 <Example src={Basic} noPadding /> 12 13 ··· 31 32 You can combine the sidebar layout with the header layout to create a page layout with a sidebar and header. 32 33 33 34 <Example src={WithHeaderLayout} noPadding /> 35 + 36 + You can also wrap the sidebar layout in a header layout. 37 + 38 + <Example src={WithHeaderLayoutWrapper} noPadding /> 34 39 35 40 ## Related Components 36 41
+82
apps/docs/src/examples/sidebar-layout/with-header-layout-wrapper.tsx
··· 1 + import { SidebarLayout } from "@/components/sidebar-layout"; 2 + import { 3 + Sidebar, 4 + SidebarHeader, 5 + SidebarItem, 6 + SidebarSection, 7 + } from "@/components/sidebar"; 8 + import { HeaderLayout } from "@/components/header-layout"; 9 + import { 10 + Navbar, 11 + NavbarLink, 12 + NavbarLogo, 13 + NavbarNavigation, 14 + } from "@/components/navbar"; 15 + import { Footer } from "@/components/footer"; 16 + import { Content } from "@/components/content"; 17 + import { Heading1 } from "@/components/typography"; 18 + import { Body } from "@/components/typography"; 19 + 20 + function Logo() { 21 + return ( 22 + <svg 23 + width="32" 24 + height="32" 25 + viewBox="0 0 120 120" 26 + fill="black" 27 + xmlns="http://www.w3.org/2000/svg" 28 + > 29 + <circle cx="60" cy="60" r="50" stroke="black" strokeWidth="2" /> 30 + </svg> 31 + ); 32 + } 33 + 34 + export function WithHeaderLayoutWrapper() { 35 + return ( 36 + <HeaderLayout.Root> 37 + <HeaderLayout.Header> 38 + <Navbar> 39 + <NavbarLogo> 40 + <Logo /> 41 + </NavbarLogo> 42 + <NavbarNavigation justify="right"> 43 + <NavbarLink href="/dashboard">Dashboard</NavbarLink> 44 + <NavbarLink href="/projects">Projects</NavbarLink> 45 + <NavbarLink href="/settings">Settings</NavbarLink> 46 + </NavbarNavigation> 47 + </Navbar> 48 + </HeaderLayout.Header> 49 + <HeaderLayout.Page> 50 + <SidebarLayout.Root> 51 + <SidebarLayout.Sidebar> 52 + <Sidebar> 53 + <SidebarSection title="Navigation"> 54 + <SidebarItem>Dashboard</SidebarItem> 55 + <SidebarItem>Projects</SidebarItem> 56 + <SidebarItem>Settings</SidebarItem> 57 + </SidebarSection> 58 + </Sidebar> 59 + </SidebarLayout.Sidebar> 60 + <SidebarLayout.Page> 61 + <Content> 62 + <Heading1>Page Content</Heading1> 63 + <Body> 64 + This is the main page content area. The sidebar is on the left, 65 + and this content area takes up the remaining space. 66 + </Body> 67 + </Content> 68 + </SidebarLayout.Page> 69 + </SidebarLayout.Root> 70 + </HeaderLayout.Page> 71 + <HeaderLayout.Footer> 72 + <Footer.Root> 73 + <Footer.Section> 74 + <Footer.Copyright> 75 + © 2025 Company Name. All rights reserved. 76 + </Footer.Copyright> 77 + </Footer.Section> 78 + </Footer.Root> 79 + </HeaderLayout.Footer> 80 + </HeaderLayout.Root> 81 + ); 82 + }
+4
packages/hip-ui/src/components/header-layout/index.tsx
··· 30 30 paddingBottom: { 31 31 default: spacing["10"], 32 32 [containerBreakpoints.sm]: spacing["12"], 33 + ":has(> [data-sidebar-layout=true])": "0 !important", 33 34 }, 34 35 paddingLeft: { 35 36 default: spacing["4"], 36 37 [containerBreakpoints.sm]: spacing["8"], 38 + ":has(> [data-sidebar-layout=true])": "0 !important", 37 39 }, 38 40 paddingRight: { 39 41 default: spacing["4"], 40 42 [containerBreakpoints.sm]: spacing["8"], 43 + ":has(> [data-sidebar-layout=true])": "0 !important", 41 44 }, 42 45 paddingTop: { 43 46 default: spacing["2"], 44 47 [containerBreakpoints.sm]: spacing["6"], 48 + ":has(> [data-sidebar-layout=true])": "0 !important", 45 49 }, 46 50 width: "100%", 47 51 },
+5 -1
packages/hip-ui/src/components/sidebar-layout/index.tsx
··· 98 98 ...props 99 99 }: SidebarLayoutRootProps) => { 100 100 return ( 101 - <div {...props} {...stylex.props(styles.wrapper, style)}> 101 + <div 102 + {...props} 103 + {...stylex.props(styles.wrapper, style)} 104 + data-sidebar-layout={true} 105 + > 102 106 <div {...stylex.props(styles.root)}>{children}</div> 103 107 </div> 104 108 );