projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

fixed mobile menu

Browse source 
some script got removed during the restruction that included the js
handler for the mobile menu, so that was replaced with a css toggle to
keep it simple
This commit is contained in:
ro 2024-05-28 11:38:32 -06:00
parent a5cf8816f0
commit bdca7f4ace
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
2 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
public/assets/css/dash/frame.css
View file

@ -122,7 +122,7 @@ header > nav > div > div.mobile-menu {
display: none; display: none;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
left: 0; left: 5px;
transition: all 0.2s linear; transition: all 0.2s linear;
background: var(--white); background: var(--white);
} }
@ -135,8 +135,24 @@ header > nav > div.nav-right button {
color: var(--white); color: var(--white);
} }
header > nav > div.nav-right > button.menu-toggle { header > nav > div.nav-right > label#menu-toggle-label {
display: none; display: none;
border-radius: 3px;
padding: 6px 5px 0px;
background: var(--secondary-highlight);
cursor: pointer;
}
#mobile-toggle {
display: none;
}
#mobile-toggle:not(:checked) ~ #main-nav {
display: none;
}
#mobile-toggle:checked ~ .mobile-menu {
display: inline;
} }
header > nav > div.nav-right div.submenu { header > nav > div.nav-right div.submenu {
@ -158,8 +174,8 @@ header > nav > div.nav-right div.submenu button {
} }
@media only screen and (max-width: 530px) { @media only screen and (max-width: 530px) {
header > nav > div.nav-right > button.menu-toggle { header > nav > div.nav-right > label#menu-toggle-label {
display: inline; display: inline-block;
} }
header > nav > div > div.menu { header > nav > div > div.menu {

13
resources/views/includes/nav.blade.php
View file

@ -11,7 +11,7 @@
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
<svg id="nav-menu-icon" class="icon"> <svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
@ -21,9 +21,12 @@
</a> </a>
</div> </div>
<button class="menu-toggle"> <label id='menu-toggle-label' for="mobile-toggle">
<i class="ti ti-menu-2"></i> <svg id="nav-menu-icon" class="icon">
</button> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
</svg>
</label>
<input id="mobile-toggle" type="checkbox" />
<div class="mobile-menu"> <div class="mobile-menu">
@if($title == "Settings" ) @if($title == "Settings" )
@ -38,7 +41,7 @@
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
<svg id="nav-menu-icon" class="icon"> <svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">