Refactor Layout.astro to add footer component and container div

withstudiocms · Dec 24, 2024 · 7a886f1 · 7a886f1
1 parent 69e6b91
commit 7a886f1
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/packages/studiocms_dashboard/src/components/Layout.astro b/packages/studiocms_dashboard/src/components/Layout.astro
@@ -18,6 +18,7 @@ type Props = {
 	lang?: string;
 	sidebar?: false | 'single' | 'double';
 	requiredPermission?: 'owner' | 'admin' | 'editor' | 'visitor' | 'unknown' | 'none';
+	footer?: boolean;
 };
 
 const {
@@ -27,6 +28,7 @@ const {
 	lang = 'en-us',
 	requiredPermission = 'unknown',
 	sidebar = 'single',
+	footer = true,
 } = Astro.props;
 
 const title = makePageTitle(propTitle, dbConfig);
@@ -56,10 +58,13 @@ const description = propDescription ?? dbConfig.description;
         </Button>
       )}
       <div class="container">
+        <div class="page-header">
+          <slot name="header" />
+        </div>
         <slot />
       </div>
 
-      <Footer />
+      { footer && <Footer /> }
     </main>
   </body>
 </html>
diff --git a/packages/studiocms_dashboard/src/routes/404.astro b/packages/studiocms_dashboard/src/routes/404.astro
@@ -8,6 +8,7 @@ import { Layout } from '../components';
   title="Error 404" 
   description="Error 404 - Page not found" 
   sidebar={false} 
+  footer={false}
   requiredPermission="none">
   <div class="notfound-container">
     <div class="notfound">

diff --git a/packages/studiocms_dashboard/src/routes/configuration.astro b/packages/studiocms_dashboard/src/routes/configuration.astro
@@ -17,14 +17,16 @@ const lang = 'en-us';
   {pagePreRendered}
   {lang}
   >
-
-  <PageHeader title="Site Configuration">
-    <Button variant="solid" color="primary" type="submit" form="site-config-form">
-      <Icon slot="start-content" name="check" width={24} height={24} />
-      Save Changes
-    </Button>
-  </PageHeader>
 
+  <div slot="header">
+    <PageHeader title="Site Configuration">
+      <Button variant="solid" color="primary" type="submit" form="site-config-form">
+        <Icon slot="start-content" name="check" width={24} height={24} />
+        Save Changes
+      </Button>
+    </PageHeader>
+  </div>
+
   {
     pagePreRendered 
     ? <ConfigForm server:defer transition:persist transition:persist-props />

diff --git a/packages/studiocms_dashboard/src/routes/index.astro b/packages/studiocms_dashboard/src/routes/index.astro
@@ -19,7 +19,11 @@ const t = useTranslations(lang, '@studiocms/dashboard:index');
   {lang}
   >
 
-  <DashboardPageHeader {pagePreRendered} />
-  <span>{t('sub-header')}</span>
+  <div slot="header">
+    <DashboardPageHeader {pagePreRendered} />
+    <span>{t('sub-header')}</span>
+  </div>
+
+
 
 </Layout>
diff --git a/packages/studiocms_dashboard/src/routes/profile.astro b/packages/studiocms_dashboard/src/routes/profile.astro
@@ -28,8 +28,10 @@ const shouldShowOAuth = showOAuth && providerData.some(({ enabled }) => enabled)
   {pagePreRendered}
   {lang}
   >
-
-  <PageHeader title="Your Profile" />
+
+  <div slot="header">
+    <PageHeader title="Your Profile" />
+  </div>
 
   <div class="page-content">
 

diff --git a/packages/studiocms_dashboard/src/styles/base.css b/packages/studiocms_dashboard/src/styles/base.css
@@ -158,3 +158,7 @@ main {
 	height: 100%;
 	min-height: 90vh;
 }
+
+.container .page-header {
+	margin-bottom: 1.5rem;
+}