PersonalHomePage's avatar

Some HTML help with Nav bar and side bar

Hi,

I'm still trying to learn some of the basics here. I'm building a site and I want the user to get a sidebar to appear when they go to a certain page. I'm using the basic Laravel template after doing

php artisan ui bootstrap --auth

Here's the code inside the layout/app.blade.php file. I basically took the nav bar that's included with --auth command and put it into a separate view and added the header tag, but I'm not even sure what that is for anyway.

<body>
<header id="header" class="border-left">
    <div id="app">
        @include('layouts/nav')
        <main class="py-4">
            <div class="container">
                @yield('content')
            </div>
        </main>
    </div>
</header>
</body>

I'm copying templates from the interwebs and I don't really know what any of this stuff means because I've never really worked with HTML. I'm slowly picking it up as I go along. Lately I'm stuck. I can't seem to find an easy enough template that has both a static nav bar and a sidebar.

A perfect example of what I'm trying to setup is this discussion area. It's got the nav bar on top and and a nice little sidebar. I tried inspecting the code, but I can't seem to find the magic sauce that would let me incorporate the same thing into my site. Every time I try putting a sidebar in I either get it on top and pushing down the nav bar or I get under, but pushing the rest of my content over.

0 likes
4 replies
PersonalHomePage's avatar

for anyone that's curious what the end result is... this is my create.blade.php with the sidebar included.

@section('content')
    <div class="container" style="margin-top:30px">
        <div class="row">
            <div class="col-sm-2.5">
                <h1>Accounts</h1>
                <h3>Options:</h3>
                <p></p>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Add Account</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link danger" href="#">Delete Account</a>
                    </li>
                </ul>
                <hr class="d-sm-none">
            </div>
            <div class="col-sm-8">
                <form action="accounts" method="get" class="pb-15" autocomplete="off">
                    @include('accounts.search')
                    <button type="submit" class="btn btn-primary">Search</button>
                </form>
            </div>
        </div>
    </div>
@endsection

I ended up using the bootstrap tutorial inside of my accounts view. Now I have the sidebar appearing under the nav bar and I can include or yield for more content as the page develops.

Thanks for the help!

1 like
jlrdw's avatar

Good, I am glad that helped.

1 like

Please or to participate in this conversation.