Sindbad~EG File Manager

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Infiniti_Biz_Solutions
 */

get_header();
$categories = get_the_category(); 
$link = get_category_link( $categories[0]->term_id );
?>


<section class="bg-secondary py-4 pt-5">
        <div class="container py-md-2 py-lg-3 py-xl-5 my-2 my-sm-3 my-md-4 my-xxl-5">

<!--<section class="container pt-5">-->
        <!-- Breadcrumb-->
        <nav aria-label="breadcrumb">
          <ol class="pt-lg-3 pb-lg-4 pb-2 breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="<?php echo $link;?>">
                <?php 
				    echo $categories[0]->name; ?>
            </a></li>
            <li class="breadcrumb-item active" aria-current="page"><?php the_title(); ?></li>
          </ol>
        </nav>
        <!-- Page title-->
        <h1 class="display-6"><?php the_title(); ?></h1>
        <div class="d-flex flex-wrap align-items-center mt-n2">
            <a class="badge text-nav fs-xs border mt-2">Author: <?php echo get_author_name() ;?></a>
            <span class="fs-xs opacity-20 mt-2 mx-2"></span>
            <a class="badge text-nav fs-xs border mt-2">Posted on: <?php echo get_the_date() ;?></a>
            <span class="fs-xs opacity-20 mt-2 mx-2">|</span>
            <a class="badge text-nav fs-xs border mt-2" href="<?php echo $link;?>">
                <?php $categories = get_the_category(); 
				    echo $categories[0]->name; ?>
			</a>
            </div>
        <!-- Contact details-->
        </div>
      </section>

	
<section class="container pt-5 mt-md-2 mt-lg-3 mt-xl-4">
	<div class="row justify-content-center pt-xxl-2">
		<div class="col-lg-9 col-xl-8">
			<?php
				$featured_img_url = get_the_post_thumbnail_url('medium');
			?>
			<figure class="figure">
				<img class="figure-img rounded-5 mb-3" src="<?php the_post_thumbnail_url();?>" alt="<?php echo get_the_title();?>">
            </figure>
			
		</div>
	</div>
</section>

<section class="container pt-5 mt-md-2 mt-lg-3 mt-xl-4">
	<div class="row justify-content-center pt-xxl-2">
	    <div class="col-md-2">
	        <?php 
				dynamic_sidebar( 'Post Left Sidebar' ); 
			?>
			
	    </div>
		<div class="col-md-8">
			<p class="fs-lg">
				<?php echo the_content();?>
			</p>
			<div class="row" style=" border-radius: 50px; padding: 50px; border: 1px solid #eee; background-color: #eee; margin-bottom: 50px; "> 
				<div class="col-md-3">
					
					 <?php 
						if(!empty(get_avatar(get_the_author_meta( 'ID' )))){
						    ?>
						    <div class="author-avatar">
						    <?php
							echo get_avatar( get_the_author_meta( 'ID' ), 100 ); 	
							?>
						    </div>
						    <?php
						}else{
							echo"<img src='https://secure.gravatar.com/avatar/57f41120b25a1f78298f67180d51f196?s=52&d=mm&r=g' style='border-radius: 50%;'>";
						}
						
						$author_id = get_the_author_meta('ID');
						$author_name = get_the_author_meta('display_name', $author_id);
						$profile_link = get_author_posts_url($author_id);
						$author_bio = get_the_author_meta('description', $author_id);
						$author_bio_trimmed = wp_trim_words($author_bio, 20, '...');

						if (!empty($profile_link)) {
							echo '<a style="text-align: center; text-decoration: none; display: block;border: 1px solid #001e80;border-radius: 20px;font-size: 12px; margin-top: 20px; padding: 5px 0;" href="' . $profile_link . '">View Profile</a>';
						}
					?>
				</div> 
				
				<div class="col-md-9"> 
					<h5 class="author-name" style="color: #001e80;">
						<?php						
							if (!empty($author_name)) {
								echo $author_name;
							}
						?>
					</h5> 
					
					<div class="author-biographical-info" style="color: #001e80;"> 
						<?php
							
							if (!empty($author_bio)) {
								echo $author_bio;
							}
						?>
						
					</div> 
					<br>
					
					<div class="d-flex"> 
						<?php
						$facebook = get_the_author_meta( 'facebook', $post->post_author );
						$twitter = get_the_author_meta( 'twitter', $post->post_author );
						$instagram = get_the_author_meta( 'instagram', $post->post_author );
						$pinterest = get_the_author_meta( 'pinterest', $post->post_author );
						$linkedin = get_the_author_meta( 'linkedin', $post->post_author );
						$youtube = get_the_author_meta( 'youtube', $post->post_author );

if(!empty($linkedin)){
	echo '<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="'. $linkedin .'" rel="nofollow" target="_blank" alt="Linkedin" style="padding: 5px;">
	<i class="ai-linkedin"></i>
	</a>';
}
						
if(!empty($facebook)){
	echo '<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="'. $facebook .'" rel="nofollow" target="_blank" alt="Facebook" style="padding: 5px;">
	<i class="ai-facebook"></i>
	</a>';
}
if(!empty($instagram)){
	echo'<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="'. $instagram .'" rel="nofollow" target="_blank" alt="Instagram" style="padding: 5px;">
	<i class="ai-instagram"></i>
	</a>';
}
if(!empty($pinterest)){
	echo'<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="'. $pinterest .'" rel="nofollow" target="_blank" alt="Pinterest" style="padding: 5px;">
	<i class="ai-pinterest"></i>
	</a>';
}
if(!empty($facebook)){
	echo'<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="https://twitter.com/' . $twitter .'" rel="nofollow" target="_blank" alt="Twitter" style="padding: 5px;">
	<i class="ai-twitter"></i>
	</a>';
}
if(!empty($youtube)){
	echo'<a class="btn btn-icon btn-sm btn-primary rounded-circle me-3" href="'. $youtube .'" rel="nofollow" target="_blank" alt="YouTube" style="padding: 5px;">
	<i class="ai-youtube"></i>
	</a> ';
}
?>
					</div> 
				</div> 
			</div> 
		</div>
		<div class="col-md-2">
			<h4 class="pt-xl-1 mb-4">Recent Posts:</h4>
			<?php 
				?>
	<ul class="list-unstyled mb-0">
  
<?php
// Define our WP Query Parameters
$the_query = new WP_Query( 'posts_per_page=5' ); ?>
  
<?php
// Start our WP Query
while ($the_query -> have_posts()) : $the_query -> the_post();
// Display the Post Title with Hyperlink
?>
  
<li class="border-bottom pb-3 mb-3">
	<span class="h6 mb-0">
		<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
	</span>
</li>
<?php
// Repeat the process and reset once it hits the limit
endwhile;
wp_reset_postdata();
?>
</ul>
		
	    </div>
	</div>
</section>
</main><!-- #main -->
<div class="headerr">
  <h2>Scroll Indicator</h2>
  <div class="progress-containerr">
    <div class="progress-barr" id="myBarr"></div>
  </div>
</div>
<?php
get_sidebar();
get_footer();
?>
<style>
    /* Style the header: fixed position (always stay at the top) */
.headerr {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

/* The progress container (grey background) */
.progress-containerr {
  width: 100%;
  height: 10px;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-barr {
  height: 10px;
  background: #25a6ea;
  width: 0%;
}
</style>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBarr").style.width = scrolled + "%";
}
</script>