janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 21:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

asd

Browse Source
This commit is contained in:
Janis
2022-12-21 02:02:29 +01:00
parent 06c04efcfc
commit 348ba019c1
4 changed files with 176 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/Nav.tsx
View File

@@ -1,6 +1,53 @@
import React from "react"; "use client";
import React, { useRef } from "react";
import styles from "../styles/Nav.module.scss"; import styles from "../styles/Nav.module.scss";
import Image from "next/image";
import Link from "next/link";
function switchTheme() {}
export default function Nav() { export default function Nav() {
return <nav className={styles.nav}>Nav</nav>; const switchThemeSvgRef = useRef();
return (
<nav className={styles.nav}>
<div className={styles.containerLeft}>
<Image
src={"/images/logo.svg"}
height={40}
width={160}
alt="Nav bar logo"
/>
<div className={styles.links}>
<Link href={"/tutorials"}>Tutorials</Link>
</div>
</div>
<div className={styles.containerCenter}>
<div className={styles.searchBar}>
<div className={styles.icon}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z" />
</svg>
</div>
<input type="text" name="" id="" />
</div>
</div>
<div className={styles.containerRight}>
<div
className={styles.themeSwitch}
onClick={() => {
switchTheme();
}}
>
<svg
ref={switchThemeSvgRef}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zm64 0c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" />
</svg>
</div>
</div>
</nav>
);
} }

2
app/layout.tsx
View File

@@ -10,7 +10,7 @@ export default function RootLayout({
return ( return (
<html style={{ scrollBehavior: "smooth" }}> <html style={{ scrollBehavior: "smooth" }}>
<head></head> <head></head>
<body> <body className="theme-dark">
<header> <header>
<Nav /> <Nav />
</header> </header>

106
styles/Nav.module.scss
View File

@@ -1,5 +1,109 @@
@import "variables.scss";
.nav { .nav {
background-color: rgb(12, 12, 14); background-color: $color-background-nav;
height: 60px; height: 60px;
margin-bottom: 50px; 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;
}
}
} }

24
styles/variables.scss
View File

@@ -1,9 +1,27 @@
/* By default colors are in dark mode */ /* By default colors are in dark mode */
/* Colors: General */ /* 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-background-card: mix($color-overlay-mix, $color-background-body, 5%);
$color-font: #ffffff;
$color-accent: #2294ff; $color-accent: #2294ff;
$color-font-link: $color-accent; $color-font-link: $color-accent;