The old navbar is backgit status!

static/src/js/app.js

@@ -6,6 +6,7 @@ var React = require('react');
 var ProjectImagesTypes = require('./components/index/project-images-types');
 var ProjectImagesMain = require('./components/index/project-images-main');
 
+
 if ($('body').hasClass('index')) {  // Render components on index
   React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
   React.render(<ProjectImagesMain />, document.getElementById('project-images-main'));

static/src/js/events.js

@@ -1,4 +1,90 @@
 /* global $ */
+var is_navbar_attached = false;
+function position_navbar() {
+    if ($(window).width() < 862) {  // @screen-sm
+        $('.navbar-icon').removeClass('ion-ios-arrow-up').addClass('ion-ios-arrow-down');
+        return;
+    }
+    if ($(window).scrollTop() > $('#navbar-anchor').offset().top) {
+        if(!is_navbar_attached) {attach_navbar(); is_navbar_attached = true;}
+    } else if (is_navbar_attached) {
+        detach_navbar();
+        is_navbar_attached = false;
+    }
+    $('.dropdown-menu').each(function(){
+        var direction = ($(this).height() + 10 < $('nav').offset().top - $(window).scrollTop()) ? 'up' : 'down';
+        flip_dropdowns($(this), direction);
+    });
+}
+
+$(window).load(function(){
+    $(window).trigger('scroll').trigger('resize');
+});
+
+function detach_navbar() {
+    $('#navbar-container').removeClass('stick-top').addClass('align');
+    $('.dropdown-menu').removeClass('dropdown').addClass('dropup');
+}
+
+
+function set_page_sizes() {
+    var win_height = $(window).height();
+    var win_width = $(window).width();
+    $('.page-height').each(function() {
+        $(this).height(win_height);
+    });
+    $('.page-width').each(function() {
+        $(this).width(win_width);
+    });
+}
+
+
+function attach_navbar() {
+    $('#navbar-container').removeClass('align').addClass('stick-top');
+    $('.dropdown-menu').removeClass('dropup').addClass('dropdown');
+}
+
+
+function flip_dropdowns(obj, direction) {
+    if (obj.hasClass('drop'+direction)){ return; }
+    var reverse = direction == 'up' ? 'down' : 'up';
+    obj.removeClass('drop' + reverse).addClass('drop' + direction);
+    obj.prev().children().removeClass('ion-ios-arrow-' + reverse).addClass('ion-ios-arrow-' + direction);
+}
+
+
+function space_navbar() { //This really should be CSS!
+    if ($(window).width() < 862) {return;}  // @screen-sm
+    var nav_width = $('#navigation').outerWidth(true);
+    var full_width = $('nav > .container-fluid').outerWidth(true) - $('.home-button').outerWidth(true);
+    var margin = (full_width - nav_width) / 2;
+    $('#navigation').css('margin-left', margin);
+}
+
+
+function checkDomain(url) {
+  if ( url.indexOf('//') === 0 ) { url = location.protocol + url; }
+  return url.toLowerCase().replace(/([a-z])?:\/\//,'$1').split('/')[0];
+}
+
+
+function isExternal(url) {
+  return ( ( url.indexOf(':') > -1 || url.indexOf('//') > -1 ) && checkDomain(location.href) !== checkDomain(url) );
+}
+
+
+function is_on_screen(elm) {
+    var vpH = $(window).height(), // Viewport Height
+        st = $(window).scrollTop(), // Scroll Top
+        y = $(elm).offset().top,
+        elementHeight = $(elm).height();
+    return ((y < (vpH + st)) && (y > (st - elementHeight)));
+}
+
+
+function navTo(url){
+    location.href=url;
+}
 
 $(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
   $('a[href*=#]:not([href=#])').click(function() {
@@ -20,3 +106,15 @@ $('a[href="soon"]').click(function (e) {
   e.preventDefault();
   alert('Content coming soon, stand by!');
 });
+
+
+
+$(window).scroll(function() {
+    position_navbar();
+});
+
+
+$(window).resize(function() {
+    set_page_sizes();
+    space_navbar();
+});

static/src/less/navbar.less

@@ -0,0 +1,153 @@
+/* @group Navigation Bar */
+
+.dropdown-menu {
+  @media (min-width: @screen-sm) {
+    right: auto;
+    left: 50%;
+    transform: translate(-50%, 0);
+    opacity: 0;
+    .transition(~"ease-in-out .2s all");
+  }
+  &.dropup {
+    bottom: 100%;
+    top: initial;
+  }
+  &.dropdown {
+    top: 100%;
+    bottom: initial;
+  }
+  .open & {
+    opacity: 1;
+  }
+}
+
+#navigation {
+  & a {
+    .transition(~"ease-in-out .3s color");
+  }
+  & > li {
+    @media (min-width: @screen-md-min) {
+      margin-right: 23px;
+    }
+    @media (max-width: @screen-sm-max) {
+      margin-right: 10px;
+      margin-left: 11px;
+    }
+    & > a {
+      @media (min-width: @screen-md-min) {
+        padding: 15px 10px;
+      }
+      @media (max-width: @screen-sm-max) {
+        padding: 15px 3px;
+      }
+    }
+  }
+}
+
+.navbar-nav.nav {
+  margin: 0;
+}
+
+#navbar-container {
+  z-index: 0;
+  & .container-fluid{
+    padding-right: 0;
+    padding-left: 0;
+  }
+  &.align {
+    @media (min-width: @screen-sm) {
+      position: absolute;
+      bottom: 0;
+      height: 52px;
+    }
+    @media (max-width: @screen-sm) {
+      position: fixed;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+#navbar-anchor {
+  position: absolute;
+  bottom: 0;
+  height: 52px;
+}
+
+.home-button {
+  margin-right: 15px !important;
+}
+
+#navbar {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar-brand {
+  margin-left: 15px;
+}
+
+
+/* @end Navigation Bar */
+
+/* @group Functional ++ */
+.stick-top {
+  position: fixed;
+  top: 0;
+  z-index: 10000;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.no-font {
+    font-size: 0px;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.center-text {
+  text-align: center;
+}
+
+div.fix-image {
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+.margin-bottom {
+  margin-bottom: 10px;
+}
+
+.black-text {
+  color: black !important;
+}
+
+.white-text {
+  color: white !important;
+}
+
+.drop-shadow {
+  .box-shadow(0 0.4px 6px 0 rgba(0, 0, 0, 0.9));
+}
+
+.mega-icon {
+  font-size: 110px;
+  text-align: center;
+  margin-bottom: 0;
+
+  & ~ div.caption {
+    padding-top: 0;
+    h3 {
+      margin: 0;
+    }
+  }
+}
+/* @end Functional ++ */

static/src/less/style.less

@@ -7,6 +7,7 @@
 @import (inline) "node_modules/normalize.css/normalize.css";
 @import 'homepage';
 @import 'variables';
+@import 'navbar';
 
 /* @group Global */
 .btn {

templates/about/index.html

@@ -21,7 +21,7 @@
             Some info about my website.
           </p>
           <p>
-            <a href="{% url 'pages:about-website' %}" class="btn btn-primary btn-block">More Info</a>
+            <a href="" class="btn btn-primary btn-block">More Info</a>
           </p>
         </div>
       </div>
@@ -35,11 +35,124 @@
             Some info about me. Although not very much
           </p>
           <p>
-            <a href="{% url 'pages:about-me' %}" class="btn btn-primary btn-block">More Info</a>
+            <a href="" class="btn btn-primary btn-block">More Info</a>
           </p>
         </div>
       </div>
     </div>
   </div>
 </div>
+<div id='navbar-anchor'></div>
+  <div id="navbar-container" class="align h4" style="width: 96%; left: 2%; margin: 0; z-index: 10000;">
+    <nav class="navbar navbar-inverse" style="border-radius: 0;">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand visible-xs"><i class="icon ion-compass"></i> Navigation</a>
+        </div>
+        <div class="collapse navbar-collapse" id="navbar" style=" padding-left: 0px;">
+          <ul class="nav navbar-nav home-button hidden-sm">
+            <li class="active home"><a href=""><i class="icon ion-home"></i></a></li>
+          </ul>
+          <ul class="nav navbar-nav" id="navigation">
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Projects <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href="#"><i class="icon ion-social-freebsd-devil"></i> Pithos</a></li>
+                <li><a href=""><i class="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
+                <li><a href=""><i class="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
+                <li><a href=""><i class="icon ion-social-windows"></i> Custom PC</a></li>
+                <li><a href=""><i class="icon ion-android-more-vertical"></i> All Projects...</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Code <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href="#"><i class="icon ion-code-working"></i> Code Challenges</a></li>
+                <li><a href=""><i class="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
+                <li><a href=""><i class="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
+                <li><a href=""><span class="glyphicon glyphicon-print" aria-hidden="true"></span>  Printr</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                College <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href="">Student Robotics</a></li>
+                <li><a href=""><i class="icon ion-cube"></i> Attack on Blocks Game</a></li>
+                <li><a href=""><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Student Server</a></li>
+                <li><a href="#"><i class="icon ion-ios-paper"></i> EPQ</a></li>
+                <li><a href="#">Wall of Sheep</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Setup <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href="">&#128129; Desk</a></li>
+                <li><a href="#"><i class="icon ion-briefcase"></i> Work</a></li>
+                <li><a href="#"><i class="icon ion-model-s"></i> On the Go</a></li>
+                <li><a href="#"><i class="icon ion-android-phone-portrait"></i> Devices</a></li>
+                <li><a href="#"><span class="glyphicon glyphicon-console" aria-hidden="true"></span> Servers</a></li>
+                <li><a href=""><i class="icon ion-android-more-vertical"></i> All</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Work <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href="#"><i class="icon ion-fork-repo"></i> Projects</a></li>
+                <li><a href="#"><i class="icon ion-android-desktop"></i> Setup</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Media <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li><a href=""><i class="icon ion-social-youtube"></i> Youtube Channel</a></li>
+                <li><a href="#"><i class="icon ion-social-rss"></i> Feed</a></li>
+                <li><a href=""><i class="icon ion-ios-camera"></i> Gallery</a></li>
+              </ul>
+            </li>
+            <li><a href="#">Links</a></li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                About <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+
+              <ul class="dropdown-menu dropup">
+                <li><a href="#"><i class="icon ion-android-person"></i> Me</a></li>
+                <li><a href=""><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span> Website</a></li>
+                <li><a href="#"><i class="icon ion-android-contacts"></i> Contact Me</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+                Account <i class="icon ion-ios-arrow-up navbar-icon h4"></i>
+              </a>
+              <ul class="dropdown-menu dropup">
+                <li class="active hidden-xs"><a><i class="icon ion-ios-body-outline"></i> *username*</a></li>
+                <li><a href="#"><i class="icon ion-ios-cog-outline"></i> Preferences</a></li>
+                <li><a href="#"><i class="icon ion-log-in"></i> Login / Logout</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </div>
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 {% endblock %}