diff --git a/components/02_Molecules/navigation/_navigation.scss b/components/02_Molecules/navigation/_navigation.scss index a247705..fd0bdc8 100644 --- a/components/02_Molecules/navigation/_navigation.scss +++ b/components/02_Molecules/navigation/_navigation.scss @@ -30,30 +30,33 @@ } &--sidebar{ - border-top: 1px solid $-light-brown; + border-top: 1px solid $-light-brown; + border-left: none; min-width: 60px; background-color: $-almost-white; - height: 100%; + height: 100%; + padding-top: 25px; + .LP-Menu__List{ - margin-left: 25px; - margin-top: 25px; flex-direction: column; .LP-Menu__Item{ text-align: left; margin-bottom: 10px; - padding: 5px; padding-left: 25px; + .LP-Link{ + line-height: 1em; + } + &:last-child{ margin-bottom: 0; } &:hover{ - border-left: 2px solid $-light-brown; + border-right: 2px solid $-light-brown; position: relative; background-color: $-beige; - left: -2px; } } diff --git a/components/05_Pages/_pages.scss b/components/05_Pages/_pages.scss index 42382c1..d600941 100644 --- a/components/05_Pages/_pages.scss +++ b/components/05_Pages/_pages.scss @@ -11,7 +11,7 @@ $-sidebar-width: 250px; min-height: 1px; } - .LP-Main__Navigation{ + .LP-Main__Sidebar{ flex-shrink: 0; width: $-sidebar-width; flex-grow: 0; diff --git a/components/05_Pages/placeDetail/placeDetail.hbs b/components/05_Pages/placeDetail/placeDetail.hbs index a7580dd..4ab5ab5 100644 --- a/components/05_Pages/placeDetail/placeDetail.hbs +++ b/components/05_Pages/placeDetail/placeDetail.hbs @@ -3,7 +3,7 @@
-
+
{{> @navigation modifier='--sidebar'}}
\ No newline at end of file diff --git a/public/components.css b/public/components.css index f9e48be..619b9c6 100644 --- a/public/components.css +++ b/public/components.css @@ -262,25 +262,25 @@ body { color: #76323F; } .LP-Menu--sidebar { border-top: 1px solid #C09F80; + border-left: none; min-width: 60px; background-color: #f9f9f9; - height: 100%; } + height: 100%; + padding-top: 25px; } .LP-Menu--sidebar .LP-Menu__List { - margin-left: 25px; - margin-top: 25px; flex-direction: column; } .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item { text-align: left; margin-bottom: 10px; - padding: 5px; padding-left: 25px; } + .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link { + line-height: 1em; } .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child { margin-bottom: 0; } .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover { - border-left: 2px solid #C09F80; + border-right: 2px solid #C09F80; position: relative; - background-color: #D7CEC7; - left: -2px; } + background-color: #D7CEC7; } @media (max-width: 750px) { .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List { @@ -523,7 +523,7 @@ body { flex-grow: 1; width: calc(100% -300px); min-height: 1px; } - .LP-Main .LP-Main__Navigation { + .LP-Main .LP-Main__Sidebar { flex-shrink: 0; width: 250px; flex-grow: 0;