Skip to content

Commit

Permalink
working navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkIntaqt
DarkIntaqt committed Feb 15, 2023
1 parent 3468793 commit 7a8cee4
Show file tree
Hide file tree
Showing 2 changed files with 170 additions and 76 deletions.
167 changes: 101 additions & 66 deletions layouts/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,77 +23,112 @@ export class Header extends Component {
super();

this.header = createRef(null);
this.headerPlaceholder = createRef(null);
this.buttonText = createRef(null);

this.toggleWidth = this.toggleWidth.bind(this);

/**
* true = expanded
* false = collapsed
*/
this.width = true;
}


toggleWidth() {

if (this.width === true) {
this.header.current.classList.add(css.collapsed);
this.headerPlaceholder.current.classList.add(css.collapsed);

this.buttonText.current.innerText = "Ellapse";

this.width = false;
} else {
this.header.current.classList.remove(css.collapsed);
this.headerPlaceholder.current.classList.remove(css.collapsed);

this.buttonText.current.innerText = "Collapse";

this.width = true;
}

}


render() {

return <nav className={css.header} id="header" ref={this.header}>

<Link href="/" >
<Logo />
<p>Challenge Tracker</p>
</Link>

<div className={css.scrollSection}>

<Link href="/">
<FontAwesomeIcon
icon={faHouse}
/>

<p>Home</p>
</Link>

<Link href="/challe nges">
<FontAwesomeIcon
icon={faCompass}
/>
<p>Challenges</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faRankingStar}
/>
<p>Leaderboards</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faAward}
/>
<p>Titles</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faUserGroup}
/>
<p>Communities</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faGear}
/>
<p>Settings</p>
</Link>

</div>

<div className={css.footer}>

<button type="button">
<FontAwesomeIcon
icon={faChevronLeft}
/>
<p>Collapse</p>
</button>

</div>

</nav>;
return <>
<section className={css.headerPlaceholder} ref={this.headerPlaceholder}>
<nav className={css.header} id="header" ref={this.header}>

<Link href="/" >
<Logo />
<p>Challenge Tracker</p>
</Link>

<div className={css.scrollSection}>

<Link href="/">
<FontAwesomeIcon
icon={faHouse}
/>

<p>Home</p>
</Link>

<Link href="/challe nges">
<FontAwesomeIcon
icon={faCompass}
/>
<p>Challenges</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faRankingStar}
/>
<p>Leaderboards</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faAward}
/>
<p>Titles</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faUserGroup}
/>
<p>Communities</p>
</Link>

<Link href="/">
<FontAwesomeIcon
icon={faGear}
/>
<p>Settings</p>
</Link>

</div>

<div className={css.footer}>

<button type="button" onClick={this.toggleWidth}>
<FontAwesomeIcon
icon={faChevronLeft}
/>
<p ref={this.buttonText}>Collapse</p>
</button>

</div>

</nav>
</section>
</>;

}
}
79 changes: 69 additions & 10 deletions styles/header.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,42 @@
@import 'variables';

$width: 230px;

.headerPlaceholder {
width: $width;
transition: .25s width;

&.collapsed {
width: calc(20px + 2rem);
}
}

.header {
height: 100%;
width: 230px;
width: $width;
box-sizing: border-box;
border-right: 1px solid $dark3;

box-shadow: 0 0 15px -5px #000;

position: relative;
z-index: 5;
position: fixed;
z-index: 15;
overflow-x: hidden;

background-color: $dark1;
transition: .25s width;

>a {

display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: $width;

padding: 10px;


&:hover {

p {
Expand All @@ -38,6 +53,8 @@
p {
margin-left: 10px;


white-space: nowrap;
color: white;
font-weight: bold;
font-size: 1.2rem;
Expand All @@ -51,13 +68,14 @@
width: 100%;
height: calc(100% - 130px);
overflow-y: auto;
overflow-x: hidden;

a {
display: flex;
width: $width;
align-items: center;
justify-content: flex-start;

padding: 20px;
padding: 20px 10px;
overflow: hidden;

color: $light2;
Expand All @@ -68,16 +86,17 @@
p {
padding: 0;
margin: 0;
flex: 1;
color: $light2;
font-size: 1rem;
padding-left: 10px;

transition: .25s color;
}

svg {
text-align: center;
width: 2rem;
margin-right: 10px;
}

&:hover {
Expand All @@ -97,12 +116,16 @@
width: 100%;
padding: 0 10px;

position: relative;
display: flex;
align-items: center;
justify-content: flex-end;

border-top: 1px solid $dark3;

button {
background-color: $dark3;
width: 100%;
background-color: $dark1;
border: none;
cursor: pointer;
outline: none;
Expand Down Expand Up @@ -143,15 +166,51 @@
}
}

&.collapsed {
width: calc(20px + 2rem);

.footer {
padding: 0;

button {
margin: 0 auto;
}

p {
display: none;
}

svg {
transform: rotate(180deg);
}
}

&:hover {
width: $width;

p,
.scrollSection a p,
.footer p {
display: block;
}

.footer {
padding: 0 10px;


button {
margin: 0;
}
}
}
}

@media only screen and (max-height:500px) {

.scrollSection {
box-shadow: inset 0px -15px 15px -15px #000;
}

.footer {
border-top: 1px solid $dark3;
}
}

}

1 comment on commit 7a8cee4

@vercel
Copy link

@vercel vercel bot commented on 7a8cee4 Feb 15, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

challenges – ./

challenges-darkintaqt.vercel.app
challenges-git-next-darkintaqt.vercel.app
challenges-beta.darkintaqt.com

Please sign in to comment.