Toggle show/hide NavBar

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
Jay Webb
Veteran Member
Posts: 35
Joined: 2017-08-26 15:27
Contact:

Toggle show/hide NavBar

Post by Jay Webb » 2018-03-16 18:32

I'm using AppGini 5.70 and the slate.css. I believe incCommon.php and header.php will be the same.
I had request from my members to show/hide the navbar and with a lot of trial and error I have it working and willing to share. Hear's what it looks like.

Image

and hear's when it's hidden.

Image

I added the code to "incCommon.php" and "header.php". Before starting make a copies!

"incCommom.php"

Code: Select all

	
	####################### line 371 ##################################

	function htmlUserBar(){    <!-- look for this, and all the way down -->
		global $adminConfig, $Translation;
		if(!defined('PREPEND_PATH')) define('PREPEND_PATH', '');

		ob_start();
		$home_page = (basename($_SERVER['PHP_SELF'])=='index.php' ? true : false);

		?>
		<!-- added this, below, down -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
		<style>
#content {
  margin-top: 80px;
  color: white;
}
.triangle-down center {
	margin-left:auto;
	margin-right:auto;
}
.triangle-down {
display:inline-block;	
 position: fixed;
  margin-top: 60px;
float:left;
  left:50%;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid dodgerblue;
}

.triangle-down p {
  text-align: center;
  color: white;
  margin-top: -33px;
  margin-left: -13px;
  transition: color .2s;
}
.triangle-down p:hover {
  color: rgba(0, 0, 0, 0.4);
}
		</style> <!-- to hear. -->
		<div id='content'> <!-- added this -->	
		<nav class="navbar navbar-default navbar-fixed-top hidden-print" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!-- application title is obtained from the name besides the yellow database icon in AppGini, use underscores for spaces -->
				<a class="navbar-brand" href="<?php echo PREPEND_PATH; ?>index.php"><i class="glyphicon glyphicon-home"></i> Clan MacLellan Genealogy</a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<?php if(!$home_page){ ?>
						<?php echo NavMenus(); ?>
					<?php } ?>
				</ul>

				<?php if(getLoggedAdmin()){ ?>
					<ul class="nav navbar-nav">
						<a href="<?php echo PREPEND_PATH; ?>admin/pageHome.php" class="btn btn-danger navbar-btn hidden-xs" title="<?php echo html_attr($Translation['admin area']); ?>"><i class="glyphicon glyphicon-cog"></i> <?php echo $Translation['admin area']; ?></a>
						<a href="<?php echo PREPEND_PATH; ?>admin/pageHome.php" class="btn btn-danger navbar-btn visible-xs btn-lg" title="<?php echo html_attr($Translation['admin area']); ?>"><i class="glyphicon glyphicon-cog"></i> <?php echo $Translation['admin area']; ?></a>
					</ul>
				<?php } ?>

				<?php if(!$_GET['signIn'] && !$_GET['loginFailed']){ ?>
					<?php if(getLoggedMemberID() == $adminConfig['anonymousMember']){ ?>
						<p class="navbar-text navbar-right">&nbsp;</p>
						<a href="<?php echo PREPEND_PATH; ?>index.php?signIn=1" class="btn btn-success navbar-btn navbar-right"><?php echo $Translation['sign in']; ?></a>
						<p class="navbar-text navbar-right">
							<?php echo $Translation['not signed in']; ?>
						</p>
					<?php }else{ ?>
						<ul class="nav navbar-nav navbar-right hidden-xs" style="min-width: 330px;">
							<a class="btn navbar-btn btn-default" href="<?php echo PREPEND_PATH; ?>index.php?signOut=1"><i class="glyphicon glyphicon-log-out"></i> <?php echo $Translation['sign out']; ?></a>
							<p class="navbar-text">
								<?php echo $Translation['signed as']; ?> <strong><a href="<?php echo PREPEND_PATH; ?>membership_profile.php" class="navbar-link"><?php echo getLoggedMemberID(); ?></a></strong>
							</p>
						</ul>
						<ul class="nav navbar-nav visible-xs">
							<a class="btn navbar-btn btn-default btn-lg visible-xs" href="<?php echo PREPEND_PATH; ?>index.php?signOut=1"><i class="glyphicon glyphicon-log-out"></i> <?php echo $Translation['sign out']; ?></a>
							<p class="navbar-text text-center">
								<?php echo $Translation['signed as']; ?> <strong><a href="<?php echo PREPEND_PATH; ?>membership_profile.php" class="navbar-link"><?php echo getLoggedMemberID(); ?></a></strong>
							</p>
							
						</ul>
      <div class="triangle-down center"> <!-- added this, down -->
        <p>
          <i class="fa fa-chevron-down fa-2x isDown" id="toggle"></i>
        </p>
      </div>  <!-- to hear -->
	  
	  <script> <!-- added this, down -->
$("#toggle").click( function(event){
    event.preventDefault();
    if ($(this).hasClass("isDown") ) {
        $( ".navbar-fixed-top" ).animate({ "margin-top": "-62px" }, "fast" );  
        $( "#content" ).animate({ "margin-top": "5px" }, "fast" );
        $(this).removeClass("isDown");
    } else {
        $( ".navbar-fixed-top" ).animate({ "margin-top": "0px" }, "fast" );
        $( "#content" ).animate({ "margin-top": "80px" }, "fast" );
        $(this).addClass("isDown");
    }
    return false;
});
</script> <!-- to hear -->
	  
						<script>
							/* periodically check if user is still signed in */
							setInterval(function(){
								$j.ajax({
									url: '<?php echo PREPEND_PATH; ?>ajax_check_login.php',
									success: function(username){
										if(!username.length) window.location = '<?php echo PREPEND_PATH; ?>index.php?signIn=1';
									}
								});
							}, 60000);
						</script>
					<?php } ?>
				<?php } ?>

			</div>
			
		</nav>
		<div id='content'> <!-- added this, this keeps header from sliding up when hidding, you can remove and see what happens  -->
		</div>  <!-- added this -->
		<?php

		$html = ob_get_contents();
		ob_end_clean();

		return $html;
	}                          <!--- to hear -->
	######################## line 510 #################################
	
In the "header.php" you need to add;

"header.php

Code: Select all

	<?php } ?>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> <!-- at line 41, just above the </head> tag and below the <?php} ?> -->
	</head>   
You can download jquery-1.9.1.js and add to your own folder or use the CDN, here, <script src="http://code.jquery.com/jqu ... ></script>
The only page I haven't got it working in is the global-search.php page.

Any suggestion or improvements are welcomed, post them hear.

Happy coding..
What we envision, we make happen.

Post Reply