Making the navbar work on an actual phone

This commit is contained in:
Peter 2023-11-08 21:30:30 -05:00
parent c637d6f043
commit bb3925d7cd

View File

@ -1,6 +1,6 @@
<template>
<nav class="navbar navbar-expand-sm" style="margin-bottom: 1rem">
<RouterLink class="navbar-brand nav-link" to="/">SBa Season {{ seasonNumber() }}</RouterLink>
<nav class="navbar navbar-expand-md" style="margin-bottom: 1rem">
<RouterLink class="navbar-brand nav-link" style="padding-left: 0;" to="/">SBa Season {{ seasonNumber() }}</RouterLink>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse"
aria-controls="top-navbar-collapse" aria-expanded="false" aria-label="Toggle navigation"
@click="setMobileNavBarState(!isMobileNavBarExpanded)">
@ -8,8 +8,9 @@
<div class="bar"></div>
<div class="bar"></div>
</button>
<div :class="[isMobileNavBarExpanded ? 'open-menu' : 'closed-menu collapse navbar-collapse']">
<ul class="navbar-nav mr-auto">
<div :class="['navbar-collapse', isMobileNavBarExpanded ? 'open-menu collapse show' : 'closed-menu collapse']"
id="top-navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<RouterLink class="nav-link" to="/schedule">Schedule</RouterLink>
</li>