final bug with upper line fixed

This commit is contained in:
Dmitry Borisenko
2021-08-12 02:31:08 +08:00
parent d75511de5c
commit 461c2f45c1

View File

@@ -6,32 +6,36 @@
</script> </script>
<main> <main>
<input id="menu__toggle" type="checkbox" /> <ul class="menu__ham">
<label class="menu__btn" for="menu__toggle"> <input id="menu__toggle" type="checkbox" />
<span /> <label class="menu__btn" for="menu__toggle">
</label> <span />
<ul class="menu__box"> </label>
<li>
<a class="menu__item" href="/">{"Управление"}</a> <ul class="menu__box">
</li> <li>
<li> <a class="menu__item" href="/">{"Управление"}</a>
<a class="menu__item" href="/config">{"Конфигуратор"}</a> </li>
</li> <li>
<li> <a class="menu__item" href="/config">{"Конфигуратор"}</a>
<a class="menu__item" href="/connection">{"Подключение"}</a> </li>
</li> <li>
<li> <a class="menu__item" href="/connection">{"Подключение"}</a>
<a class="menu__item" href="/utilities">{"Утилиты"}</a> </li>
</li> <li>
<li> <a class="menu__item" href="/utilities">{"Утилиты"}</a>
<a class="menu__item" href="/log">{"Лог"}</a> </li>
</li> <li>
<li> <a class="menu__item" href="/log">{"Лог"}</a>
<a class="menu__item" href="/about">{"О проекте"}</a> </li>
</li> <li>
<a class="menu__item" href="/about">{"О проекте"}</a>
</li>
</ul>
</ul> </ul>
<ul class="menu__main"> <!--<ul class="menu__main">-->
<div class="bg-cover bg-gray-50">
<Route path="/"> <Route path="/">
<!-- Card Container --> <!-- Card Container -->
<div class="grid place-items-center mx-2 sm:my-auto"> <div class="grid place-items-center mx-2 sm:my-auto">
@@ -155,7 +159,8 @@
</div> </div>
</div> </div>
</Route> </Route>
</ul> </div>
<!--</ul>-->
</main> </main>
<style lang="postcss" global> <style lang="postcss" global>
@@ -181,14 +186,33 @@
visibility: visible; visibility: visible;
left: 0; left: 0;
} }
#menu__toggle:checked ~ .menu__main {
margin-left: 150px; /* насколько сужать правую часть */
}
/*
#menu__toggle:checked ~ .menu__main {
margin-left: 150px;
transition-duration: 0.25s;
}
*/
/*
.menu__main { .menu__main {
top: 0; /* насколько отступить сверху в главном меню */ background-color: #dfdfdf;
background-color: #eceff1; }
/* box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);*/ */
/*
.menu__main {
min-width: 100%;
min-height: 100%;
position: relative;
}
*/
html {
height: 100%;
}
body {
min-height: 100%;
} }
.menu__btn { .menu__btn {
@@ -225,7 +249,6 @@
.menu__box { .menu__box {
display: block; display: block;
position: fixed; position: fixed;
/*z-index: 1;*/
visibility: hidden; visibility: hidden;
top: 0; top: 0;
left: -100%; left: -100%;
@@ -239,6 +262,10 @@
transition-duration: 0.25s; transition-duration: 0.25s;
} }
.menu__ham {
position: fixed;
}
.menu__item { .menu__item {
display: block; display: block;
padding: 12px 24px; padding: 12px 24px;