bootstrap based navigation
This commit is contained in:
parent
07db713b89
commit
041e83c6f2
@ -1,9 +1,10 @@
|
||||
{
|
||||
"name": "my-webpack-project",
|
||||
"name": "uniworx.de",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.4.0",
|
||||
"@popperjs/core": "^2.11.7",
|
||||
"bootstrap": "^5.2.3"
|
||||
},
|
||||
@ -13,7 +14,6 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.21.8",
|
||||
"@babel/preset-env": "^7.21.5",
|
||||
"@fortawesome/fontawesome-free": "^6.4.0",
|
||||
"@webpack-cli/generators": "^3.0.4",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"babel-loader": "^9.1.2",
|
||||
|
||||
@ -1,40 +1,3 @@
|
||||
import 'bootstrap/scss/bootstrap.scss'
|
||||
import {} from 'bootstrap'
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
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,70 +1,26 @@
|
||||
@use "~/../@fortawesome/fontawesome-free/scss/fontawesome" with ( $fa-font-path: "~/../@fortawesome/fontawesome-free/webfonts" )
|
||||
@use "~@fortawesome/fontawesome-free/scss/fontawesome" as * with ( $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts" )
|
||||
@forward "~@fortawesome/fontawesome-free/scss/fontawesome"
|
||||
@use "~@fortawesome/fontawesome-free/scss/solid"
|
||||
|
||||
@forward "~/../@fortawesome/fontawesome-free/scss/fontawesome"
|
||||
@use "~bootstrap/scss/bootstrap" with ( $primary: hsl(128, 100%, 20%), $navbar-toggler-padding-y: 0.5rem, $navbar-padding-x: 1rem )
|
||||
|
||||
@use "~/../@fortawesome/fontawesome-free/scss/solid"
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
.custom-navbar-toggler-icon
|
||||
@include fa-icon-solid($fa-var-times)
|
||||
|
||||
.collapsed &
|
||||
@include fa-icon-solid($fa-var-bars)
|
||||
|
||||
main
|
||||
margin: 1rem
|
||||
|
||||
footer > nav > ul
|
||||
margin: 1rem
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 1rem
|
||||
|
||||
// NAVIGATION
|
||||
|
||||
nav
|
||||
padding: 0 15px
|
||||
ul
|
||||
list-style-type: none
|
||||
li
|
||||
padding: 10px
|
||||
|
||||
header
|
||||
width: 100vw
|
||||
|
||||
background-color: green
|
||||
color: white
|
||||
font-weight: 600
|
||||
font-size: 1.2em
|
||||
line-height: 1.5em
|
||||
a
|
||||
color: white
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: white
|
||||
text-decoration: none
|
||||
|
||||
.nav-menu
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
|
||||
li a
|
||||
display: block
|
||||
padding: 4px 20px
|
||||
|
||||
li.nav-subitem a
|
||||
padding: 15px
|
||||
|
||||
.nav-toggle
|
||||
order: 1
|
||||
font-size: 20px
|
||||
|
||||
.nav-item
|
||||
order: 2
|
||||
width: 100%
|
||||
text-align: center
|
||||
display: none
|
||||
.nav-menu--active .nav-item
|
||||
& > li
|
||||
display: block
|
||||
|
||||
.nav-submenu
|
||||
display: none
|
||||
.nav-submenu--active
|
||||
display: block
|
||||
|
||||
.nav-submenu--active
|
||||
background-color: green
|
||||
|
||||
.nav-subitem a
|
||||
padding: 10px 15px
|
||||
|
||||
@ -12,21 +12,26 @@
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
$for(tags-nav)$
|
||||
$body$
|
||||
$endfor$
|
||||
<li class="nav-toggle">
|
||||
<a href="#"><i class="fas fa-bars"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
|
||||
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
|
||||
<span class="custom-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">
|
||||
UniWorX Systems
|
||||
</a>
|
||||
<div class="collapse navbar-collapse" id="navbarMain">
|
||||
<ul class="navbar-nav">
|
||||
$for(tags-nav)$
|
||||
$body$
|
||||
$endfor$
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
$body$
|
||||
</main>
|
||||
<footer>
|
||||
<footer class="text-center">
|
||||
<nav>
|
||||
<ul>
|
||||
$for(special-nav)$
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<li class="nav-item">
|
||||
<a href="$route$">$title$</a>
|
||||
<li class="nav-link dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="$route$" data-bs-toggle="dropdown";>
|
||||
$title$
|
||||
</a>
|
||||
|
||||
<ul class="nav-submenu">
|
||||
<ul class="dropdown-menu dropdown-menu-dark bg-primary">
|
||||
$for(posts)$
|
||||
<li class="nav-subitem">
|
||||
<a href="$route$#$identifier$">$title$</a>
|
||||
<li class="dropdown-item">
|
||||
<a class="nav-link" href="$route$#$identifier$">$title$</a>
|
||||
</li>
|
||||
$endfor$
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user