build: start of sticky header nav and footer bootstrap layout

This commit is contained in:
Mathew Guest 2024-08-04 08:45:39 -06:00
parent f29db81bf6
commit 422f0a5b10
3 changed files with 36 additions and 19 deletions

@ -9,8 +9,8 @@ import { ScoutingCryptoComponent } from 'app/scouting-crypto/scouting-crypto.com
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'scout', component: ScoutingCryptoComponent },
{ path: 'scouting/stocks', component: HomeComponent },
{ path: 'scouting/crypto', component: ScoutingCryptoComponent },
// { path: '**', component: NotFoundComponent }
];

@ -1,31 +1,48 @@
<!-- Toolbar -->
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>$kriLL</h1>
</div>
</div>
<div class="row">
<div class="col">
<div class="row"></div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<app-main-navigation></app-main-navigation>
</div>
</div>
</div>
</nav>
</header>
<main>
<!-- Page Content -->
<div class="container">
<!-- Begin page content -->
<main class="flex-shrink-0">
<div class="container" style="padding-top: 5em">
<router-outlet></router-outlet>
</div>
</main>
<footer>
<div class="container-fluid">
Copyright &copy; 2024 Zavage Software Inc., all rights reserved.<br />
Denver, CO
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<div class="col">
<span class="text-muted"
>Copyright &copy; 2024 Zavage Software Inc., all rights reserved.<br />
Denver, CO</span
>
</div>
<div class="col">
<button class="btn btn-primary" title="Go to top">Go to Top</button>
</div>
</div>
</footer>

@ -11,6 +11,6 @@
</head>
<body>
<!-- reference to app.component.html -->
<app-root></app-root>
<app-root class="d-flex flex-column h-100"></app-root>
</body>
</html>