copy github page layout

scout-ch · Oct 19, 2023 · 37a279f · 37a279f
1 parent 5094e10
commit 37a279f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -123,12 +123,12 @@ function App() {
         <div className='App'>
           <Router basename="/">
             <LinksContext.Provider value={links}>
-              <PageLayout>
+              <Header />
+              <PageLayout sx={{padding: '0'}}>
                 <PageLayout.Content>
                   {/* to have a sticky header, it needs to be placed here
                   in the content */}
-                  <Header />
-                    <main id="main-content">
+                    <main id="main-content" className='p-4'>
                       <Routes>
                           <Route path="/search" element={<SearchPage page={searchPage} sections = {sections} />} />
                           <Route path="/impressum" element={<ImpressumPage />} />
@@ -141,7 +141,7 @@ function App() {
                 </PageLayout.Content>
                 <PageLayout.Pane position={'start'} sticky  //resizable
                   hidden={{narrow: true, regular: true, wide: false}}
-                  // offsetHeader={64}
+                  offsetHeader={48}
                 >
                   <SidebarNav startPageMenuName={'start'} variant='full'/>
                 </PageLayout.Pane>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -136,7 +136,8 @@ const Header = ({ t }: Props) => {
     <>
         <header
           className={cx(
-            'color-bg-default p-2 z-1 sections position-sticky top-0 z-1',
+            'color-bg-default p-2 px-4 z-1 sections position-sticky top-0 z-1',
+            'border-bottom color-border-subtle',
             scroll && 'color-shadow-small',
           )}
           role='banner'

diff --git a/src/index.scss b/src/index.scss
@@ -33,6 +33,10 @@ html {
   font-family: sans-serif;
 }
 
+.App > div > div {
+  max-width: unset;
+}
+
 .content {
   h1, h2, h3, h4, h5, h6 {
     scroll-margin-top: 48px;