Skip to content

Commit

Permalink
Merge pull request #1387 from shivhere007/main
Browse files Browse the repository at this point in the history 
Improve mobile responsiveness of navbar
  • Loading branch information
@ANSHIKA-26
ANSHIKA-26 authored Oct 25, 2024
2 parents 605c308 + 6edbc30 commit 3074fe9
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 55 deletions.
2 changes: 1 addition & 1 deletion backend/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import express from "express";
import dotenv from "dotenv";
import connectDB from "./utils/db.js";
import blogRoutes from "./routes/blogRoutes.js";
import userRoutes from "./routes/userRoutes.js";
import userRoutes from "./routes/userRoutes.js";

dotenv.config();
const app = express();
Expand Down
20 changes: 10 additions & 10 deletions frontend/src/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WordWise</title>
<link rel="stylesheet" href="./styles/output.css">
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<link rel="stylesheet" href="./styles/output.css" />
</head>
<body class="bg-gray-100 dark:bg-gray-900">
<div id="app">
<nav id="navbar"></nav>
<main id="content"></main>
<footer id="footer"></footer>
<nav id="navbar"></nav>
<main id="content"></main>
<footer id="footer"></footer>
</div>
<script type="module" src="/main.js"></script>
</body>
</body>
</html>
203 changes: 159 additions & 44 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,55 +221,160 @@
<div id="square5"></div>
</div>
</div>
<nav>

<!-- Styles -->
<style>
/* General Styles */

.logo h1 a{
font-size: 40px;

}

.nav-links1 {
display: flex;
gap: 30px;
}

.hamburger {
display: none;
cursor: pointer;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 22px;
}

.hamburger span {
width: 100%;
height: 3px;
background-color: #333;
}

<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<!-- Navigation Bar -->
<div class="layout-container" style="margin-bottom: 4rem;">

<header >

@media (max-width: 1024px) {
.logo h1 a{
font-size: 30px;
}
.nav-links1 {
gap: 10px;
}
.nav-links1 a{
font-size: 16px;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
align-items: center;
justify-content: center;
/* Add styling for visibility, like color, size, etc. */
}

.nav-links1 {
display: none;
flex-direction: column;
gap: 10px;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #fff;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

<div class="logo">
.nav-links1.active {
display: flex;
}

<h2 href="index.html">WordWise</h2>
</div>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-links1">
<a href="index.html">Home</a>
<a href="blog.html">Leading Blog</a>
<a href="start_writing.html">Start Writing</a>
<a href="category.html">Categories</a>
.dropdown {
position: relative;
margin-left: 200px;
}
}

<a href="contact_us.html">Contact Us</a>

<a href="give_feedback.html">Give Feedback</a>

</div>
<div class="dropdown" >
<!-- Profile Icon -->
<a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
<i class="fas fa-user-circle"></i>
</a>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" id="dropdownMenu">
<li><a href="#login" onclick="openForm('login')">Login</a></li>
<li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
</ul>
</div>
/* Additional styling for smaller screens */
@media (max-width: 576px) {
.logo {
margin-left: -75px;
}
.logo h1 a {
font-size: 30px;
}
.dropdown {
position: relative;
margin-left: 60px;
}
.theme-switch-wrapper {
margin-right: -80px;
}
}

@media (max-width: 345px) {
.logo {
margin-left: -65px;
}
.logo h1 a {
font-size: 24px;
}
}


.dropdown-menu {
display: none;
position: absolute;
right: 0;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
z-index: 1;
}

.dropdown:hover .dropdown-menu {
display: block;
}



</style>
<nav>

<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<!-- Navigation Bar -->
<div class="layout-container">

<header>

<div class="logo">
<h1><a href="index.html">WordWise</a></h1>
</div>
<div class="hamburger" id="hamburger" onclick="toggleHamburgerMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="nav-links1" id="navLinks">
<a href="index.html">Home</a>
<a href="blog.html">Leading Blog</a>
<a href="start_writing.html">Start Writing</a>
<a href="category.html">Categories</a>
<a href="contact_us.html">Contact Us</a>
<a href="give_feedback.html">Give Feedback</a>
</div>
<div class="dropdown">
<!-- Profile Icon -->
<a href="#" class="profile-icon" id="profileDropdown" onclick="toggleDropdown()">
<i class="fas fa-user-circle"></i>
</a>

<!-- Dropdown Menu -->
<ul class="dropdown-menu" id="dropdownMenu">
<li><a href="#login" onclick="openForm('login')">Login</a></li>
<li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
</ul>
</div>

<!-- Login Form -->
<!-- Login Form -->
<div class="form-popup" id="loginForm">
<form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
Expand Down Expand Up @@ -439,7 +544,8 @@ <h2>Forgot Password</h2>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="backend/signup/signup.js"></script> <!-- Link to your JavaScript file -->

<div class="theme-switch-wrapper" >
<!-- Theme Switch -->
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider">
Expand All @@ -449,12 +555,21 @@ <h2>Forgot Password</h2>
</label>
<span id="mode-label"></span>
</div>

</header>
</div>
</header>
</div>

</nav>

<!-- JavaScript for Hamburger Menu Toggle -->
<script>
function toggleHamburgerMenu() {
const navLinks = document.getElementById('navLinks');
navLinks.classList.toggle('active');
}
</script>


</nav>
<!--Header Ends-->
<!--Main Section Starts-->
<main id="site-main" style="margin-top: 10rem;margin-left: 50px;">
Expand Down

1 comment on commit 3074fe9

@vercel
Copy link

@vercel vercel bot commented on 3074fe9 Oct 25, 2024

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:

word-wise – ./

word-wise-anshikas-projects-45924011.vercel.app
word-wise-pi.vercel.app
word-wise-git-main-anshikas-projects-45924011.vercel.app

Please sign in to comment.