Skip to content

Commit 93ecd35

Browse files
steam-bell-92steam-bell-92
authored
Merge pull request steam-bell-92#550 from anujsharma8d/feat/change-navbar-ui
Improve Navbar Layout
2 parents 8369178 + 52bb34a commit 93ecd35

5 files changed

Lines changed: 97 additions & 100 deletions

File tree

‎web-app/assets/moon.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎web-app/assets/sun.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎web-app/css/styles.css‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,6 @@ body {
118118
}
119119

120120
.container {
121-
max-width: 1200px;
122121
margin: 0 auto;
123122
padding: 0 20px;
124123
}
@@ -138,11 +137,9 @@ body {
138137

139138
.navbar .container {
140139
display: flex;
141-
justify-content: space-between;
140+
justify-content:space-around;
142141
align-items: center;
143-
gap: 2rem;
144142
}
145-
146143
.navbar-brand {
147144
display: flex;
148145
align-items: baseline;
@@ -557,8 +554,9 @@ body {
557554
display: flex;
558555
gap: 1.05rem;
559556
justify-content: center;
557+
align-items: center;
560558
flex-wrap: wrap;
561-
margin-bottom: 1.1rem;
559+
/* margin-bottom: 1.1rem; */
562560
animation: fadeInUp 0.7s ease 0.4s both;
563561
}
564562

@@ -1235,6 +1233,12 @@ body {
12351233
max-width: 600px;
12361234
margin: 0 auto;
12371235
}
1236+
.search-box-container{
1237+
display: flex;
1238+
align-items: center;
1239+
justify-content: center;
1240+
margin: 20px;
1241+
}
12381242

12391243
.search-box {
12401244
position: relative;
@@ -1244,6 +1248,7 @@ body {
12441248
padding: 0.5rem 1.5rem;
12451249
display: flex;
12461250
align-items: center;
1251+
justify-content: center;
12471252
gap: 1rem;
12481253
transition: var(--transition);
12491254
}

‎web-app/index.html‎

Lines changed: 58 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -800,72 +800,74 @@
800800
🚀 Skip to main content
801801
</a>
802802
<!-- Navigation -->
803-
<nav aria-label="Primary" class="navbar">
804-
<div class="container nav-wrapper">
805-
<!-- LEFT -->
806-
<div class="navbar-brand">
803+
<nav aria-label="Primary" class="navbar">
804+
<div class="container nav-wrapper">
805+
<!-- LEFT -->
806+
<div class="navbar-brand">
807807
<a class="logo-wrap" href="#">
808808
<!-- LOGO IMAGE -->
809809
<img alt="PyMini Logo" class="navbar-logo" src="/assets/logo.png"/>
810810
<!-- TEXT -->
811811
<div class="logo-text">
812-
<span class="logo-py">py</span>
813-
<span class="logo-mini">.mini</span>
814-
<span class="logo-parens">()</span>
812+
<span class="logo-py">py</span>
813+
<span class="logo-mini">.mini</span>
814+
<span class="logo-parens">()</span>
815815
</div>
816816
<!-- SMALL TAGLINE -->
817817
<span class="logo-tagline">
818-
games, math &amp; terminal toys
819-
</span>
818+
games, math &amp; terminal toys
819+
</span>
820820
</a>
821821
</div>
822-
<!-- CENTER SEARCH -->
823-
<div class="search-box">
824-
<i class="fas fa-search"></i>
825-
<input aria-label="Search projects" id="searchInput" placeholder="Search projects or games..." type="text"/>
826-
</div>
827-
<!-- RIGHT -->
828-
<div class="nav-controls">
829-
<button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
830-
<i class="fas fa-volume-up"></i>
822+
823+
<div class="container1">
824+
<div aria-label="Project categories" class="hero-features" role="tablist">
825+
<button aria-selected="true" class="feature-badge tab active" data-category="all" role="tab" tabindex="0">
826+
<span class="feature-icon"><i data-lucide="star"></i></span>
827+
<span class="feature-label">all</span>
828+
</button>
829+
<button aria-selected="false" class="feature-badge tab" data-category="games" role="tab" tabindex="-1">
830+
<span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
831+
<span class="feature-label">games</span>
831832
</button>
832-
<button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
833-
<i class="fas fa-moon"></i>
833+
<button aria-selected="false" class="feature-badge tab" data-category="math" role="tab" tabindex="-1">
834+
<span class="feature-icon"><i data-lucide="hash"></i></span>
835+
<span class="feature-label">math</span>
834836
</button>
837+
<button aria-selected="false" class="feature-badge tab" data-category="utilities" role="tab" tabindex="-1">
838+
<span class="feature-icon"><i data-lucide="lock"></i></span>
839+
<span class="feature-label">utilities</span>
840+
</button>
841+
<button aria-selected="false" class="feature-badge tab" data-category="playground" id="playgroundTab" role="tab" tabindex="-1">
842+
<span class="feature-icon"><i data-lucide="terminal"></i></span>
843+
<span class="feature-label">playground</span>
844+
</button>
845+
<button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
846+
launch random →
847+
</button>
848+
</div>
835849
</div>
850+
851+
<!-- RIGHT -->
852+
<div class="nav-controls">
853+
<button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
854+
<i class="fas fa-volume-up"></i>
855+
</button>
856+
<button aria-label="Switch theme" class="theme-toggle" id="themeToggle" type="button">
857+
<i class="fas fa-moon"></i>
858+
</button>
836859
</div>
860+
837861
</nav>
862+
<!-- CENTER SEARCH -->
863+
<div class="search-box-container">
864+
<div class="search-box">
865+
<i class="fas fa-search"></i>
866+
<input aria-label="Search projects" id="searchInput" placeholder="Search projects or games..." type="text"/>
867+
</div>
868+
</div>
838869
<!-- ── Sticky Category Filter Bar ─────────────────────────────── -->
839870
<!-- Appears below navbar when user scrolls past the hero section -->
840-
<div aria-label="Project categories (sticky)" class="sticky-filter-bar" id="stickyFilterBar" role="tablist">
841-
<div class="sticky-filter-inner">
842-
<button aria-selected="true" class="sticky-tab active" data-sticky-category="all" role="tab" tabindex="0">
843-
<i aria-hidden="true" data-lucide="layout-grid"></i>
844-
<span>all</span>
845-
</button>
846-
<button aria-selected="false" class="sticky-tab" data-sticky-category="games" role="tab" tabindex="-1">
847-
<i aria-hidden="true" data-lucide="gamepad-2"></i>
848-
<span>games</span>
849-
</button>
850-
<button aria-selected="false" class="sticky-tab" data-sticky-category="math" role="tab" tabindex="-1">
851-
<i aria-hidden="true" data-lucide="hash"></i>
852-
<span>math</span>
853-
</button>
854-
<button aria-selected="false" class="sticky-tab" data-sticky-category="utilities" role="tab" tabindex="-1">
855-
<i aria-hidden="true" data-lucide="lock"></i>
856-
<span>utilities</span>
857-
</button>
858-
<button aria-selected="false" class="sticky-tab" data-sticky-category="playground" role="tab" tabindex="-1">
859-
<i aria-hidden="true" data-lucide="terminal"></i>
860-
<span>playground</span>
861-
</button>
862-
<button aria-selected="false" class="sticky-tab" data-sticky-category="favorites" role="tab" tabindex="-1">
863-
<i aria-hidden="true" class="fas fa-star"></i>
864-
<span>favorites</span>
865-
</button>
866-
</div>
867-
</div>
868-
869871
<main id="main-content" tabindex="-1">
870872
<section class="hero-section" aria-label="Welcome">
871873
<div class="hero-background"></div>
@@ -874,50 +876,15 @@
874876
<h2 class="hero-title">Learn Python the Fun Way!</h2>
875877
<p class="hero-subtitle">25+ Mini Projects • Beautiful UI • Beginner Friendly • Zero Dependencies</p>
876878

877-
<div aria-label="Project categories" class="hero-features" role="tablist">
878-
<button aria-selected="true" class="feature-badge tab active" data-category="all" role="tab" tabindex="0">
879-
<span class="feature-icon"><i data-lucide="layout-grid"></i></span>
880-
<span class="feature-label">all</span>
881-
</button>
882-
<button aria-selected="false" class="feature-badge tab" data-category="games" role="tab" tabindex="-1">
883-
<span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
884-
<span class="feature-label">games</span>
885-
</button>
886-
<button aria-selected="false" class="feature-badge tab" data-category="math" role="tab" tabindex="-1">
887-
<span class="feature-icon"><i data-lucide="hash"></i></span>
888-
<span class="feature-label">math</span>
889-
</button>
890-
<button aria-selected="false" class="feature-badge tab" data-category="utilities" role="tab" tabindex="-1">
891-
<span class="feature-icon"><i data-lucide="lock"></i></span>
892-
<span class="feature-label">utilities</span>
893-
</button>
894-
<!--
895-
PLAYGROUND TAB
896-
data-category="playground" is detected by main.js
897-
and delegates to window.playgroundAPI instead of
898-
running applyCategoryFilter().
899-
-->
900-
<button aria-selected="false" class="feature-badge tab" data-category="playground" id="playgroundTab" role="tab" tabindex="-1">
901-
<span class="feature-icon"><i data-lucide="terminal"></i></span>
902-
<span class="feature-label">playground</span>
903-
</button>
904-
<button aria-selected="false" class="feature-badge tab" data-category="favorites" role="tab" tabindex="-1">
905-
<span class="feature-icon"><i class="fas fa-star"></i></span>
906-
<span class="feature-label">favorites</span>
907-
</button>
908-
</div>
909-
910-
<button class="btn-random-project" id="randomProjectBtn" title="Discover a random project!">
911-
launch random →
912-
</button>
913-
</div>
914-
</div>
879+
915880
</section>
916881

917-
<section class="projects-section">
918-
<div class="container">
919-
<div class="projects-grid">
920-
<div class="project-card" data-category="games" data-project="blackjack(21)">
882+
883+
884+
<section class="projects-section">
885+
<div class="container">
886+
<div class="projects-grid">
887+
<div class="project-card" data-category="games" data-project="blackjack(21)">
921888
<div class="card-icon">🃏</div>
922889
<h3>BlackJack21</h3>
923890
<p>Beat the dealer!</p>

‎web-app/js/main.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
105105
syncThemeColor(savedTheme);
106106
themeToggle.innerHTML =
107107
savedTheme === 'light'
108-
? '<i class="fas fa-sun" aria-hidden="true"></i>'
109-
: '<i class="fas fa-moon" aria-hidden="true"></i>';
108+
? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
109+
: '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
110110
updateThemeToggleAria(savedTheme === 'light');
111111

112112
themeToggle.addEventListener('click', function () {
@@ -119,8 +119,8 @@ document.addEventListener('DOMContentLoaded', function () {
119119

120120
themeToggle.innerHTML =
121121
newTheme === 'light'
122-
? '<i class="fas fa-sun" aria-hidden="true"></i>'
123-
: '<i class="fas fa-moon" aria-hidden="true"></i>';
122+
? '<img src="assets/sun.svg" alt="" aria-hidden="true" class="theme-icon">'
123+
: '<img src="assets/moon.svg" alt="" aria-hidden="true" class="theme-icon">';
124124
updateThemeToggleAria(newTheme === 'light');
125125
});
126126
}

0 commit comments

Comments
 (0)