uniworx/uniworx.de
3
0
Fork 0
Code Issues 7 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

add fontawesome, implement basic mobile menu

Browse Source
This commit is contained in:
Sarah Vaupel 2023-05-20 01:35:03 +00:00
parent 60c96ec1ef
commit 07db713b89
6 changed files with 744 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -13,6 +13,7 @@
"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",

36
frontend/src/index.js
View File

@ -2,3 +2,39 @@ import 'bootstrap/scss/bootstrap.scss'
import {} 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);
}
}

80
frontend/src/main.sass
View File

@ -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
width: 100vw
@ -6,7 +27,6 @@ header
font-weight: 600
font-size: 1.2em
line-height: 1.5em
a
color: white
text-decoration: none
@ -14,37 +34,37 @@ header
color: white
text-decoration: none
// parent menu
& > nav > ul
display: inline
list-style-type: none
margin: 0
padding: 0
.nav-menu
display: flex
flex-wrap: wrap
justify-content: space-between
// menu items
& > li
display: inline-block
white-space: nowrap
a
padding: 4px 20px
li a
display: block
padding: 4px 20px
&:hover
background-color: red
& > ul
display: block
li.nav-subitem a
padding: 15px
// submenus
& > ul
background-color: black
display: none
position: absolute
margin: 0
padding: 0
z-index: 1
list-style-type: none
.nav-toggle
order: 1
font-size: 20px
& > li
padding: 0 10px
.nav-item
order: 2
width: 100%
text-align: center
display: none
.nav-menu--active .nav-item
display: block
&:hover
background-color: red
.nav-submenu
display: none
.nav-submenu--active
display: block
.nav-submenu--active
background-color: green
.nav-subitem a
padding: 10px 15px

818
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff

5
templates/site-layout.html
View File

@ -13,10 +13,13 @@
<body>
<header>
<nav>
<ul>
<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>
</header>

6
templates/tag-nav.html
View File

@ -1,9 +1,9 @@
<li>
<li class="nav-item">
<a href="$route$">$title$</a>
<ul>
<ul class="nav-submenu">
$for(posts)$
<li>
<li class="nav-subitem">
<a href="$route$#$identifier$">$title$</a>
</li>
$endfor$