Skip to content

Commit c582d67

Browse files
sid-devspotsid-devspot
committed
Updated Minimal Edge Layout
1 parent b40cb34 commit c582d67

File tree

13 files changed

+208
-66
lines changed

13 files changed

+208
-66
lines changed

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎docs/main.9e414cea9c56c35e.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.a0c54774b2d69c1a.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

docs/styles.dd72546108b2dbc2.css renamed to docs/styles.6d429b5dc3164979.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/css-fusion/src/lib/scss/_nav.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
}
9898

9999
.navbar-link {
100+
border: 1.5px solid transparent;
100101
font-family: var(--font-family);
101102
display: flex;
102103
align-items: center;
@@ -112,7 +113,7 @@
112113

113114
.navbar-active {
114115
border: 1.5px solid var(--navbar-bdr-active);
115-
background-color: var(--navbar-active-bg);
116+
background-color: var(--navbar-bg-active);
116117
}
117118

118119
&::-webkit-scrollbar {
@@ -233,9 +234,18 @@
233234
padding: 10px;
234235

235236
.nav-txt {
237+
display: none;
236238
padding-left: 0 !important;
237239
}
238240
}
241+
242+
.nav-menu {
243+
display: inline-block;
244+
max-width: 8ch; // restrict to approx. 8 characters
245+
overflow: hidden;
246+
text-overflow: ellipsis;
247+
white-space: nowrap;
248+
}
239249
}
240250

241251
.navbar-set03 {

‎projects/css-fusion/src/lib/scss/_templates.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
.app-content {
1111
height: 100%;
1212
background-color: var(--app-content-bg);
13-
padding: 20px;
1413
overflow-y: auto;
1514
}
1615
}
@@ -28,7 +27,6 @@
2827

2928
.app-content {
3029
background-color: var(--app-content-bg);
31-
padding: 20px;
3230
overflow-y: auto;
3331
}
3432
}
@@ -49,7 +47,6 @@
4947
margin-top: 10px;
5048
background-color: var(--neonflow-content-bg);
5149
border: 1.6px solid var(--neonflow-content-bdr);
52-
padding: 20px;
5350
overflow-y: auto;
5451
color: #ffffff;
5552
border-radius: 10px;

‎projects/css-fusion/src/lib/scss/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@
105105
--navbar-menu-title: #757575;
106106
--navbar-thumb: #888;
107107
--navbar-thumb-active: #707070;
108+
--navbar-bdr-active: #e9e9e9;
109+
--navbar-bg-active: #fafafa;
108110

109111
// App
110112
--app-layout-height: 100dvh;

‎src/app/components/menubar/menubar.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h3>Center Stage Menu</h3>
1919
<div class="card-body">
2020
<header class="menubar-box">
2121
<div class="menubar-set-01">
22-
<img class="menubar-logo" src="./assets/me-logo.svg" />
22+
<img class="menubar-logo" src="./assets/me-logdark.svg" />
2323
<p class="menubar-logo-name">Menu</p>
2424
</div>
2525
<div class="menubar-set-02">
@@ -57,7 +57,7 @@ <h3>Classic Left Align</h3>
5757
<div class="card-body">
5858
<header class="menubar-box">
5959
<div class="menubar-set-01">
60-
<img class="menubar-logo" src="./assets/me-logo.svg" />
60+
<img class="menubar-logo" src="./assets/me-logdark.svg" />
6161
<p class="menubar-logo-name">Menu</p>
6262
</div>
6363
<div class="menubar-set-02">
@@ -97,7 +97,7 @@ <h3>Right in Control</h3>
9797
<div class="card-body">
9898
<header class="menubar-box">
9999
<div class="menubar-set-01">
100-
<img class="menubar-logo" src="./assets/me-logo.svg" />
100+
<img class="menubar-logo" src="./assets/me-logdark.svg" />
101101
<p class="menubar-logo-name">Menu</p>
102102
</div>
103103
<div class="menubar-set-02">

‎src/app/components/nav/nav.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,8 @@ <h3>
8484
<div class="user">
8585
<span class="material-symbols-outlined user-img">account_circle</span>
8686
<div class="user-info nav-txt">
87-
<h3>User Name</h3>
88-
<p>Ui/Ux Developer</p>
87+
<h3 class="user-info-name">User Name</h3>
88+
<p class="user-info-desc">Ui/Ux Developer</p>
8989
</div>
9090
</div>
9191
<span class="material-symbols-outlined more-icon"> steppers </span>
@@ -166,8 +166,8 @@ <h3>
166166
<div class="user">
167167
<span class="material-symbols-outlined user-img">account_circle</span>
168168
<div class="user-info nav-txt">
169-
<h3>User Name</h3>
170-
<p>Ui/Ux Developer</p>
169+
<h3 class="user-info-name">User Name</h3>
170+
<p class="user-info-desc">Ui/Ux Developer</p>
171171
</div>
172172
</div>
173173
<span class="material-symbols-outlined more-icon"> steppers </span>

‎src/app/templates/minimal-edge/minimal-edge.component.html‎

Lines changed: 42 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,21 @@
77
</div>
88
<div class="menubar-set-02">
99
<div class="menubar-link-left">
10-
<p class="menubar-link">Css</p>
11-
<p class="menubar-link">Scss</p>
12-
<p class="menubar-link active-link">Javascript</p>
13-
<p class="menubar-link">Angular</p>
14-
<p class="menubar-link">React</p>
15-
<p class="menubar-link">Github</p>
10+
<p
11+
class="menubar-link"
12+
*ngFor="
13+
let section of [
14+
'Getting Started',
15+
'Documentation',
16+
'Processes',
17+
'Support'
18+
]
19+
"
20+
[class.active-link]="selectedSection === section"
21+
(click)="onSectionClick(section)"
22+
>
23+
{{ section }}
24+
</p>
1625
</div>
1726
</div>
1827
<div class="menubar-set-03">
@@ -24,13 +33,11 @@
2433
</form>
2534
</div>
2635
</header>
27-
36+
2837
<section class="app-body">
2938
<nav class="navbar-box" cssFusionNav>
3039
<div class="navbar-set01">
31-
<h3>
32-
Menus
33-
</h3>
40+
<h3>Menus</h3>
3441
<span
3542
class="material-symbols-outlined nav-icon-trigger"
3643
id="navLeft-tigger"
@@ -41,11 +48,13 @@ <h3>
4148
<div class="navbar-set02">
4249
<ng-container *ngFor="let data of navMenusProp">
4350
<small class="nav-menu">{{ data.title }}</small>
44-
<!-- <p class="navbar-link navbar-active">
45-
<span class="material-symbols-outlined nav-icon">dashboard</span>
46-
<span class="nav-txt">Dashboard</span>
47-
</p> -->
48-
<p class="navbar-link" *ngFor="let menu of data.menus">
51+
<p
52+
class="navbar-link"
53+
*ngFor="let menu of data.menus"
54+
[ngClass]="menu.text === selectedMenuTitle ? 'navbar-active' : ''"
55+
(click)="onMenuClick(menu)"
56+
57+
>
4958
<span class="material-symbols-outlined nav-icon">{{
5059
menu.icon
5160
}}</span>
@@ -55,18 +64,31 @@ <h3>
5564
</div>
5665
<div class="navbar-set03">
5766
<div class="user">
58-
<span class="material-symbols-outlined user-img">account_circle</span>
67+
<span class="material-symbols-outlined user-img"
68+
>account_circle</span
69+
>
5970
<div class="user-info nav-txt">
60-
<h3>User Name</h3>
61-
<p>Ui/Ux Developer</p>
71+
<h3 class="user-info-name">User Name</h3>
72+
<p class="user-info-desc">Ui/Ux Developer</p>
6273
</div>
6374
</div>
6475
<span class="material-symbols-outlined more-icon"> steppers </span>
6576
</div>
6677
</nav>
67-
78+
6879
<div class="app-content">
69-
<p>Text</p>
80+
<div class="me-content-intro">
81+
<h2>{{ appContentData[selectedSection]?.title }}</h2>
82+
<p *ngFor="let desc of appContentData[selectedSection]?.description">
83+
{{ desc }}
84+
</p>
85+
</div>
86+
<div class="me-content-nav-desc">
87+
<h3 class="user-info-name">{{ selectedMenuTitle }}</h3>
88+
<p class="user-info-desc">
89+
{{ selectedMenuContent }}
90+
</p>
91+
</div>
7092
</div>
7193
</section>
7294
</main>

0 commit comments

Comments
 (0)