lewiskg / movie-history

0 stars 0 forks source link

User should be able to see a navbar #2

Closed zoeames closed 6 years ago

zoeames commented 6 years ago

Story

As a user, in order to navigate the site, I need to be able to see a navbar.

Acceptance Criteria

Given the user wants to be able to navigate the site When the user loads the page Then the navbar should appear at the top of the screen And the navbar should include a brand name of Movie History And the navbar should include links on the right for Authenticate, My Movies, and Search

zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:55 GMT


Comment by zoeames Monday Oct 16, 2017 at 04:53 GMT


Comment by zoeames Monday Oct 16, 2017 at 00:45 GMT


Wireframe: navbar

zoeames commented 6 years ago

Comment by zoeames Monday Oct 16, 2017 at 04:55 GMT


Comment by zoeames Monday Oct 16, 2017 at 04:53 GMT


Comment by zoeames Monday Oct 16, 2017 at 00:45 GMT


Use Bootstrap Navbar. This can go in index.html. Below is the code snippet from bootstrap.


  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>```
lewiskg commented 6 years ago

Finished