STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

fix responsive

Browse Source
This commit is contained in:
James Collins
2023-04-17 19:34:42 +10:00
parent 802fd87850
commit 2814a5f044
1 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
resources/js/components/SMNavbar.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<SMContainer <SMContainer
:full="true" :full="true"
:class="['sm-navbar-container', { 'sm-show-nav': showToggle }]" :class="['sm-navbar-container', { 'sm-nav-active': showToggle }]"
@click="handleClickNavBar"> @click="handleClickNavBar">
<template #inner> <template #inner>
<nav class="sm-navbar"> <nav class="sm-navbar">
@@ -145,17 +145,19 @@ body[data-route-name="page-home"] {
.sm-navbar-container { .sm-navbar-container {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
.sm-nav-logo.dark\:d-none { &:not(.sm-nav-active) {
display: none !important; .sm-nav-logo.dark\:d-none {
} display: none !important;
}
.sm-nav-logo.light\:d-none { .sm-nav-logo.light\:d-none {
display: block !important; display: block !important;
} }
}
.sm-navbar #sm-nav-head #sm-nav-toggle { .sm-navbar #sm-nav-head #sm-nav-toggle {
filter: invert(100%) saturate(0%) brightness(120%); filter: invert(100%) saturate(0%) brightness(120%);
}
}
} }
} }
@@ -167,7 +169,7 @@ body[data-route-name="page-home"] {
background-color: var(--navbar-color); background-color: var(--navbar-color);
box-shadow: var(--base-shadow); box-shadow: var(--base-shadow);
&.sm-show-nav { &.sm-nav-active {
background-color: var(--navbar-color) !important; background-color: var(--navbar-color) !important;
#sm-nav { #sm-nav {
@@ -264,21 +266,11 @@ body[data-route-name="page-home"] {
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 650px) {
// #sm-nav-toggle { .sm-nav-right {
// padding: 23px; .button {
// -webkit-user-select: none; display: none;
// -moz-user-select: none; }
// -ms-user-select: none; }
// user-select: none;
// &:hover {
// background-color: hsla(0, 0%, 50%, 0.1);
// }
// img {
// display: block;
// }
// }
} }
</style> </style>