bootstrap navbar several errors

Question

I use angular custom directive to implement a bootstrap navbar. Here is my code:

"use strict";
var helper = require('../helper.js')
var app = angular.module('custom_directive')

app.directive('tagNavbar', [function() {
    return {
        restrict: 'E',
        scope: {
        },

        templateUrl: '/public/common/tag_navbar.html',

        controller:
    ['$scope', '$window', 'userService',
function($scope, $window, userService) {

    var curUrl = $window.location.pathname + $window.location.hash

    //client url is used in <a href>, redirect purpose
    $scope.signinClientUrl = helper.urlWithQuery('/auth#!/signin', {redirect:curUrl})
    $scope.signupClientUrl = helper.urlWithQuery('/auth#!/signup', {redirect:curUrl})

    //server url is used for rest api, like <form action>
    //if signout success, better to redirect to home, since some page are not authorized
    $scope.signoutServerUrl = helper.urlWithQuery('/auth/signout', {successRedirect:'/', failureRedirect:curUrl})


    $scope.classForNavWithPath = function(path) {

        $scope.userService = userService

        //pathname for which tab to highlight, use hash if the tab has dropdown list
        var pathname = $window.location.pathname
        var hash = $window.location.hash
        return (pathname == path ? 'active' : '')
    }


    //todo: bug: unable to refresh page by clicking the same nav tab

    $scope.showSignin = ! userService.isAuthenticated()
    $scope.showSignup = ! userService.isAuthenticated()
    $scope.showSignout = userService.isAuthenticated()

}]}}])

and html:

<div class="tag-navbar">

    <nav class="my-navbar">
        <div class="my-navbar-header">
            <button type="button" class="my-navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="my-icon-bar"></span>
                <span class="my-icon-bar"></span>
                <span class="my-icon-bar"></span>
            </button>
            <a class="my-navbar-brand" href="/#!/">Apple Fanboy</a>
        </div>
        <div class="my-navbar-collapse" id="myNavbar">
            <ul class="my-navbar-nav">
                <li ng-class="classForNavWithPath('/')"><a href="/#!/">Home</a></li>
                <li ng-class="classForNavWithPath('/article')"><a href="/article#!/">article</a></li>
                <li ng-class="classForNavWithPath('/profile')"><a href="/profile#!/">profile</a></li>
                <li ng-class="classForNavWithPath('/editor')"><a href="/editor#!/">editor</a></li>
                <li ng-class="classForNavWithPath('/admin')"><a href="/admin#!/">admin</a></li>
            </ul>



            <ul class="my-navbar-nav-right">
                <li ng-show="showSignout">
                    <a ng-href="{{signoutServerUrl}}">sign out</a>
                </li>
                <li ng-show="showSignin">
                    <a ng-href="{{signinClientUrl}}">sign in</a>
                <li ng-show="showSignup">
                    <a ng-href="{{signupClientUrl}}">sign up</a>
                </li>
            </ul>
        </div>
    </nav>

</div>

And I use it in the header like

<tag-navbar></tag-navbar>

There are 2 errors (or configurable defaults? )

1. on a mobile size browser, the navbar is default to be expanded. Not sure if it's a default behavior, which i think it's not most of the users want

2. let's say im in the /profile page, I want to refresh the page by clicking on profile nav tab, but the link is not clickable. I need to make it clickable.

CSS for the navbar (I use sass)

.my-navbar {
  //Note: navbar = header + collapse
  @extend .navbar;
  @extend .navbar-default;
  //Note: required by navbar logic, although .container is set to body
  @extend .container-fluid;

  .my-navbar-header {
    @extend .navbar-header;

    .my-navbar-toggle {
      @extend .navbar-toggle;

    }

    .my-icon-bar {
      //it's inside toggle, but can be inside other icons as well
      @extend .icon-bar;
    }

    .my-navbar-brand {
      @extend .navbar-brand;
    }
  }

  .my-navbar-collapse {
    @extend .collapse;
    @extend .navbar-collapse;

    .my-navbar-nav {
      @extend .nav;
      @extend .navbar-nav;

    }
    .my-navbar-nav-right {
      @extend .my-navbar-nav;
      @extend .navbar-right
    }
  }
}

EDIT:

If I directly use

    <div class="collapse navbar-collapse" id="myNavbar">

It's working, but

    <div class="my-navbar-collapse" id="myNavbar">

it not working. But my-navbar-collapse is defined like this, which should be the same

  .my-navbar-collapse {
    @extend .collapse;
    @extend .navbar-collapse;
  }

Answer 1

Yes you are right, the bootstrap navbar is collapsed by default in mobile. And an Hamburger icon will appear & when you click on it the same expands.

To overcome this add the folowing property to my-navbar-collapse class in a media query.

You can dp it like follows :

@media only screen and (max-width: 640px) {
.my-navbar-class {
    display: block;
}
}

This code works & the navbar will appear expanded until the screen width is lessthan or equal to 640px

For your 2nd problem, you either need to make a function for each url which has a $scope.go('url') [which is a bad way ] or else refer to this page in whihc the user was facing the same problem

Angularjs - refresh when clicked on link with actual url

I hope this help you resolve your problem.