diff --git a/app/Nav.tsx b/app/Nav.tsx index 6b2b34f..7293f47 100644 --- a/app/Nav.tsx +++ b/app/Nav.tsx @@ -1,6 +1,53 @@ -import React from "react"; +"use client"; +import React, { useRef } from "react"; import styles from "../styles/Nav.module.scss"; +import Image from "next/image"; +import Link from "next/link"; + +function switchTheme() {} export default function Nav() { - return ; + const switchThemeSvgRef = useRef(); + + return ( + + ); } diff --git a/app/layout.tsx b/app/layout.tsx index 3ef7239..bbcefe4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,7 +10,7 @@ export default function RootLayout({ return ( - +
diff --git a/styles/Nav.module.scss b/styles/Nav.module.scss index 56ff7b7..cf6f2a7 100644 --- a/styles/Nav.module.scss +++ b/styles/Nav.module.scss @@ -1,5 +1,109 @@ +@import "variables.scss"; .nav { - background-color: rgb(12, 12, 14); + background-color: $color-background-nav; height: 60px; margin-bottom: 50px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + box-shadow: $color-shadow-nav 0px 4px 8px; + + & > div { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .containerLeft { + column-gap: 100px; + + .links { + font-size: 0.8em; + font-weight: bold; + } + } + + .containerCenter { + .searchBar { + display: flex; + justify-content: center; + align-items: center; + border: 2px solid rgba(95, 95, 95, 0.5); + border-radius: 5px; + padding-left: 10px; + transition: all 50ms linear; + + &:hover { + border-color: rgba(91, 91, 91, 0.9); + + .icon { + svg { + fill: $color-font; + } + } + } + + &:focus-within { + border-color: rgba(91, 91, 91, 0.9); + .icon { + svg { + fill: $color-font; + } + } + } + + input { + width: 300px; + height: 30px; + background-color: transparent; + border: 0px; + outline: 0; + padding-right: 10px; + color: $color-font; + } + + .icon { + display: block; + padding-right: 10px; + svg { + height: 15px; + } + } + } + } + + .containerRight { + justify-content: flex-end; + padding-right: 50px; + + .themeSwitch { + svg { + transition: all 50ms linear; + height: 24px; + cursor: pointer; + animation-duration: 100ms; + animation-timing-function: linear; + animation-iteration-count: 1; + &:hover { + fill: $color-font; + } + } + } + } + + svg { + aspect-ratio: 1; + fill: mix($color-font, $color-background-body, 70%); + } + + @keyframes spinThemeSwitch { + from { + transform: rotate(0deg); + } + to { + transform: rotate(-180deg); + fill: #000; + } + } } diff --git a/styles/variables.scss b/styles/variables.scss index 3e519d9..00fbb9c 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,9 +1,27 @@ /* By default colors are in dark mode */ /* Colors: General */ -$color-overlay-mix: #fff; -$color-background-body: #181a1b; //181a1b + +$color-background-body: #ffffff; //181a1b +$color-font: #000000; +$color-shadow-nav: #000c2b0d; +// Light +.theme-light { + $color-background-body: #ffffff; //181a1b + $color-font: #000000; + $color-shadow-nav: #000c2b0d; +} + +// Dark +.theme-dark { + $color-background-body: #181a1b; //181a1b + $color-font: #ffffff; + $color-shadow-nav: #00000033; +} + +$color-overlay-mix: $color-font; + +$color-background-nav: transparent; $color-background-card: mix($color-overlay-mix, $color-background-body, 5%); -$color-font: #ffffff; $color-accent: #2294ff; $color-font-link: $color-accent;