diff --git a/src/components/global/Burger.tsx b/src/components/global/Burger.tsx index 6f34a1d..3069040 100644 --- a/src/components/global/Burger.tsx +++ b/src/components/global/Burger.tsx @@ -6,6 +6,9 @@ import { useEffect, useState } from "react"; import { burger } from "../../types/burger"; +// Icons +import arrow from "../../icons/arrow-white-up.svg"; + const Burger = ({ burgerOpen, setBurgerOpen }: burger) => { const [dropdown, setDropdown] = useState(false); @@ -20,8 +23,32 @@ const Burger = ({ burgerOpen, setBurgerOpen }: burger) => {
+
{ + setBurgerOpen(false); + }} + >
); }; diff --git a/src/icons/arrow-white-up.svg b/src/icons/arrow-white-up.svg new file mode 100644 index 0000000..c51d56d --- /dev/null +++ b/src/icons/arrow-white-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/_burger.scss b/src/styles/_burger.scss index 01c98be..945c166 100644 --- a/src/styles/_burger.scss +++ b/src/styles/_burger.scss @@ -1,4 +1,5 @@ .burger { + display: flex; position: fixed; top: 0; left: 0; @@ -20,6 +21,11 @@ } } } +.burger-close-overlay { + max-width: 40%; + width: 100%; + height: 100%; +} .burger-inner { @include transition-std; @@ -27,4 +33,108 @@ width: 100%; height: 0%; background: $base-green; + + li { + a, + span { + border-top: 0.1rem solid #006a4d; + border-bottom: 0.1rem solid #006a4d; + color: #fff; + font-weight: bold; + font-size: 2.4rem; + display: block; + padding: 2.4rem; + @include transition-std; + background: $base-green; + + &:hover { + background: $hover-green; + @include transition-std; + } + } + } + + .burger-list-first { + border-bottom: 0.1rem solid #006a4d; + border-left: 0.4rem solid #fff; + overflow: hidden; + @include transition-std; + max-height: 8.1rem; + height: 100%; + &.active { + @include transition-std; + max-height: 30rem; + .burger-inner-dropdown { + li { + a { + padding: 2.4rem 4.8rem; + @include transition-std; + } + } + } + } + .first-inner { + padding: 2.4rem; + + cursor: pointer; + display: flex; + align-items: center; + gap: 2rem; + justify-content: space-between; + background: $base-green; + @include transition-std; + + &:hover { + background: $hover-green; + @include transition-std; + } + } + span { + border: none; + background: transparent !important; + padding: 0; + } + } +} + +.burger-arrow { + @include transition-std; + transform: rotateX(180deg); + width: 3rem; + height: 3rem; + + img { + width: 3rem; + height: 3rem; + object-fit: contain; + } + + &.active { + @include transition-std; + transform: rotateX(0deg); + } +} + +.calendars { + display: none !important; +} + +.burger-inner-dropdown { + li { + a { + border: none; + padding: 2.4rem 0rem; + @include transition-std; + } + } +} + +// Adaptive +@media screen and (max-width: 1000px) { + .burger-close-overlay { + max-width: 20%; + } + .burger-inner { + max-width: 80%; + } }