diff --git a/src/app/components/Navbar.module.css b/src/app/components/Navbar.module.css index 0e59744..3179434 100644 --- a/src/app/components/Navbar.module.css +++ b/src/app/components/Navbar.module.css @@ -5,7 +5,9 @@ left: 0; right: 0; z-index: 9999; - background-color: #fff; + color: black; + background-color: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(2rem); } /* Reset default styling on lists */ @@ -64,6 +66,10 @@ /* Add styles for mobile view */ @media (max-width: 500px) { + .navbar { + background-color: white; + } + .links { display: flex; flex-direction: column; @@ -81,7 +87,8 @@ padding-bottom: 0.5em; transition-property: top border-radius; - transition-duration: 0.3s; + transition-duration: 0.4s; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .links { @@ -114,6 +121,17 @@ .dropdown { padding: 0 !important; } + + .dropdownMenu { + max-height: 0.5em; + overflow: hidden; + transition: max-height 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); + } + + .dropdownActive .dropdownMenu { + max-height: 20em; + transition: max-height 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); + } } /* Styles for desktop view */ @@ -185,8 +203,7 @@ } .dropdown:not(.dropdownActive) { - background-color: #fff; - transition: all 0.3s ease-out; + transition: all 0.3s; } .dropdown:not(.dropdownActive) li { @@ -197,14 +214,6 @@ background-color: #f1f1f1; } -.dropdownMenu { - display: none; -} - -.dropdownActive .dropdownMenu { - display: block; -} - .dropdown:not(.dropdownActive) .dropdownTitle { margin-bottom: 0; }