thusfar

netherphp · Oct 7, 2024 · c3a3872 · c3a3872
1 parent b6e22c4
commit c3a3872
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 47 deletions.
diff --git a/app/www/themes/default/area/design/header-sitemenu.phtml b/app/www/themes/default/area/design/header-sitemenu.phtml
@@ -3,7 +3,7 @@
 echo Nether\Atlantis\UI\SiteMenu::FromSurfaceWith($Surface, [
 	'Pages' => [
 		Nether\Atlantis\UI\SiteMenuPage::FromSurfaceWith($Surface, [
-			'UUID'    => 'SiteMenuMain',
+			'UUID'    => 'SiteMenuRoot',
 			'Content' => 'area:sitemenu-main/root'
 		]),
 		Nether\Atlantis\UI\SiteMenuPage::FromSurfaceWith($Surface, [

diff --git a/app/www/themes/default/area/design/header.phtml b/app/www/themes/default/area/design/header.phtml
@@ -77,7 +77,7 @@ $ShowDemoNote = $App->IsEnvType('demo');
 
 			<!-- SITE MENU BUTTON -->
 			<div class="col-auto">
-				<button class="btn btn-outline-light atl-page-header-menubtn d-flex align-items-center gap-2" data-sitemenu="SiteMenuMain">
+				<button class="btn btn-outline-light atl-page-header-menubtn d-flex align-items-center gap-2" data-sitemenu="SiteMenuRoot">
 					<?php if($MenuBtnLbl): ?>
 					<span>
 						<span><?php $Util->Print($MenuBtnLbl) ?></span>

diff --git a/app/www/themes/default/area/elements/sitemenu/main.phtml b/app/www/themes/default/area/elements/sitemenu/main.phtml
@@ -8,7 +8,7 @@ $ID ??= $Element->GetID();
 
 ?>
 
-<div id="<?php $Util->Print($ID) ?>" class="sitemenu" data-sitemenu-datakey="<?php $Util->Print($Element->DataKey) ?>">
+<div id="<?php $Util->Print($ID) ?>" class="sitemenu atl-sitemenu" data-sitemenu-datakey="<?php $Util->Print($Element->DataKey) ?>">
 
 	<?php
 	$Element->Pages

diff --git a/app/www/themes/default/area/elements/sitemenu/page.phtml b/app/www/themes/default/area/elements/sitemenu/page.phtml
@@ -21,6 +21,8 @@ use Nether\User;
 // data-bs-scroll="true" no bootstrap auto managed body props/classes.
 // data-bs-backdrop="false" no bootstrap auto managed overlay backdrops.
 
+$ElementID = $Element->GetID();
+
 $Content = match(TRUE) {
 	($Element->Content instanceof Surface\Element)
 	=> $Element->Content->Render(),
@@ -38,40 +40,68 @@ $Content = match(TRUE) {
 	}
 };
 
+$Footer = match(TRUE) {
+	($Element->Footer instanceof Surface\Element)
+	=> $Element->Footer->Render(),
+
+	(is_callable($Element->Footer))
+	=> ($Element->Footer)($__SCOPE),
+
+	default
+	=> match(TRUE) {
+		(str_starts_with($Element->Footer, 'area:'))
+		=> $Surface->GetArea(substr($Element->Footer, 4), $__SCOPE),
+
+		default
+		=> $Element->Footer
+	}
+};
+
+$ShowBackBtn = $ElementID !== 'SiteMenuRoot';
+$ShowFooter = (strlen($Footer) > 0);
+
 ?>
 
 <div id="<?php $Util->Print($Element->GetID()) ?>" class="offcanvas offcanvas-end offcanvas-glass z-index-high atl-sitemenu-page" data-bs-scroll="true" data-bs-backdrop="false">
+	<div class="atl-sitemenu-page-container">
 
-	<div class="offcanvas-header">
-		<div>
-			<div class="offcanvas-title">
-				<?php $Util->Print($Element->Title) ?>
-				<?php if($Element->Subtitle): ?>
-				<div class="offcanvas-subtitle">
-					<i class="mdi mdi-chevron-right"></i> <?php $Util->Print($Element->Subtitle) ?>
+		<div class="offcanvas-header">
+			<div>
+				<div class="offcanvas-title">
+					<?php $Util->Print($Element->Title) ?>
+					<?php if($Element->Subtitle): ?>
+					<div class="offcanvas-subtitle">
+						<i class="mdi mdi-chevron-right"></i> <?php $Util->Print($Element->Subtitle) ?>
+					</div>
+					<?php endif; ?>
 				</div>
-				<?php endif; ?>
+			</div>
+			<div>
+				<button type="button" class="btn btn-dark" data-<?php $Util->Print($Element->GetDataKey()) ?>-close="parent">
+					<i class="mdi mdi-close"></i>
+				</button>
 			</div>
 		</div>
-		<div>
-			<button type="button" class="btn btn-dark" data-<?php $Util->Print($Element->GetDataKey()) ?>-close="parent">
-				<i class="mdi mdi-close"></i>
-			</button>
-		</div>
-	</div>
 
-	<div class="offcanvas-body">
+		<div class="offcanvas-body">
+			<?php if($ShowBackBtn): ?>
+			<div class="mb-4">
+				<a href="#" class="tt-uppercase" data-<?php $Util->Print($Element->GetDataKey()) ?>-close="parent">
+					<i class="mdi mdi-chevron-double-left"></i>
+					Back
+				</a>
+			</div>
+			<?php endif; ?>
 
-	<?php if($Element->GetID() !== 'SiteMenuRoot'): ?>
-	<div class="mb-4">
-		<a href="#" class="tt-uppercase" data-<?php $Util->Print($Element->GetDataKey()) ?>-close="parent">
-			<i class="mdi mdi-chevron-double-left"></i>
-			Back
-		</a>
-	</div>
-	<?php endif; ?>
+			<?php echo $Content ?>
 
-<?php echo $Content ?>
+		</div>
 
+		<?php if($ShowFooter): ?>
+		<div class="offcanvas-footer">
+			<?php echo $Footer ?>
+		</div>
+		<?php endif; ?>
 	</div>
+
 </div>
diff --git a/app/www/themes/default/area/sitemenu-main/root-footer.phtml b/app/www/themes/default/area/sitemenu-main/root-footer.phtml
diff --git a/app/www/themes/default/area/sitemenu-main/root.phtml b/app/www/themes/default/area/sitemenu-main/root.phtml
@@ -23,7 +23,7 @@ $Menu = (
 	Atlantis\Struct\DropdownMenu::New()
 	->ItemNew('Home', 'mdi-home', '/')
 	->ItemNew('Docs', 'mdi-file-document', '#',
-		Attr: [ 'data-sitemenu' => 'SiteMenuMain/SiteMenuDocs' ]
+		Attr: [ 'data-sitemenu' => 'SiteMenuRoot/SiteMenuDocs' ]
 	)
 );
 

diff --git a/app/www/themes/default/css/src/elements/sitemenu.css b/app/www/themes/default/css/src/elements/sitemenu.css
@@ -1,3 +1,56 @@
+:root {
+	--theme-sitemenu-bg: #000000AA;
+	--theme-sitemenu-fg: var(--theme-white);
+	--theme-sitemenu-blur: 8px;
+	--theme-sitemenu-page-padding: 0.0rem;
+	--theme-sitemenu-page-corner: 0px;
+	--theme-sitemenu-page-edge: 0px solid #FFFFFF22;
+	--theme-sitemenu-page-shadow: 0px 0px 14px #000000AA;
+}
+
+/* bootstrap resets */
+
+.atl-sitemenu-page.offcanvas {
+	background: transparent;
+}
+
+/* atlantis sitemenu */
+
+.atl-sitemenu .atl-sitemenu-page.show,
+.atl-sitemenu .atl-sitemenu-page.showing,
+.atl-sitemenu .atl-sitemenu-page.hiding {
+
+}
+
+.atl-sitemenu .atl-sitemenu-page.show {
+
+}
+
+/* atlantis sitemenu page */
+
+.atl-sitemenu-page {
+	border: 0px;
+	padding: var(--theme-sitemenu-page-padding);
+}
+
+.atl-sitemenu-page.offcanvas-end {
+	border-left: var(--theme-sitemenu-page-edge) !important;
+	margin-right: var(--theme-sitemenu-page-padding);
+}
+
+.atl-sitemenu-page-container {
+	display: flex;
+	flex-direction: column;
+
+	background-color: var(--theme-sitemenu-bg);
+	color: var(--theme-sitemenu-fg);
+	backdrop-filter: blur(var(--theme-sitemenu-blur));
+	border-radius: var(--theme-sitemenu-page-corner);
+	box-shadow: var(--theme-sitemenu-page-shadow);
+	min-height: 100%;
+	overflow: hidden;
+}
+
 .atl-sitemenu-page .offcanvas-header {
 	display: flex;
 	justify-content: space-between;
@@ -18,6 +71,18 @@
 	padding: 0px;
 }
 
+.atl-sitemenu-page .offcanvas-body {
+	overflow: hidden;
+	overflow-y: scroll;
+	height: 100%;
+}
+
+.atl-sitemenu-page .offcanvas-footer {
+	font-size: small;
+	padding: 1rem;
+	text-align: center;
+}
+
 .sitemenu-body-lock {
 	position: fixed;
 	overflow-y: hidden;

diff --git a/app/www/themes/default/css/src/ext-bootstrap.css b/app/www/themes/default/css/src/ext-bootstrap.css
@@ -597,7 +597,7 @@ grouped are to be considered depreciated. */
 /*******************************************************************************
 **** offcanvas tweaks *********************************************************/
 
-.offcanvas {
+.zoffcanvas .atl-offcanvas-page {
 	box-shadow: 0px 0px 24px var(--theme-black);
 	z-index: 9101;
 	scrollbar-gutter: auto;
@@ -606,7 +606,7 @@ grouped are to be considered depreciated. */
 	transition: transform var(--theme-anim-ease-fast), width var(--theme-anim-ease-fast), padding-right var(--theme-anim-ease-fast), opacity var(--theme-anim-ease-fast), filter var(--theme-anim-ease-fast);
 }
 
-.offcanvas.offcanvas-glass {
+.zoffcanvas.offcanvas-glass .atl-offcanvas-page {
 	background-color: var(--theme-glass-bg-75);
 	backdrop-filter: var(--theme-glass-filter-thick);
 	-webkit-backdrop-filter: var(--theme-glass-filter-thick);

diff --git a/app/www/themes/default/css/styles.css b/app/www/themes/default/css/styles.css
@@ -1,5 +1,5 @@
 /*//
-@date 2024-10-06 22:37:51 UTC
+@date 2024-10-07 07:06:55 UTC
 @files 43 [
     "src\/imports.css",
     "src\/main.css",
@@ -1124,7 +1124,7 @@ grouped are to be considered depreciated. */
 /*******************************************************************************
 **** offcanvas tweaks *********************************************************/
 
-.offcanvas {
+.zoffcanvas .atl-offcanvas-page {
 	box-shadow: 0px 0px 24px var(--theme-black);
 	z-index: 9101;
 	scrollbar-gutter: auto;
@@ -1133,7 +1133,7 @@ grouped are to be considered depreciated. */
 	transition: transform var(--theme-anim-ease-fast), width var(--theme-anim-ease-fast), padding-right var(--theme-anim-ease-fast), opacity var(--theme-anim-ease-fast), filter var(--theme-anim-ease-fast);
 }
 
-.offcanvas.offcanvas-glass {
+.zoffcanvas.offcanvas-glass .atl-offcanvas-page {
 	background-color: var(--theme-glass-bg-75);
 	backdrop-filter: var(--theme-glass-filter-thick);
 	-webkit-backdrop-filter: var(--theme-glass-filter-thick);
@@ -3753,6 +3753,59 @@ is being used and then prefixing all these with that theme name, if i recall. */
 /*//////////////////////////////////////////////////////////////////////////////
 //// src/elements/sitemenu.css ///////////////////////////////////////////////*/
 
+:root {
+	--theme-sitemenu-bg: #000000AA;
+	--theme-sitemenu-fg: var(--theme-white);
+	--theme-sitemenu-blur: 8px;
+	--theme-sitemenu-page-padding: 0.0rem;
+	--theme-sitemenu-page-corner: 0px;
+	--theme-sitemenu-page-edge: 0px solid #FFFFFF22;
+	--theme-sitemenu-page-shadow: 0px 0px 14px #000000AA;
+}
+
+/* bootstrap resets */
+
+.atl-sitemenu-page.offcanvas {
+	background: transparent;
+}
+
+/* atlantis sitemenu */
+
+.atl-sitemenu .atl-sitemenu-page.show,
+.atl-sitemenu .atl-sitemenu-page.showing,
+.atl-sitemenu .atl-sitemenu-page.hiding {
+
+}
+
+.atl-sitemenu .atl-sitemenu-page.show {
+
+}
+
+/* atlantis sitemenu page */
+
+.atl-sitemenu-page {
+	border: 0px;
+	padding: var(--theme-sitemenu-page-padding);
+}
+
+.atl-sitemenu-page.offcanvas-end {
+	border-left: var(--theme-sitemenu-page-edge) !important;
+	margin-right: var(--theme-sitemenu-page-padding);
+}
+
+.atl-sitemenu-page-container {
+	display: flex;
+	flex-direction: column;
+
+	background-color: var(--theme-sitemenu-bg);
+	color: var(--theme-sitemenu-fg);
+	backdrop-filter: blur(var(--theme-sitemenu-blur));
+	border-radius: var(--theme-sitemenu-page-corner);
+	box-shadow: var(--theme-sitemenu-page-shadow);
+	min-height: 100%;
+	overflow: hidden;
+}
+
 .atl-sitemenu-page .offcanvas-header {
 	display: flex;
 	justify-content: space-between;
@@ -3773,6 +3826,18 @@ is being used and then prefixing all these with that theme name, if i recall. */
 	padding: 0px;
 }
 
+.atl-sitemenu-page .offcanvas-body {
+	overflow: hidden;
+	overflow-y: scroll;
+	height: 100%;
+}
+
+.atl-sitemenu-page .offcanvas-footer {
+	font-size: small;
+	padding: 1rem;
+	text-align: center;
+}
+
 .sitemenu-body-lock {
 	position: fixed;
 	overflow-y: hidden;

diff --git a/src/Nether/Atlantis/UI/SiteMenuPage.php b/src/Nether/Atlantis/UI/SiteMenuPage.php
@@ -1,15 +1,31 @@
-<?php
+<?php ##########################################################################
+################################################################################
 
 namespace Nether\Atlantis\UI;
 
 use Nether\Common;
 use Nether\Surface;
 
+################################################################################
+################################################################################
+
 class SiteMenuPage
 extends Surface\Element {
 
-	////////////////////////////////////////////////////////////////
-	// IMPLEMENTS: Surface\Element /////////////////////////////////
+	public SiteMenu
+	$Menu;
+
+	public string
+	$Title = '';
+
+	public string
+	$Subtitle = '';
+
+	public mixed
+	$Content = '';
+
+	public mixed
+	$Footer = '';
 
 	public string
 	$Area = 'elements/sitemenu/page';
@@ -29,24 +45,16 @@ public function
 		return 'unknownmenu';
 	}
 
-	public SiteMenu
-	$Menu;
+	////////////////////////////////////////////////////////////////
+	////////////////////////////////////////////////////////////////
 
 	public function
 	SetMenu(SiteMenu $Menu):
 	static {
 
 		$this->Menu = $Menu;
+
 		return $this;
 	}
 
-	public string
-	$Title = '';
-
-	public string
-	$Subtitle = '';
-
-	public mixed
-	$Content = '';
-
 }