ing

@overflow/commons/ui/component/primeng/dropdown-panel.component.scss

@@ -23,3 +23,9 @@
 .ui-popuppanel-footer {
     padding-top: 1em;
 }
+
+svg.octicon {
+      fill: white; //currentColor;
+      height: 16px;
+      flex-shrink: 0;
+    }

src/app/pages/home/home-page.component.html

@@ -1,7 +1,6 @@
 <div class="ui-fluid">
     <div class="ui-g">
-        <div class="ui-g-12 ui-nopad">
+        <div class="ui-g-12">
-            <div class="card">
             <h1>Home works!!!!</h1>
             <p-panel #content [showHeader]="false" class="block-panel">
                 <div class="ui-g" dir="rtl">
@@ -9,7 +8,7 @@
                 </div>
             </p-panel>
 
-                <h3 class="first">Document</h3>
+            <!-- <h3 class="first">Document</h3>
             <p-blockUI [blocked]="blockedDocument"></p-blockUI>
 
             <button type="button" pButton label="Block" (click)="blockDocument()"></button>
@@ -27,8 +26,7 @@
                 Through Michael's life the nature of the family business becomes clear. The business of the family is
                 just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
                 violence whenever anything stands against the good of the family.
-                </p-panel>
+            </p-panel> -->
-            </div>
         </div>
     </div>
 </div>

src/app/pages/pages.component.html

@@ -1,8 +1,14 @@
 <app-toolbar>
   <app-nic-dropdown [blockTarget]="pagesContent"></app-nic-dropdown>
   <app-scanner-setting-dropdown [blockTarget]="pagesContent"></app-scanner-setting-dropdown>
-
+  <div class="toolbar-button push-pull-button" style="width: 32px">
-  <div class="sidebar-section" style="width: 250px;">
+    <button class="button-component" type="button">
+      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 12 16">
+        <path d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"></path>
+      </svg>
+    </button>
+  </div>
+  <!-- <div class="sidebar-section" style="width: 250px;">
     <div class="toolbar-dropdown closed" aria-expanded="false">
       <div class="toolbar-button" title="C:\Users\crusader\Documents\GitHub\gateway">
         <button class="button-component" type="button">
@@ -50,7 +56,7 @@
         </div>
       </div>
     </button>
-  </div>
+  </div> -->
 </app-toolbar>
 
 <p-panel #pagesContent [showHeader]="false">

src/assets/scss/styles/component/toolbar/_toolbar.scss

@@ -50,6 +50,14 @@
   }
 }
 
+.toolbar-button {
+  svg.octicon {
+    fill: currentColor;
+    height: 16px;
+    flex-shrink: 0;
+  }
+}
+
 @keyframes spin {
   100% {
     -webkit-transform: rotate(360deg);

src/commons/component/nic-dropdown.component.html

@@ -14,10 +14,12 @@
       </svg>
     </button>
   </p-header>
-
+  <div id="nic-list-border">
-  <div>Body Content</div>
+    <p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-listbox>
+  </div>
+  <!-- <div>Body Content</div>
 
   <p-footer>
     Footer content here
-  </p-footer>
+  </p-footer> -->
 </of-p-dropdownPanel>

src/commons/component/nic-dropdown.component.scss

@@ -0,0 +1,4 @@
+.nic-list-border p-listbox div.ui-widget-content{
+  border: 0px !important;
+  width: 100% !important;
+}

src/commons/component/scanner-setting-dropdown.component.html

@@ -1,4 +1,4 @@
-<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'350px'}" [blockTarget]="blockTarget">
+<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
   <p-header class="toolbar-button">
     <button _ngcontent-c1="" class="button-component" type="button">
       <!-- <svg _ngcontent-c1="" aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16" width="16px" height="16px">
@@ -21,6 +21,43 @@
     </button>
   </p-header>
 
+  <div class="ui-g">
+    <div class="ui-g-12">
+      <div class="ui-g-2">
+        <h3>IP</h3>
+      </div>
+      <div class="ui-g-5">
+        <p-radioButton name="groupname" value="V4" label="V4" [(ngModel)]="selectedValue"></p-radioButton>
+      </div>
+      <div class="ui-g-5">
+        <p-radioButton name="groupname" value="V6" label="V6" [(ngModel)]="selectedValue"></p-radioButton>
+      </div>
+      <div class="ui-g-10 ui-g-offset-2">Rage :
+        <input type="text" pInputText placeholder="168.123.1.1" style="width:100px;"> -
+        <input type="text" pInputText placeholder="168.123.1.1" style="width:100px;">
+      </div>
+    </div>
+  </div>
+  <div class="ui-g">
+    <div class="ui-g-12">
+      <div class="ui-g-2">
+        <h3>Port</h3>
+      </div>
+      <div class="ui-g-5">
+        <p-checkbox name="groupname" value="TCP" label="TCP" [(ngModel)]="selectedValue"></p-checkbox>
+      </div>
+      <div class="ui-g-5">
+        <p-checkbox name="groupname" value="UDP" label="UDP" [(ngModel)]="selectedValue"></p-checkbox>
+      </div>
+      <div class="ui-g-10 ui-g-offset-2">Rage :
+        <input type="text" pInputText placeholder="1" style="width:100px;"> -
+        <input type="text" pInputText placeholder="1024" style="width:100px;">
+      </div>
+    </div>
+  </div>
+
+
+  <!--
   <h3 class="first">Document</h3>
   <p-blockUI [blocked]="blockedDocument"></p-blockUI>
 
@@ -40,7 +77,11 @@
     kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good
     of the family.
   </p-panel>
-  <p-footer>
+   -->
+  <div class="ui-g-12">
+    <button type="button" pButton label="확인" (click)="blockDocument()" style="float: right;"></button>
+  </div>
+  <!-- <p-footer>
     Footer content here
-  </p-footer>
+  </p-footer> -->
 </of-p-dropdownPanel>

src/commons/component/scanner-setting-dropdown.component.scss

@@ -2,12 +2,10 @@
   display: inline;
 
   .title {
-    //width: auto;
     float: left;
     font-size: var(--font-size-sm);
   }
   .description{
-    //width: auto;
     float: left;
   }
 }