diff --git a/src/components/DropDownBox/DropDownBox.scss b/src/components/DropDownBox/DropDownBox.scss index d0cb8ff..437c037 100644 --- a/src/components/DropDownBox/DropDownBox.scss +++ b/src/components/DropDownBox/DropDownBox.scss @@ -5,7 +5,7 @@ margin-top: 0.8rem; position: absolute; left: 0; - top: 40px; + top: 30px; z-index: 10; &, diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 6bceb93..bff1688 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -10,7 +10,7 @@ export enum IconType { export interface IconProps { name: IconType; - link: string; + link?: string; } export interface IconState {} diff --git a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss index 6f48f61..d6a300a 100644 --- a/src/components/NavbarDropdownLink/NavbarDropdownLink.scss +++ b/src/components/NavbarDropdownLink/NavbarDropdownLink.scss @@ -18,7 +18,7 @@ $border-width: 2px; &::after { content: ""; position: absolute; - bottom: -10px; + bottom: 5px; left: 0; width: 100%; border-bottom: 4px solid $light-blue; diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index c1497b4..b8160ca 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -11,21 +11,19 @@ $border-width: 2px; color: $light-blue; margin-left: 5rem; + @media screen and (max-width: 1200px - 1px) { + justify-content: flex-end; + } + a, a:-webkit-any-link { fill: $light-blue; color: $light-blue; } - &__item { - padding: 0.8rem 2rem; - transition: border-bottom 0.2s; - border-bottom: $border-width solid $dark-blue; - cursor: pointer; - color: $white; - - &:hover { - border-bottom: $border-width solid $white; + .navbar-dropdown-container { + @media screen and (max-width: 1200px - 1px) { + display: none; } } @@ -39,4 +37,21 @@ $border-width: 2px; color: $white; } } + + & .navigation-mobile { + display: flex; + margin: 0 1rem; + cursor: pointer; + + @media screen and (min-width: 1200px) { + display: none; + } + + svg { + width: 26px; + height: 26px; + fill: $white; + color: $white; + } + } } diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index 72ee975..8332b84 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/src/components/Navigation/Navigation.tsx @@ -28,6 +28,9 @@ class Navigation extends React.Component { +
+ +
); }