add fontawesome, implement basic mobile menu
This commit is contained in:
parent
60c96ec1ef
commit
07db713b89
@ -13,6 +13,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.21.8",
|
"@babel/core": "^7.21.8",
|
||||||
"@babel/preset-env": "^7.21.5",
|
"@babel/preset-env": "^7.21.5",
|
||||||
|
"@fortawesome/fontawesome-free": "^6.4.0",
|
||||||
"@webpack-cli/generators": "^3.0.4",
|
"@webpack-cli/generators": "^3.0.4",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"babel-loader": "^9.1.2",
|
"babel-loader": "^9.1.2",
|
||||||
|
|||||||
@ -2,3 +2,39 @@ import 'bootstrap/scss/bootstrap.scss'
|
|||||||
import {} from 'bootstrap'
|
import {} from 'bootstrap'
|
||||||
|
|
||||||
import {} from './main.sass'
|
import {} from './main.sass'
|
||||||
|
|
||||||
|
|
||||||
|
const navToggle = document.querySelector(".nav-toggle");
|
||||||
|
const navMenu = document.querySelector(".nav-menu");
|
||||||
|
|
||||||
|
function toggleNavMenu() {
|
||||||
|
if (navMenu.classList.contains("nav-menu--active")) {
|
||||||
|
navMenu.classList.remove("nav-menu--active");
|
||||||
|
navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
|
||||||
|
} else {
|
||||||
|
navMenu.classList.add("nav-menu--active");
|
||||||
|
navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
navToggle.addEventListener("click", toggleNavMenu, false);
|
||||||
|
|
||||||
|
const navItems = document.querySelectorAll(".nav-item");
|
||||||
|
|
||||||
|
function toggleNavItem() {
|
||||||
|
if (this.classList.contains("nav-submenu--active")) {
|
||||||
|
this.classList.remove("nav-submenu--active");
|
||||||
|
} else if (navMenu.querySelector(".nav-submenu--active")) {
|
||||||
|
// other submenu was previously opened: also close the other submenu
|
||||||
|
navMenu.querySelector(".nav-submenu--active").classList.remove("nav-submenu--active");
|
||||||
|
} else {
|
||||||
|
this.classList.add("nav-submenu--active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let navItem of navItems) {
|
||||||
|
if (navItem.querySelector(".nav-submenu")) {
|
||||||
|
navItem.addEventListener("click" , toggleNavItem, false);
|
||||||
|
navItem.addEventListener("keypress", toggleNavItem, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,24 @@
|
|||||||
|
@use "~/../@fortawesome/fontawesome-free/scss/fontawesome" with ( $fa-font-path: "~/../@fortawesome/fontawesome-free/webfonts" )
|
||||||
|
|
||||||
|
@forward "~/../@fortawesome/fontawesome-free/scss/fontawesome"
|
||||||
|
|
||||||
|
@use "~/../@fortawesome/fontawesome-free/scss/solid"
|
||||||
|
|
||||||
|
*
|
||||||
|
box-sizing: border-box
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
|
||||||
|
// NAVIGATION
|
||||||
|
|
||||||
|
nav
|
||||||
|
padding: 0 15px
|
||||||
|
ul
|
||||||
|
list-style-type: none
|
||||||
|
li
|
||||||
|
padding: 10px
|
||||||
|
|
||||||
header
|
header
|
||||||
width: 100vw
|
width: 100vw
|
||||||
|
|
||||||
@ -6,7 +27,6 @@ header
|
|||||||
font-weight: 600
|
font-weight: 600
|
||||||
font-size: 1.2em
|
font-size: 1.2em
|
||||||
line-height: 1.5em
|
line-height: 1.5em
|
||||||
|
|
||||||
a
|
a
|
||||||
color: white
|
color: white
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
@ -14,37 +34,37 @@ header
|
|||||||
color: white
|
color: white
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
// parent menu
|
.nav-menu
|
||||||
& > nav > ul
|
display: flex
|
||||||
display: inline
|
flex-wrap: wrap
|
||||||
list-style-type: none
|
justify-content: space-between
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
// menu items
|
li a
|
||||||
& > li
|
display: block
|
||||||
display: inline-block
|
padding: 4px 20px
|
||||||
white-space: nowrap
|
|
||||||
a
|
|
||||||
padding: 4px 20px
|
|
||||||
|
|
||||||
&:hover
|
li.nav-subitem a
|
||||||
background-color: red
|
padding: 15px
|
||||||
& > ul
|
|
||||||
display: block
|
|
||||||
|
|
||||||
// submenus
|
.nav-toggle
|
||||||
& > ul
|
order: 1
|
||||||
background-color: black
|
font-size: 20px
|
||||||
display: none
|
|
||||||
position: absolute
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
z-index: 1
|
|
||||||
list-style-type: none
|
|
||||||
|
|
||||||
& > li
|
.nav-item
|
||||||
padding: 0 10px
|
order: 2
|
||||||
|
width: 100%
|
||||||
|
text-align: center
|
||||||
|
display: none
|
||||||
|
.nav-menu--active .nav-item
|
||||||
|
display: block
|
||||||
|
|
||||||
&:hover
|
.nav-submenu
|
||||||
background-color: red
|
display: none
|
||||||
|
.nav-submenu--active
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.nav-submenu--active
|
||||||
|
background-color: green
|
||||||
|
|
||||||
|
.nav-subitem a
|
||||||
|
padding: 10px 15px
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -13,10 +13,13 @@
|
|||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul class="nav-menu">
|
||||||
$for(tags-nav)$
|
$for(tags-nav)$
|
||||||
$body$
|
$body$
|
||||||
$endfor$
|
$endfor$
|
||||||
|
<li class="nav-toggle">
|
||||||
|
<a href="#"><i class="fas fa-bars"></i></a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<li>
|
<li class="nav-item">
|
||||||
<a href="$route$">$title$</a>
|
<a href="$route$">$title$</a>
|
||||||
|
|
||||||
<ul>
|
<ul class="nav-submenu">
|
||||||
$for(posts)$
|
$for(posts)$
|
||||||
<li>
|
<li class="nav-subitem">
|
||||||
<a href="$route$#$identifier$">$title$</a>
|
<a href="$route$#$identifier$">$title$</a>
|
||||||
</li>
|
</li>
|
||||||
$endfor$
|
$endfor$
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user