Skip to content

Commit efd8c73

Browse files
XpirixXpirix
authored
Merge pull request #4 from Xpirix/add_second_menu
Add second menubar
2 parents 9ef689a + e6fa5e7 commit efd8c73

File tree

5 files changed

+156
-34
lines changed

5 files changed

+156
-34
lines changed

‎playwright/ci-test/tests/fixtures/header.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,6 @@ export class Header {
9494
this.donateLink = this.mainNavigation.getByRole("link", {
9595
name: "Donate",
9696
});
97-
this.searchInput = this.page.getByPlaceholder("Search");
97+
this.searchInput = this.page.getByPlaceholder("Search").last();
9898
}
9999
}

‎themes/hugo-bulma-blocks-theme/assets/sass/bulma/components/context-menu.sass

+95-7
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,42 @@
1212
top: 4rem
1313
z-index: 100
1414
transition: top 0.3s
15-
@media screen and (max-width: 768px)
16-
height: 6em
17-
.container
18-
@media screen and (max-width: 768px)
19-
flex-direction: column
20-
gap: 10px
21-
15+
.navbar
16+
background-color: unset
17+
min-height: 3em
18+
.navbar-burger
19+
color: $primary1-invert
20+
margin-left: unset
21+
width: 3em
22+
height: 3em
23+
24+
.navbar-start
25+
.navbar-item
26+
color: white
27+
border-radius: 5px
28+
.navbar-item, .nabar-link
29+
padding: 0.5rem .75rem
30+
31+
a.navbar-item.is-active,
32+
.navbar-link.is-active,
33+
.navbar-item
34+
color: white
35+
background-color: unset
36+
&:hover
37+
color: #0a0a0a
38+
background-color: #fafafa
39+
40+
.navbar-link
41+
color: inherit
42+
border-radius: 5px
43+
44+
.navbar-brand,
45+
.navbar-tabs
46+
min-height: unset
47+
a:hover
48+
color: $primary1-invert
49+
50+
2251
input
2352
background: #223745
2453
border: none
@@ -34,3 +63,62 @@
3463
&:focus
3564
background: $white
3665

66+
@media screen and (min-width: 1024px)
67+
.navbar-start
68+
padding: 10px 0
69+
.navbar-dropdown
70+
background-color: #002033
71+
border: none
72+
73+
@media screen and (max-width: 1023px)
74+
.container
75+
max-width: unset
76+
.box
77+
padding: 1.25rem 1rem 1.25rem 0rem
78+
.navbar-menu
79+
background-color: #002033
80+
min-width: 150px
81+
padding: 1rem
82+
&.is-active
83+
display: block
84+
position: fixed
85+
height: calc(100% - 112px)
86+
overflow: auto
87+
left: 0
88+
animation: slideInFromLeft 0.3s ease-out forwards
89+
&:not(.is-active)
90+
animation: slideOutToLeft 0.3s ease-out forwards
91+
92+
@keyframes slideInFromLeft
93+
from
94+
transform: translateX(-100%)
95+
opacity: 0
96+
to
97+
transform: translateX(0)
98+
opacity: 1
99+
100+
@keyframes slideOutToLeft
101+
from
102+
transform: translateX(0)
103+
opacity: 1
104+
to
105+
transform: translateX(-100%)
106+
opacity: 0
107+
108+
.context-container .navbar-start a.navbar-item.is-active:hover,
109+
.context-container .navbar-start .navbar-link.is-active:hover,
110+
.context-container .navbar-start .navbar-item:hover
111+
background-color: unset !important
112+
color: white !important
113+
114+
.content > .columns .content
115+
width: 100%
116+
117+
@media screen and (min-width: 1408px)
118+
.search-control
119+
margin-right: 60px
120+
121+
122+
@media screen and (max-width: 1023px)
123+
.box
124+
padding: 1.25rem 1rem 1.25rem 0rem

‎themes/hugo-bulma-blocks-theme/assets/sass/bulma/layout/hero.sass

-4
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ $hero-colors: $colors !default
1717
justify-content: space-between
1818
padding-top: 40px
1919
margin-top: -40px
20-
@media screen and (max-width: 768px)
21-
padding-top: 60px
22-
margin-top: -40px
23-
2420
.navbar
2521
background: none
2622
.tabs

‎themes/hugo-bulma-blocks-theme/assets/sass/style.sass

+3-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,9 @@ code
138138
color: white
139139
img
140140
filter: drop-shadow(0 0 10px #002033)
141-
max-width: calc(min(50vw, 200px))
142-
margin-left: auto
141+
// Commented for now, need to be handled in a responsive way
142+
// max-width: calc(min(50vw, 200px))
143+
// margin-left: auto
143144
padding-top: 3rem
144145
.tabs li:not(.is-active) a
145146
text-shadow: 0 0 5px #002033

‎themes/hugo-bulma-blocks-theme/layouts/partials/contextmenu.html

+57-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,60 @@
11
<div class="box mb-0 context-container" id="context">
2-
<div class="container is-flex is-justify-content-space-between">
3-
<div class="rss-feed">
4-
<a href="/" target="_blank" rel="noopener" class="external-link">
5-
Link example
6-
</a>
7-
</div>
8-
<div id="search-control" class="control has-icons-right search-control">
9-
<form action="{{ "search/" | absURL }}" method="GET">
10-
<input
11-
class="input is-small"
12-
type="search"
13-
id="search-query"
14-
name="q"
15-
placeholder="Search"
16-
/>
17-
<span class="icon is-right">
18-
<i class="fa-solid fa-magnifying-glass"></i>
19-
</span>
20-
</form>
21-
</div>
2+
<div class="container">
3+
<nav class="navbar" role="navigation" aria-label="main navigation">
4+
<div class="navbar-brand is-align-items-center is-justify-content-space-between">
5+
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
6+
<span aria-hidden="true"></span>
7+
<span aria-hidden="true"></span>
8+
<span aria-hidden="true"></span>
9+
</a>
10+
11+
12+
<div id="search-control" class="control has-icons-right search-control is-hidden-desktop">
13+
<form action="{{ "search/" | absURL }}" method="GET">
14+
<input
15+
class="input is-small"
16+
type="search"
17+
id="search-query"
18+
name="q"
19+
placeholder="Search"
20+
/>
21+
<span class="icon is-right">
22+
<i class="fa-solid fa-magnifying-glass"></i>
23+
</span>
24+
</form>
25+
</div>
26+
</div>
27+
<div id="navbarMenu" class="navbar-menu">
28+
<div class="navbar-start">
29+
{{- range site.Menus.main }}
30+
<a
31+
href="{{ .URL | absURL }}"
32+
class="navbar-item has-text-weight-semibold is-size-7"
33+
>
34+
{{ .Name }}
35+
</a>
36+
{{- end }}
37+
</div>
38+
<div class="navbar-end is-hidden-mobile is-hidden-tablet-only">
39+
<div class="navbar-item">
40+
<div id="search-control" class="control has-icons-right search-control">
41+
<form action="{{ "search/" | absURL }}" method="GET">
42+
<input
43+
class="input is-small"
44+
type="search"
45+
id="search-query"
46+
name="q"
47+
placeholder="Search"
48+
/>
49+
<span class="icon is-right">
50+
<i class="fa-solid fa-magnifying-glass"></i>
51+
</span>
52+
</form>
53+
</div>
54+
</div>
55+
</div>
56+
57+
</div>
58+
</nav>
2259
</div>
2360
</div>

0 commit comments

Comments
 (0)