CSS and HTML for Navbar

src/components/Navbar/Navbar.jsx

@@ -2,10 +2,40 @@ import Box from '../Box/Box'
 
 import './Navbar.style.scss'
 
+import iconLocationDark from '../../assets/icon-location-dark.png'
+// import iconLocationLight from '../../assets/icon-location-light.png'
+import iconThemeSun from '../../assets/icon-theme-sun-light.png'
+// import iconThemeMoon from '../../assets/icon-theme-moon-dark.png'
+import iconSettingDark from '../../assets/icon-settings-dark.png'
+// import iconSettingLight from '../../assets/icon-settings-light.png'
+import iconGeolocationDark from '../../assets/icon-geolocation-dark.png'
+// import iconGeolocationLight from '../../assets/icon-geolocation-light.png'
+
+
 export default function Navbar() {
+
     return (
         <Box className="navbar">
-            <input></input>
+            <div className="navbar__logo">
+                <p>WeatherApp</p>
+            </div>
+            <div className="navbar__place">
+                <img className="place__icon icon" src={iconLocationDark} alt="Icon Location Dark" /> 
+                <b>Polska</b>, Przebieczany
+                </div>
+            <div className="navbar__search">
+                <input type="text" className="search__input input" placeholder="Search Location"></input>
+                <img className="search__icon icon icon--hover" src={iconGeolocationDark} alt="Icon Geolocation" />
+            </div>
+            <div className="navbar__theme">
+                <button className="theme__button button">
+                    <img className="button__icon icon" src={iconThemeSun} alt="Icon Theme" />
+                    Light Mode
+                </button>
+            </div>
+            <div className="navbar__settings">
+                <img className="settings__icon icon icon--hover" src={iconSettingDark} alt="Icon Settings" />
+            </div>
         </Box>
     )
-}
+}

src/components/Navbar/Navbar.style.scss

@@ -2,8 +2,154 @@
 @use '../../styles/sizes.scss';
 @use '../../styles/fonts.scss';
 
+.dark {
+    .navbar {
+        &__search {
+            border-color: colors.$border-color-dark;
+            .search__icon {
+                background-color: colors.$border-color-dark;
+            }
+        }
+    }
+}
+.light {
+    .navbar {
+        &__search {
+            border-color: colors.$border-color-light;
+        }
+        .search__icon {
+            background-color: colors.$border-color-light;
+        }
+    }
+}
 .navbar {
+    font-size: 16px;
     grid-column: 1 / -1;
     position: sticky;
     top: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    &__logo {
+        width: 100px;
+        display: flex;
+        align-items: center;
+        color: colors.$text-supporting-color-blue;
+    }
+    &__place {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 0.8rem;
+    }
+    &__search {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        border-radius: sizes.$border-radius-small;
+        background-color: transparent;
+        border-width: 1px;
+        border-style: solid;
+        .search__input {
+            font-size: 0.8rem;
+            flex: 1;
+        }
+        .search__icon {
+            margin: 0;
+            height: 100%;
+            width: 38px;
+            object-fit: cover;
+            border-top-right-radius: sizes.$border-radius-small;
+            border-bottom-right-radius: sizes.$border-radius-small;
+        }
+        &:focus-within {
+            border-color: colors.$text-supporting-color-blue;
+        }
+    }
+    .navbar__theme {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .theme__button {
+            font-size: 0.8rem;
+        }
+    }
+    .navbar__settings {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+}
+.icon {
+    width: 16px;
+    height: 16px;
+    margin: 4px;
+    &--hover {
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+        &:hover {
+            cursor: pointer;
+            opacity: 0.9;
+        }
+    }
+}
+.button {
+    display: flex;
+    align-items: center;
+    padding: 6px 16px;
+    border-radius: sizes.$border-radius-small;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.3s;
+    &:hover {
+        opacity: 0.9;
+    }
+    &__icon {
+        width: 16px;
+        height: 16px;
+        margin: 4px;
+    }
+}
+.dark {
+    .button {
+        background-color: colors.$button-background-color-dark;
+        color: colors.$button-text-color-dark;
+    }
+}
+.light {
+    .button {
+        background-color: colors.$button-background-color-light;
+        color: colors.$button-text-color-light;
+    }
+}
+.input {
+    border-width: 0;
+    background-color: transparent;
+    color: colors.$text-color-dark;
+    font-size: 0.9rem;
+    height: 100%;
+    padding: 10px 16px;
+    outline: none;
+    &::placeholder {
+        color: colors.$text-color-dark;
+        opacity: 0.9;
+    }
+}
+.dark {
+    .input {
+        color: colors.$text-color-dark;
+        &::placeholder {
+            color: colors.$text-color-dark;
+        }
+    }
+}
+.light {
+    .input {
+        color: colors.$text-color-light;
+        &::placeholder {
+            color: colors.$text-color-light;
+        }
+    }
 }

src/styles/_colors.scss

@@ -4,5 +4,16 @@ $background-color-dark:#12192a;
 $background-box-color-light: #ffffff;
 $background-box-color-dark: #0b0f1d;
 
-$text-color-light: #000;
-$text-color-dark: #fff;
+$border-color-light: #f0f1f3;
+$border-color-dark: #1f242e;
+
+$text-color-light: #252f41;
+$text-color-dark: #f5f5f5;
+
+$text-supporting-color-blue: #0d7bfc;
+
+// Button
+$button-background-color-light: #0b0f1d;
+$button-background-color-dark: #f5f5f5;
+$button-text-color-dark: #0b0f1d;
+$button-text-color-light: #ffffff;