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

implement responsive header

Browse Source
This commit is contained in:
DerTyp7
2023-10-10 16:20:58 +02:00
parent 0a3c1e46a3
commit c0b8e19ef0
2 changed files with 66 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Header.tsx
View File

@@ -4,9 +4,22 @@ import ThemeSwitch from "@components/ThemeSwitch";
export default function Header() { export default function Header() {
return ( return (
<header className="header"> <header className="header">
{/* Mobile Top Row Header */}
<div className="header-mobile">
<div className="logo">
<h1>Meister</h1>
</div>
<div className="control">
<ThemeSwitch />
<div>Language</div>
</div>
</div>
{/* END: Mobile Top Row Header */}
<div className="logo"> <div className="logo">
<h1>Meister</h1> <h1>Meister</h1>
</div> </div>
<div className="links"> <div className="links">
<a href="">About</a> <a href="">About</a>
<a href="">Skills</a> <a href="">Skills</a>

53
src/styles/Header.scss
View File

@@ -39,4 +39,57 @@
align-items: center; align-items: center;
flex: 0.5; flex: 0.5;
} }
.header-mobile {
display: none; // will be set to flex on mobile/small screens
justify-content: space-between;
flex: 1;
width: 100%;
flex-direction: row;
.logo {
display: flex;
}
.control {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
}
@media (max-width: 768px) {
flex-direction: column;
gap: 1rem;
.logo {
display: none;
}
.control {
display: none;
}
.header-mobile {
display: flex;
}
}
@media (max-width: 300px) {
.header-mobile {
flex-direction: column;
.logo {
justify-content: center;
}
.control {
justify-content: center;
}
}
.links {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
}
} }