xarvh/fipamo
1
0
Fork 0
forked from projects/fipamo
Code Pull requests 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">