Адаптивная боковая панель внутри виджета чата с плавающей / полноэкранной работы-HTML, CSS, JS ⇐ Javascript

[Anonymous]

Я строю виджет плавучего чата, который может быть < /p>
mimized (маленький) < /strong> < /p>
Размер: 400 × 600 px (нижний угол) < /p>
боковой панель обрушивается (≈ 30 px) и может быть открыто на 100%< /p> p> p> p> p> pr /pr /pr /pr /pr /pr /pr /pr /pr /pr /px. Вновь открывает виджет, боковая панель должна снова запустить свернувшиеся
независимо от его предыдущего состояния. Разрушено 30 PX состояние.
текущие проблемы
После входа в полноэкрану, а затем восстановления в маленький режим, боковая панель сохраняет любую ширину (открытую или закрытую) вместо сброса до 30 пк. Сбросьте, когда виджет сведен к минимуму /повторному открыту.




Support Chat UI

* { box-sizing: border-box; }

body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f3f3f3;
}

/* ---------- launcher ---------- */
.chat-launcher {
position: fixed;
bottom: 20px;
right: 20px;
background: #000;
color: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
cursor: pointer;
z-index: 1000;
}

/* ---------- chat container ---------- */
.chat-container {
display: none;
height: 600px;
width: 400px;
max-width: 90vw;
position: fixed;
bottom: 80px;
right: 20px;
background: #fff;
box-shadow: 0 0 12px rgba(0,0,0,0.15);
border-radius: 12px;
overflow: hidden;
z-index: 1001;
transition: all .3s ease;
}

/* ---------- fullscreen overrides ---------- */
.chat-container.fullscreen {
width: 100vw;
height: 100vh;
bottom: 0;
right: 0;
border-radius: 0;
display: flex;
flex-direction: row;
}

/* sidebar in fullscreen */
.chat-container.fullscreen .sidebar {
width: 250px;
border-right: 1px solid #ddd;
}
.chat-container.fullscreen .sidebar .content {
display: block;
}

/* chat area in fullscreen */
.chat-container.fullscreen .container {
display: flex;
flex: 1 1 auto;
}

/* ---------- sidebar ---------- */
.sidebar {
width: 60px;
background: #fff;
border-right: 1px solid #ddd;
padding: 20px;
transition: width .3s;
flex-shrink: 0;
}
.sidebar .toggle-btn {
font-size: 20px;
cursor: pointer;
margin-bottom: 20px;
}
.sidebar .content {
display: none;
}
.sidebar.fullwidth {
width: 100%;
border-right: none;
}
.sidebar.fullwidth .content {
display: block;
}
.sidebar.fullwidth ~ .container {
display: none;
}

/* ---------- chat area ---------- */
.container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.header {
background: #f5f5f5;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header h2 {
flex: 1;
text-align: center;
font-size: 18px;
margin: 0;
}
.header .icons {
display: flex;
gap: 10px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.blue-banner {
background: linear-gradient(to right, #2979ff, #1976d2);
color: white;
padding: 15px;
margin: 10px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.messages {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.message {
margin-bottom: 20px;
}
.message.bot {
background: #fff;
border-radius: 10px;
padding: 15px;
box-shadow: 0 0 4px rgba(0,0,0,.1);
max-width: 80%;
}
.message.user {
text-align: right;
}
.message.user .bubble {
display: inline-block;
background: #1976d2;
color: white;
border-radius: 20px;
padding: 10px 20px;
}
.timestamp {
font-size: 12px;
color: gray;
margin-top: 5px;
}
.input-area {
display: flex;
align-items: center;
padding: 10px;
background: white;
border-top: 1px solid #ccc;
}
.input-area input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
}
.input-area button {
background: #1976d2;
color: white;
border: none;
border-radius: 50%;
padding: 10px 15px;
margin-left: 10px;
cursor: pointer;
}
.upload-btn {
margin-right: 10px;
font-size: 12px;
color: #1976d2;
cursor: pointer;
}







☰

{nameHere}
{descriptionHere}
Continue Conversations
Sender: Clickable →
Talk to our experts
Support

Need specialized help?
Our teams are ready to assist you with any questions
Call Us







✖
Support


⤢





Enter your details

Click here to provide your information




Hey How can I assist you with services today? Could you please share your username to help you better?

• 1. I have an issue with SMS
• 2. I need help with Email
• 3. Other service query

10:26 am


hey
10:26 am


Hey How can I help you with today? Please share your username so I can assist you better.

• 1. I have an issue with SMS
• 2. I need help with Email
• 3. Other service query

10:27 am



Upload Files

➤





const chatLauncher = document.getElementById('chatLauncher');
const chatContainer = document.getElementById('chatContainer');
const sidebar = document.getElementById('sidebar');

function toggleChat() {
chatContainer.style.display = 'none';
chatLauncher.style.display = 'flex';
}
chatLauncher.addEventListener('click', () => {
chatContainer.style.display = 'flex';
chatLauncher.style.display = 'none';
});

function toggleFullscreen() {
chatContainer.classList.toggle('fullscreen');
}

function toggleSidebar() {
const isFullscreen = chatContainer.classList.contains('fullscreen');
const isMobile = chatContainer.offsetWidth

Подробнее здесь: https://stackoverflow.com/questions/797 ... tml-css-js